@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/typography';
@use '@mezzanine-ui/system/spacing';
@use '../text-field';
@use './picker' as *;

.#{$prefix} {
  display: inline-flex;
  align-items: center;

  &--date {
    min-width: spacing.semantic-variable(size, container, snug);
  }

  &--datetime {
    min-width: spacing.semantic-variable(size, container, slim);
  }

  &--range {
    min-width: spacing.semantic-variable(size, container, slender);
  }

  &--range-year {
    min-width: spacing.semantic-variable(size, container, tight);
  }

  &--range-slim {
    min-width: spacing.semantic-variable(size, container, slim);
  }

  &__arrow-icon {
    display: flex;
    align-items: center;
    color: palette.semantic-variable(icon, neutral-light);
  }

  &__input-mono {
    padding: 0;

    @include typography.semantic-variable(input-mono);
  }

  &__formatted-input {
    width: 100%;
    display: flex;
    position: relative;

    @include typography.semantic-variable(input-mono);

    color: transparent;
  }

  &__formatted-input-hidden {
    caret-color: palette.semantic-variable(text, neutral-solid);
    pointer-events: auto;

    &::placeholder {
      color: palette.semantic-variable(text, neutral-faint);

      // Blurred state: placeholder shows human-readable text (e.g. "輸入日期") → use input typography
      @include typography.semantic-variable(input);
    }

    &:focus::placeholder {
      // Focused state: placeholder shows format template (e.g. "YYYY-MM-DD") → use input-mono typography
      @include typography.semantic-variable(input-mono);
    }
  }

  &__formatted-input-display {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-color: transparent;
  }

  &__formatted-input-segment {
    white-space: pre;

    @include typography.semantic-variable(input-mono);

    color: palette.semantic-variable(text, neutral-faint);

    &--filled {
      color: palette.semantic-variable(text, neutral-solid);
    }

    &--filling {
      color: palette.semantic-variable(text, brand);
    }

    &--disabled {
      color: palette.semantic-variable(text, neutral-light);
    }
  }

  &__separator-inputs {
    display: flex;
    align-items: center;
    gap: spacing.semantic-variable(gap, base);
    flex: 1;
  }

  &__separator-input {
    flex: 1;

    .#{$prefix}__formatted-input > input {
      width: 100%;
    }
  }

  &__separator {
    width: 1px;
    height: spacing.semantic-variable(size, element, base);
    background-color: palette.semantic-variable(separator, neutral-light);
    flex-shrink: 0;
  }
}