/* Common styles for all inputs */
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/functions';
@use '../abstracts/mixins/typography';

pkt-textinput,
pkt-textarea,
pkt-select {
  display: block;
}

.pkt-textinput,
.pkt-textarea,
.pkt-select {
  display: block;

  &:has(> .pkt-inputwrapper--inline) {
    display: inline-block;
    width: fit-content;
  }
}

:where(
  .pkt-textinput:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols])),
  .pkt-select:has(.pkt-input:not(.pkt-input--fullwidth):not([size]):not([cols]))
) {
  width: min(31rem, 100%);
}

.pkt-textinput:has(.pkt-input--fullwidth),
.pkt-select:has(.pkt-input--fullwidth) {
  width: 100%;
}

.pkt-input {
  display: flex;
  align-items: center;
  appearance: none; // Fix appearance on date inputs in Safari
  background-color: var(--pkt-color-input-background-normal);
  border: 2px solid var(--pkt-color-input-border-normal);
  border-radius: 0;
  color: var(--pkt-color-input-text-normal);
  margin: 0;
  padding: 0.5rem 1rem;
  min-height: 3rem;

  @include typography.get-text('pkt-txt-18-light');

  &--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
    min-height: 2.625rem;
    padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16');
    @include typography.get-text('pkt-txt-16-light');

    &:not(select[multiple]) {
      height: 2.625rem;
    }
  }

  &--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
    min-height: 2.25rem;
    padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12');
    @include typography.get-text('pkt-txt-14-light');

    &:not(select[multiple]) {
      height: 2.25rem;
    }
  }

  // Native inputs should not use flex layout (breaks composite prefix/suffix rows)
  input.pkt-input,
  select.pkt-input {
    display: block;
  }

  &-compact#{&} {
    border: 0;
    border-bottom: 1px solid var(--pkt-color-input-border-normal);
    padding: 0 0 0.1rem 0;
    @include typography.get-text('pkt-txt-16-light');
    &:is(select):not([multiple]) {
      --pkt-select-chevron-offset: 0rem;
      padding-right: 2rem;
    }
  }

  &__container {
    width: min(31rem, 100%);
  }

  & {
    width: min(31rem, 100%);
  }

  &:where([size], [cols]) {
    width: auto;
  }

  &__container:where(:has(> :is(input[size], textarea[cols]))) {
    width: fit-content;
    align-self: flex-start;
  }

  &--fullwidth {
    &,
    *:has(&) ~ .pkt-input__counter,
    & + .pkt-input__counter {
      width: 100%;
    }
  }

  &:is(textarea:not([rows])) {
    min-height: 9.25rem; // 148px
  }

  &:is(select) {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-right: 3rem;

    &:not([multiple]) {
      $size: var(--pkt-select-chevron-size);
      $offset: var(--pkt-select-chevron-offset, 0.7rem);
      $center: calc(#{$size} * 0.02572);
      $half-stroke: calc(#{$size} * 0.029);
      $color: var(--pkt-select-chevron-color, currentColor);
      $shift: var(--pkt-select-chevron-shift, 0rem);
      $stroke:
        transparent calc(50% + #{$center} - #{$half-stroke} - 0.35px),
        #{$color} calc(50% + #{$center} - #{$half-stroke} + 0.35px),
        #{$color} calc(50% + #{$center} + #{$half-stroke} - 0.35px),
        transparent calc(50% + #{$center} + #{$half-stroke} + 0.35px);
      --pkt-select-chevron-size: 1.5rem;
      background-image: linear-gradient(44.23deg, $stroke), linear-gradient(-44.23deg, $stroke);
      background-repeat: no-repeat;
      background-size: calc(#{$size} * 0.34375) calc(#{$size} * 0.40625);
      background-position:
        right calc(#{$offset} + #{$size} * 0.5 - 0.25px) top calc(50% + #{$size} * 0.015625 + #{$shift}),
        right calc(#{$offset} + #{$size} * 0.15625 + 0.25px) top calc(50% + #{$size} * 0.015625 + #{$shift});
      transition: background-position 0.1s ease-in-out;

      &:hover:not(:disabled) {
        --pkt-select-chevron-shift: 0.25rem;
        --pkt-select-chevron-color: var(--pkt-color-input-text-hover);
      }

      // Nestet her for å vinne over @extend-utvidede baseselektorer (f.eks. .pkt-select select)
      &.pkt-input--small {
        --pkt-select-chevron-size: 1.25rem;
        --pkt-select-chevron-offset: 0.5rem;
        padding: map.get(variables.$spacing, 'size-6') 2.5rem map.get(variables.$spacing, 'size-6')
          map.get(variables.$spacing, 'size-16');
      }

      &.pkt-input--xsmall {
        --pkt-select-chevron-size: 1.125rem;
        --pkt-select-chevron-offset: 0.5rem;
        padding: map.get(variables.$spacing, 'size-4') 2.25rem map.get(variables.$spacing, 'size-4')
          map.get(variables.$spacing, 'size-12');
      }
    }

    option {
      background-color: var(--pkt-color-input-background-normal);
      color: var(--pkt-color-input-text-normal);
      font-weight: normal;
    }
  }

  // 1. Override Firefox's default opacity
  &::placeholder {
    color: var(--pkt-color-text-placeholder);
    opacity: 1; // 1
  }

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

  // Rekkefølge er viktig
  &:focus {
    outline: none;
    border-color: var(--pkt-color-input-border-active);
  }

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

  :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype='pointer']) &:focus-visible {
    outline: 4px solid var(--pkt-color-border-states-focus);
    outline-offset: 0;
  }

  &:disabled,
  &:disabled::placeholder,
  &[readonly]:not(.ios-readonly-hack) {
    opacity: 1;
    background-color: var(--pkt-color-input-background-disabled);
    border-color: var(--pkt-color-input-border-disabled);
    color: var(--pkt-color-input-text-disabled);
    cursor: inherit;
  }

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

  &-prefix,
  &-suffix,
  &-icon,
  &-separator {
    @include typography.get-text('pkt-txt-18-light');
    & {
      display: flex;
      align-items: center;
      width: auto;
      height: 3rem;
      border: 2px solid var(--pkt-color-input-border-normal);
      flex-shrink: 0;
      color: var(--pkt-color-input-text-normal);
      --fg-color: var(--pkt-color-input-text-normal);
      background-color: var(--pkt-color-input-background-normal);
    }
  }

  &-prefix {
    padding: 0.5rem 0rem 0.5rem 1rem;

    &::after {
      content: '';
      width: 1px;
      margin-left: 0.5rem;
      height: 100%;
      background-color: currentColor;
    }
  }

  &-suffix {
    padding: 0.5rem 1rem 0.5rem 0rem;

    svg {
      width: 1.5rem;
      height: 1.5rem;
      margin-left: 0.5rem;
    }

    &::before {
      content: '';
      width: 1px;
      margin-right: 0.5rem;
      height: 1.5rem;
      background-color: currentColor;
    }
  }

  &-icon {
    padding: 0.5rem 1rem;
    align-self: stretch;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
    }

    &:not(button) svg {
      margin-left: 0.5rem;
    }
  }

  &-separator {
    padding: 0.5rem 0;
  }

  // Composite fields (prefix / suffix): size the row as one unit — do not fix height on each child
  &__container--small {
    align-items: stretch;

    .pkt-input-prefix,
    .pkt-input-suffix,
    .pkt-input-icon {
      height: auto;
      min-height: 2.625rem;
      @include typography.get-text('pkt-txt-16-light');
    }

    .pkt-input-prefix {
      padding: map.get(variables.$spacing, 'size-6') 0 map.get(variables.$spacing, 'size-6')
        map.get(variables.$spacing, 'size-16');
    }

    .pkt-input-suffix {
      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16')
        map.get(variables.$spacing, 'size-6') 0;
    }

    input.pkt-input,
    select.pkt-input {
      height: auto;
      min-height: 2.625rem;
      flex: 1 1 auto;
      min-width: 0;
      padding: map.get(variables.$spacing, 'size-6') map.get(variables.$spacing, 'size-16');
      @include typography.get-text('pkt-txt-16-light');
    }

    .pkt-input-icon svg,
    .pkt-input-suffix svg {
      width: 1.25rem;
      height: 1.25rem;
    }

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

    .pkt-input-suffix::before {
      height: 1.25rem;
    }
  }

  &__container--xsmall {
    align-items: stretch;

    .pkt-input-prefix,
    .pkt-input-suffix,
    .pkt-input-icon {
      height: auto;
      min-height: 2.25rem;
      @include typography.get-text('pkt-txt-14-light');
    }

    .pkt-input-prefix {
      padding: map.get(variables.$spacing, 'size-4') 0 map.get(variables.$spacing, 'size-4')
        map.get(variables.$spacing, 'size-12');
    }

    .pkt-input-suffix {
      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12')
        map.get(variables.$spacing, 'size-4') 0;
    }

    input.pkt-input,
    select.pkt-input {
      height: auto;
      min-height: 2.25rem;
      flex: 1 1 auto;
      min-width: 0;
      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-12');
      @include typography.get-text('pkt-txt-14-light');
    }

    .pkt-input-icon {
      padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
    }

    .pkt-input-icon svg,
    .pkt-input-suffix svg {
      width: 1.125rem;
      height: 1.125rem;
    }

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

    .pkt-input-suffix::before {
      height: 1.125rem;
    }
  }

  &--counter-error,
  &--counter-error:focus {
    border-color: var(--pkt-color-input-border-error);
    background-color: var(--pkt-color-surface-default-faded-red);
  }

  &--counter-error:focus {
    box-shadow: 0 0 0 2px var(--pkt-color-input-border-error);
  }

  &__container {
    display: flex;
    align-items: center;
    align-self: stretch;

    :first-child:not(:only-child) {
      border-right-width: 0;
    }

    :last-child:not(:only-child) {
      border-left-width: 0;
    }

    :not(:first-child):not(:last-child) {
      border-left-width: 0;
      border-right-width: 0;
    }

    p {
      margin: 0;
    }

    & input:focus {
      outline: none;
      box-shadow: none;
    }

    &:not(:has(.pkt-input:disabled)) {
      &:hover .pkt-input,
      &:hover .pkt-input-prefix,
      &:hover .pkt-input-suffix,
      &:hover .pkt-input-icon {
        &:not(:disabled) {
          border-color: var(--pkt-color-input-border-active);
          color: var(--pkt-color-input-text-hover);
          --fg-color: var(--pkt-color-input-text-hover);
        }
      }
    }

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

      .pkt-input,
      .pkt-input-prefix,
      .pkt-input-suffix,
      .pkt-input-icon {
        border-color: var(--pkt-color-input-border-active);
      }
    }

    :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype='pointer']) &:focus-within {
      outline: 4px solid var(--pkt-color-border-states-focus);

      .pkt-input:focus-visible {
        outline: none;
      }
    }
  }

  &__counter {
    @include typography.get-text('pkt-txt-14-light');

    & {
      width: min(31rem, 100%);
      text-align: right;
    }

    &--error {
      @include typography.get-text('pkt-txt-14-medium');

      & {
        color: var(--pkt-color-input-text-error);
      }
    }
  }
}
@media screen and (max-width: 30rem) {
  .pkt-input__range-inputs {
    max-width: 100%;
    .pkt-input__container {
      border: 2px solid var(--pkt-color-input-border-normal);
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: auto 3rem;
      gap: 0;
      .pkt-input-prefix,
      .pkt-input-suffix,
      .pkt-input-icon,
      .pkt-input {
        border: 0;
      }
      .pkt-input-separator {
        margin: 0 auto;
      }
      .pkt-input.pkt-datepicker__input.pkt-datepicker--range {
        padding-left: 1rem;
      }
    }
    .pkt-input__container:has(> :first-child.pkt-input-prefix) {
      > :nth-child(2) {
        grid-column-start: span 2;
      }
      grid-template-columns: min-content auto 3rem;
    }
  }
}

.pkt-input__container:where(:has(> .pkt-input--fullwidth)) {
  width: 100%;
}