.q-slider-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: -4px;
  line-height: normal;
  text-align: center;
  user-select: none;
  background-color: transparent;
  border: none;
  transform: translate(-50%, -50%);

  &__target {
    width: 16px;
    height: 16px;
    user-select: none;
    background-color: var(--color-primary);
    border-radius: 50%;
    box-shadow: 4px 4px 8px rgb(var(--color-rgb-blue) / 40%),
      1px 1px 3px rgb(var(--color-rgb-blue) / 40%);
  }

  &__tooltip {
    position: absolute;
    top: 16px;
    z-index: 1;
    display: none;
    width: fit-content;
    padding: 3px 8px;
    color: var(--color-primary-black);
    background-color: var(--color-tertiary-gray);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-primary);
    transform: translateX(-50%);

    &_is-always-visible {
      display: block;
    }
  }

  &_is-disabled {
    .q-slider-button__target {
      background-color: var(--color-tertiary-gray-ultra-darker);
    }

    &:hover {
      cursor: not-allowed;
    }
  }

  &_is-dragging:not(&_is-disabled) {
    .q-slider-button__target {
      background-color: var(--color-primary);
      box-shadow: 1px 1px 3px rgb(var(--color-rgb-blue) / 40%);
    }

    ~ .q-slider-button__tooltip {
      display: block;
    }
  }

  &:hover:not(&_is-disabled),
  &.focus-visible:not(&_is-disabled) {
    z-index: 3;
    outline: none;
  }

  &:hover:not(&_is-disabled) {
    ~ .q-slider-button__tooltip {
      display: block;
    }
  }

  &.focus-visible:not(&_is-disabled) {
    .q-slider-button__target {
      background-color: var(--color-primary-darker);
    }
  }
}
