@use './colors' as c;
@use './transitions' as t;

$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 c.$gray-lightest-rgba, 0 0 3px 0 c.$gray-lighter-rgba;
  opacity: 0;
  transition: opacity t.$fast t.$ease, background t.$fast t.$ease,
    box-shadow t.$fast t.$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 t.$fast t.$ease, color t.$fast t.$ease, opacity t.$fast t.$ease;

  &:hover {
    color: c.$white;
    background: c.$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: c.$gray-light;

  &:hover {
    color: c.$white;
    background: c.$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;
  }
}