/* Component: pkt-timepicker */

@use '../abstracts/mixins/typography';

pkt-timepicker {
  display: block;
}

@mixin timepicker-field-size($min-height, $text-style, $icon-size, $padding-inline: 0.5rem) {
  .pkt-input__container {
    min-height: $min-height;

    .pkt-timepicker__input,
    .pkt-timepicker__separator {
      @include typography.get-text($text-style);
    }

    button.pkt-timepicker__button {
      padding: 0 $padding-inline;

      pkt-icon,
      .pkt-icon,
      svg {
        width: $icon-size;
        height: $icon-size;
      }
    }

    .pkt-timepicker__icon {
      padding: 0 $padding-inline 0 0;
      height: $icon-size;
    }
  }
}

.pkt-timepicker {
  &__anchor {
    position: relative;
  }

  .pkt-input__container {
    min-height: 3rem;
    align-items: center;
    border: 2px solid var(--pkt-color-input-border-normal);
    background-color: var(--pkt-color-input-background-normal);
    width: fit-content;
    padding: 0 0 0 1rem;

    // Composite layout: one bordered row, segments without individual borders/heights.
    .pkt-timepicker__input,
    .pkt-timepicker__separator,
    .pkt-input-icon,
    .pkt-timepicker__button {
      border: 0;
      height: auto;
      min-height: 0;
      padding-block: 0;
      flex: 0 0 auto;
    }

    .pkt-input,
    .pkt-input-icon,
    .pkt-input-separator {
      border: 0;
    }

    .pkt-timepicker__input,
    .pkt-timepicker__separator {
      @include typography.get-text('pkt-txt-18-light');
    }

    .pkt-timepicker__input {
      padding-inline: 0;
    }

    .pkt-timepicker__separator {
      padding: 0;
    }

    button.pkt-timepicker__button {
      height: auto;
      padding: 0 0.75rem;

      pkt-icon,
      .pkt-icon,
      svg {
        width: 1.5rem;
        height: 1.5rem;
      }

      &:hover {
        background-color: inherit !important;
        border-color: inherit !important;
        svg {
          --fg-color: inherit;
        }
      }
      &.pkt-timepicker__button--prev {
        margin-inline-end: 0.25rem;
      }
      &.pkt-timepicker__button--next {
        margin-inline-start: 0.25rem;
      }
    }

    .pkt-timepicker__icon {
      align-self: center;
      pointer-events: none;
      padding: 0 0.75rem 0 0;
      height: 1.5rem;
      width: -webkit-min-content;
      width: -moz-min-content;
      width: min-content;

      > svg,
      svg {
        width: 100%;
        height: 100%;
      }
    }

    &:hover {
      border-color: var(--pkt-color-input-border-active);
    }

    &:focus-within {
      border-color: var(--pkt-color-input-border-active);
      outline: 2px solid var(--pkt-color-input-border-active);
    }

    &:has(input:disabled) {
      border-color: var(--pkt-color-input-border-disabled);
      background-color: var(--pkt-color-input-background-disabled);

      .pkt-timepicker__icon,
      .pkt-timepicker__button {
        --fg-color: var(--pkt-color-input-text-disabled);
      }
    }
  }

  &--small {
    @include timepicker-field-size(2.625rem, 'pkt-txt-16-light', 1.25rem);
  }

  &--xsmall {
    @include timepicker-field-size(2.25rem, 'pkt-txt-14-light', 1.125rem);
  }

  // Stepper variant: no left padding — the prev button takes that space
  &--stepper .pkt-input__container {
    padding-inline-start: 0;
  }

  &--fullwidth {
    width: 100%;

    .pkt-timepicker__anchor,
    .pkt-input__container {
      width: 100%;
    }
  }

  // Default / hide-picker fullwidth: button or decorative icon pushed to right
  &--fullwidth:not(.pkt-timepicker--stepper) {
    .pkt-input__container {
      .pkt-input-icon {
        margin-inline-start: auto;
      }
    }
  }

  // Stepper fullwidth: center HH:MM between prev and next buttons
  &--fullwidth.pkt-timepicker--stepper {
    .pkt-input__container {
      .pkt-timepicker__button--prev + .pkt-timepicker__input {
        margin-inline-start: auto;
      }

      .pkt-timepicker__separator + .pkt-timepicker__input {
        margin-inline-end: auto;
      }
    }
  }

  .pkt-inputwrapper--error .pkt-input__container,
  .pkt-input__container.pkt-timepicker--error {
    border-color: var(--pkt-color-brand-red-1000);

    &:hover,
    &:focus-within {
      border-color: var(--pkt-color-brand-red-1000);
    }
  }

  .pkt-inputwrapper--disabled .pkt-input__container,
  .pkt-input__container.pkt-timepicker--disabled {
    border-color: var(--pkt-color-border-states-disabled);
    background-color: var(--pkt-color-input-background-disabled);

    &:hover,
    &:focus-within {
      border-color: var(--pkt-color-border-states-disabled);
      box-shadow: none;
      outline: none;
    }

    .pkt-timepicker__icon {
      --fg-color: var(--pkt-color-input-text-disabled);
    }
  }

  &__input {
    width: 1.5rem;
    text-align: center;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    -moz-appearance: textfield;
    appearance: textfield;
  }

  &__separator {
    user-select: none;
  }

  &-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    margin-block-start: 0.5rem;
    display: flex;
    padding: 0;
    background: var(--pkt-color-background-default);
    border: 2px solid var(--pkt-color-border-gray);
    justify-content: center;

    &[hidden] {
      display: none;
    }

    &__col {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-y: auto;
      max-height: 23rem;
      padding: 0.5rem 0.6rem;
    }

    &__option {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      aspect-ratio: 1 / 1;
      border-radius: 50%;

      &,
      &:hover {
        background-color: transparent;
        color: inherit;
        border-color: transparent;
      }

      &.pkt-btn {
        --pkt-color-button-background-hover: var(--pkt-color-surface-default-pale-blue);
        --pkt-color-button-border-hover: var(--pkt-color-surface-default-pale-blue);
        --pkt-color-button-text-hover: var(--pkt-color-text-body-dark);
      }

      &:focus-visible {
        outline: 2px solid var(--pkt-color-input-border-active);
        outline-offset: -2px;
      }

      &--selected,
      &--selected:hover,
      &--selected:focus {
        background-color: var(--pkt-color-surface-strong-blue);
        color: var(--pkt-color-brand-dark-blue-1000);
      }

      &--selected.pkt-btn {
        --pkt-color-button-background-hover: var(--pkt-color-surface-strong-blue);
        --pkt-color-button-border-hover: var(--pkt-color-surface-strong-blue);
      }
    }
  }
}