@import "../colors";

.menu-items-container.media {
  min-width: 36.5em;
  min-height: 18em;

  .menu-section-container {
    margin: 1.3em 0em;
  }

  .menu-items-section {
    border-radius: 0.4em;
    padding: 0em;
  }

  .menu-content {
    border-radius: 0.4em;
    background-size: cover;
    background-position: center;
  }

  .media-content {
    margin: 1em;
  }

  .media-indicator-current-song-name {
    margin-bottom: 0.75rem;
  }

  .media-indicator-current-song-author {
    margin-bottom: 0.75rem;
  }

  .media-indicator-current-song-name-label {
    color: $lavender;
    font-size: 1.35em;
  }

  .media-indicator-current-song-author-label {
    color: $teal;
    font-size: 1em;
  }

  .media-indicator-current-song-album-label {
    color: $pink;
    font-size: 1em;
  }

  .media-indicator-current-controls {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .media-indicator-control-button {
    margin: 0rem 0.5rem;
  }

  .media-indicator-control-button {
    background: $lavender;
    color: $crust;
    min-height: 1.8em;
    min-width: 2em;
    border-radius: 0.2rem;

    &.disabled {
      background: $surface2;
    }

    &.enabled {
      background: $lavender;

      &:hover {
        background: $pink;
      }

      &.active {
        background: $pink;
      }
    }

  }

  image {
    font-size: 1.1em;
  }

  .menu-slider.media.progress {
    margin-top: 1em;
    margin-bottom: 1em;

    trough {
      background: $surface2;
      border-radius: 0.4em;

      highlight,
      progress {
        min-height: .85em;
        background: $lavender;
      }
    }

    &:hover {
      trough {
        background: $surface1;
      }
    }
  }
}