@import './colors';
@import './transitions';

$buttonSize: 20px;

.track-control,
.track-control-vertical {
  position: absolute;
  z-index: 1;
  display: flex;
  background: rgba(255, 255, 255, 0.75);
  right: calc($buttonSize / 10);
  top: calc($buttonSize / 10);
  border-radius: calc($buttonSize / 8);
  box-shadow: 0 0 0 1px $gray-lightest-rgba, 0 0 3px 0 $gray-lighter-rgba;
  opacity: 0;
  transition: opacity $fast $ease, background $fast $ease,
    box-shadow $fast $ease;
}

.track-control-dark,
.track-control-dark .track-control-active {
  background: rgba(40, 40, 40, 0.85);
}

.track-control-vertical {
  flex-direction: column-reverse;
}

.track-control-left {
  left: calc($buttonSize / 10);
  right: auto;
}

.track-control-active,
.track-control-vertical-active {
  opacity: 1;
  z-index: 1;

  &:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 3px 0 rgba(0, 0, 0, 0.2);
  }
}

.track-control-dark.track-control-active {
  &:hover {
    background: rgba(34, 34, 34, 0.95);
  }
}

.track-control-active {
  composes: track-control;
}

.track-control-padding-right {
  right: 4 * $buttonSize;
}

.track-control-button {
  width: $buttonSize;
  height: $buttonSize;
  padding: calc($buttonSize / 5);
  cursor: pointer;
  opacity: 0.66;
  transition: background $fast $ease, color $fast $ease, opacity $fast $ease;

  &:hover {
    color: $white;
    background: $active;
    opacity: 1;
  }

  &:first-child {
    border-radius: calc($buttonSize / 8) 0 0 calc($buttonSize / 8);
  }

  &:last-child {
    border-radius: 0 calc($buttonSize / 8) calc($buttonSize / 8) 0;
  }
}

.track-control-dark .track-control-button {
  color: $gray-light;

  &:hover {
    color: $white;
    background: $active;
    opacity: 1;
  }
}

.track-control-button-vertical {
  &:first-child {
    border-radius: 0 0 calc($buttonSize / 8) calc($buttonSize / 8);
  }

  &:last-child {
    border-radius: calc($buttonSize / 8) calc($buttonSize / 8) 0 0;
  }
}