.cal-box {
  background-color: $surface;
  border: 3px solid $surface_highest;
  border-radius: 15px;
  min-width: 320px;
  padding: 8px;
  .cal {
    padding: 8px 6px;
  }
}
calendar:selected {
  color: $primary;
}

calendar.header {
  color: $text;
}

calendar.button {
  color: $primary;
}

calendar.highlight {
  color: $primary;
}

calendar:indeterminate {
  color: $text_variant;
}

.music-box {
  border: 3px solid $surface_highest;
  background-color: $surface;
  border-radius: 15px;
  margin-bottom: 8px;
  padding: 8px;
  min-width: 320px;
}
.music-cover {
  min-height: 64px;
  min-width: 64px;
  background-size: 64px;
  margin: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-position: center; 
  border-radius: 15px;
  border: 3px solid $surface_high;
  &:hover {
    color: $primary;
    border-color: $primary;
  }
  & > * > * {
    font-size: 32px;
  }
}
.music-title-box {
  margin-top: 10px;
  & > .music-artist {
    margin-top: 2px;
    color: $text_variant;
    font-weight: normal;
  }
}
.music-slider trough {
  background-color: $surface_highest;
  border-radius: 15px;
  min-height: 15px;
  min-width: 260px;
  margin: 4px;
}
.music-slider trough highlight {
  background-color: $primary;
  border-radius: 15px;
  min-width: 20px;
}
.music-control {
  margin: 0 5px;
  &:hover {
    color: $primary;
  }
  & > * {
    font-size: 18px;
  }
}
