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

pkt-date-tags,
pkt-datepicker-popup {
  display: block;
}

.pkt-datepicker,
pkt-datepicker {
  display: block;
  position: relative;
}

.pkt-datepicker--fullwidth {
  width: 100%;
}

.pkt-datepicker__tags {
  button.pkt-tag {
    margin: 0 0.25rem 0.5rem 0;
  }
}

.pkt-datepicker-single,
.pkt-datepicker-range,
.pkt-datepicker-multiple,
pkt-datepicker-single,
pkt-datepicker-range,
pkt-datepicker-multiple {
  display: block;
}

.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)):not(:has(.pkt-datepicker--multiple)) {
  width: fit-content;

  &:not(:has(.pkt-datepicker--range)) {
    max-width: 100%;
  }
}

.pkt-datepicker__inputs {
  width: 100%;
  position: relative;
  .pkt-input__container {
    border: 2px solid var(--pkt-color-input-border-normal);
    background-color: var(--pkt-color-input-background-normal);
    align-items: stretch;
    .pkt-input,
    .pkt-input-prefix,
    .pkt-input-suffix,
    .pkt-input-icon,
    .pkt-input-separator {
      border: 0;
      height: auto;
      min-height: 2.75rem;
      padding-block: 0;
    }

    .pkt-input-prefix::after {
      height: 1.75rem;
    }

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

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

    &:has(input:disabled),
    &:has(input[readonly]:not(.ios-readonly-hack)) {
      border-color: var(--pkt-color-input-border-disabled);
      --fg-color: var(--pkt-color-input-text-disabled);
    }

    &:has(.pkt-input--counter-error) {
      border-color: var(--pkt-color-input-border-error);
    }

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

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

    .pkt-inputwrapper--disabled & {
      border-color: var(--pkt-color-border-states-disabled);

      &:hover,
      &:focus-within {
        border-color: var(--pkt-color-border-states-disabled);
        box-shadow: none;
        outline: none;
      }
    }
  }
  button.pkt-input-icon {
    padding-inline: 0.5rem 0.75rem;
    &:hover {
      background-color: inherit !important;
      border-color: inherit !important;
      --fg-color: var(--pkt-color-button-text-hover);
    }
  }
  .pkt-datepicker__input {
    padding-inline-end: 0;
    background-image: none;
  }
  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }
  .pkt-datepicker__input.pkt-datepicker--range {
    flex-shrink: 0;
  }
  .pkt-datepicker__input:not([type='date']):not(.pkt-datepicker--multiple) {
    width: 8.3rem;
  }
  .pkt-input-separator {
    padding-inline: 0.2em;
  }
  .pkt-input-separator ~ .pkt-datepicker--range {
    padding-inline-start: 0;
  }
}
.pkt-calendar-popup {
  top: 100%;
  left: 0;
  z-index: 2;
  margin-block-start: 0.5rem;
  padding: 0.5rem;
  position: absolute;
  width: max-content;
  background: var(--pkt-color-background-default);
  border: 2px solid var(--pkt-color-border-gray);
}
.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
  flex: 1;
}

.pkt-input__container:has(.pkt-datepicker--range.pkt-input--fullwidth) button.pkt-input-icon {
  margin-inline-start: auto;
}
.pkt-datepicker__input::-webkit-inner-spin-button,
.pkt-datepicker__input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.pkt-datepicker__input::-webkit-datetime-edit {
  max-width: max-content;
  position: relative;
  top: -2px;
}

.pkt-datepicker__input::-webkit-date-and-time-value {
  min-width: 5.5em;
}

.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple {
  flex: 1;
  min-width: 0;
}

@mixin datepicker-field-size($segment-min-height, $text-style, $icon-size, $text-input-width, $divider-height) {
  .pkt-datepicker__inputs {
    .pkt-input,
    .pkt-input-prefix,
    .pkt-input-suffix,
    .pkt-input-icon,
    .pkt-input-separator {
      min-height: $segment-min-height;
    }

    .pkt-datepicker__input,
    .pkt-input-prefix,
    .pkt-input-separator {
      @include typography.get-text($text-style);
    }

    .pkt-input-prefix::after {
      height: $divider-height;
    }

    button.pkt-input-icon {
      padding-inline-end: 0.5rem;

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

    .pkt-datepicker__input:not([type='date']):not(.pkt-datepicker--multiple) {
      width: $text-input-width;
    }
  }
}

.pkt-datepicker--small {
  @include datepicker-field-size(2.375rem, 'pkt-txt-16-light', 1.25rem, 7.3rem, 1.5rem);
}

.pkt-datepicker--xsmall {
  @include datepicker-field-size(2rem, 'pkt-txt-14-light', 1.125rem, 6.5rem, 1.375rem);
}

@supports (-moz-appearance: none) {
  .pkt-datepicker__inputs {
    .pkt-datepicker__input {
      padding-inline-end: 0.5rem;
    }
    .pkt-input__container:has(.pkt-datepicker__input[type='date']) button.pkt-input-icon {
      display: none;
    }
    input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
      border-right-width: 2px !important;
    }

    @media screen and (max-width: 30rem) {
      .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range {
        justify-self: start;
      }
    }
  }
}