$button-bg-gray: $gray-1050;
$button-color-white: $gray-50;

@mixin tap-factory($theme-color) {
  background-color: $button-bg-gray;
  color: $theme-color;

  &:disabled {
    cursor: not-allowed;
    opacity: $opacity-disabled;
  }

  &:focus-visible {
    outline: 2px solid $blue-500;
    outline-offset: 2px;
  }

  &:hover:not(:disabled) {
    color: $button-color-white;
    background-color: $theme-color;
  }

  &:active:not(:disabled) {
    color: $button-bg-gray;
    background-color: $button-color-white;
    transition-property: color, background-color;
    transition-duration: $transition-time-action;
  }

  &.active {
    background-color: $theme-color;
    color: $button-color-white;
  }
}

.tapButton {
  font-family: $ontime-font-family;
  font-size: calc(1rem + 2px);
  border-radius: $component-border-radius-md;
  width: 100%;
  transition-property: color, background-color;
  transition-duration: $transition-time-feedback;
  display: grid;
  place-content: center;
  letter-spacing: 0.5px;
}

.tapButton.neutral {
  @include tap-factory($gray-50);

  &:hover:not(:disabled) {
    color: $gray-50;
    background-color: $gray-1000;
  }

  &:active:not(:disabled) {
    color: $button-bg-gray;
    background-color: $button-color-white;
    transition-property: color, background-color;
    transition-duration: $transition-time-action;
  }
}

.tapButton.play {
  @include tap-factory($playback-start);
}

.tapButton.roll {
  @include tap-factory($ontime-roll);
}

.tapButton.pause {
  @include tap-factory($ontime-paused);
}

.tapButton.ontime {
  @include tap-factory($ontime-color);
}

.tapButton.stop {
  @include tap-factory($ontime-stop);
}

.tapButton.square {
  aspect-ratio: 1;
  font-size: calc(1rem - 2px);
}

.tapButton.tight {
  padding-inline: 0.5rem;
  width: fit-content;
}

.tapButton.fill {
  aspect-ratio: unset;
  height: 100%;
  font-size: 1.5rem;
}
