@import "../colors";

.media-indicator-container {
  min-width: 40rem;
  min-height: 10rem;
  background: $mantle;
  border: 0.25rem solid $surface0; 
  border-radius: 0.4rem;
}

.media-indicator-items {
  margin: 1rem;
  margin-bottom: 1.3rem;
}

.media-indicator-current-album-cover {
  border: 0.25rem solid $surface0; 
  background-color: $surface0;
  border-radius: 0.25rem;
  min-width: 11rem;
  min-height: 11rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.media-indicator-right-section {
  margin-left: 2rem;
}

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

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

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

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

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

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

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

.media-indicator-time {
  color: $overlay2;
  font-size: 0.9rem;
  font-weight: 800;
  margin-top: 0.9rem;

  &.total {
    margin-left: 1.2rem;
  }

  &.current {
    margin-right: 1.2rem;
  }
}

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

  tooltip {
    min-width: 10rem;
    min-height: 10rem;
    background: red;
  }

  &.disabled {
    background: $surface0;
  }

  &.enabled {
    background: $lavender;
    
    &:hover {
      background: $pink;
    }

    &.active {
      background: $pink;
    }
  }

}

image {
  font-size: 1.5rem;
}

.menu-slider.media.progress {
  margin-top: 1rem;
  min-height: 2rem;
  min-width: 17rem;

  trough {
    background: $base;
    border-radius: 0.3rem;

    highlight,
    progress {
      min-height: 1rem;
      background: $pink;
      border-radius: 0.3rem;
    }
  }

  slider {
    box-shadow: none;
    background-color: transparent;
    min-height: 1.2rem;
    min-width: 1.2rem;
    border: 0rem solid transparent;
    border-radius: 0.3rem;
  }

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

    slider {
      background: $overlay0;
      box-shadow: none;
    }
  }

  &:disabled {

    highlight,
    progress {
    }
  }

  trough:focus {

    slider {
    }
  }
}