/* inputwrapper */
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/functions';
@use '../abstracts/mixins/typography';

pkt-helptext {
  display: block;
}

pkt-radio-group,
pkt-checkbox-group {
  display: block;
}

pkt-input-wrapper {
  display: block;

  &[inline] {
    display: inline-block;
  }
}
@supports selector(:not(:has(*))) {
  // Skjul helptext-container hvis den ikke har innhold.
  // Ganske avansert, men det påvirker ikke helptext-containere
  // med pkt-inputwrapper__has-helptext, så legg til den klassen
  // hvis du vet sikkert at helptext har innhold.
  pkt-helptext:not(:has(.pkt-inputwrapper__has-helptext)),
  .pkt-inputwrapper__helptext-container:not(.pkt-inputwrapper__has-helptext) {
    &:not(
      :has([slot='helptext']:not(:empty)),
      :has(.pkt-inputwrapper__helptext-expandable .pkt-inputwrapper__helptext:not(:empty))
    ) {
      display: none;
    }
  }
}
.pkt-inputwrapper {
  display: block;

  &__label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: map.get(variables.$spacing, 'size-8');
    color: var(--pkt-color-text-body-default);

    &:empty {
      display: none;
    }
  }

  &__label,
  &__legend {
    @include typography.get-text('pkt-txt-18-medium');
  }

  &__helptext-container {
    display: flex;
    flex-direction: column;
    gap: map.get(variables.$spacing, 'size-8');
  }
  &__helptext {
    width: min(100%, 31rem);
    color: var(--pkt-color-text-body-default);
    @include typography.get-text('pkt-txt-14-light');

    > .pkt-btn,
    &-expandable .pkt-btn {
      padding: 0;
      min-height: 0;
      display: inline-flex;
      text-align: left;
      align-items: center;
      @include typography.get-text('pkt-txt-14-light');
    }

    > * {
      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    &-expandable {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: map.get(variables.$spacing, 'size-4');

      &-heading {
        margin: 0;
        @include typography.get-text('pkt-txt-18-medium');
      }

      &-open {
        display: block;
        border-left: 2px solid var(--pkt-color-text-body-dark);
        padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
      }

      &-closed {
        display: none;
      }
    }
  }

  &__fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: map.get(variables.$spacing, 'size-8');

    border: none;
    padding: 0;
    margin: 0;
  }

  &__legend {
    margin-bottom: 0.5rem;
  }

  &__options {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--pkt-inputwrapper-options-gap, #{map.get(variables.$spacing, 'size-16')});

    &--horizontal {
      flex-flow: row wrap;
    }
  }

  &--medium {
    --pkt-inputwrapper-options-gap: #{map.get(variables.$spacing, 'size-16')};
  }

  &--disabled {
    color: var(--pkt-color-text-action-disabled);
    cursor: inherit;

    .pkt-tag {
      background-color: var(--pkt-color-surface-default-gray);
    }

    .pkt-alert {
      background-color: var(--pkt-color-surface-default-gray);
      border-color: var(--pkt-color-text-action-disabled);
      color: var(--pkt-color-text-action-disabled);
      .pkt-alert__icon {
        --fg-color: var(--pkt-color-text-action-disabled);
      }
    }

    .pkt-alert,
    .pkt-inputwrapper__label,
    .pkt-inputwrapper__helptext,
    .pkt-inputwrapper__helptext-expandable .pkt-link {
      color: var(--pkt-color-text-action-disabled);
    }
  }

  &--inline {
    display: inline-block;
    width: fit-content;
    vertical-align: middle;
    margin-inline-end: 8px;
  }

  .pkt-alert {
    width: min(100%, 31rem);
    margin: 0 0 0.5rem 0;
  }

  &__alert-wrapper {
    align-self: stretch;
    max-width: min(100%, 31rem);

    .pkt-alert {
      width: 100%;
      margin: 0;
    }
  }

  &:has(.pkt-input--fullwidth) &__alert-wrapper {
    max-width: none;
  }

  &__fieldset > .pkt-alert {
    align-self: stretch;
    width: auto;
    max-width: min(100%, 31rem);
  }

  .pkt-tag {
    margin-left: 8px;
  }

  &--error {
    .pkt-input,
    .pkt-input-prefix,
    .pkt-input-suffix,
    .pkt-input-icon {
      border-color: var(--pkt-color-brand-red-1000);
    }

    .pkt-input:hover,
    .pkt-input__container:hover,
    .pkt-input__container:hover .pkt-input,
    .pkt-input__container:hover .pkt-input-prefix,
    .pkt-input__container:hover .pkt-input-suffix,
    .pkt-input__container:hover .pkt-input-icon {
      border-color: var(--pkt-color-brand-red-1000);
    }

    .pkt-input:focus-within,
    .pkt-input__container:focus-within .pkt-input,
    .pkt-input__container:focus-within .pkt-input-prefix,
    .pkt-input__container:focus-within .pkt-input-suffix,
    .pkt-input__container:focus-within .pkt-input-icon {
      border-color: var(--pkt-color-brand-red-1000);
    }
  }

  &--disabled {
    color: var(--pkt-color-text-action-disabled);
    cursor: inherit;

    .pkt-input,
    .pkt-input-prefix,
    .pkt-input-suffix,
    .pkt-input-icon {
      border-color: var(--pkt-color-input-border-disabled);
      background-color: var(--pkt-color-input-background-disabled);
      color: var(--pkt-color-input-text-disabled);
      --fg-color: var(--pkt-color-input-text-disabled);
    }

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

    .pkt-input:hover {
      border-color: var(--pkt-color-border-states-disabled);
      box-shadow: none;
    }

    .pkt-input:focus {
      border-color: var(--pkt-color-border-states-disabled);
      box-shadow: none;
      outline: none;
    }

    .pkt-input__container:active .pkt-input {
      border-right: none;
      box-shadow: none;
      outline: none;
    }
  }

  // medium = base styles above; only compact sizes get modifier classes
  &--small,
  &--xsmall {
    .pkt-inputwrapper__helptext-container {
      gap: map.get(variables.$spacing, 'size-4');
    }

    .pkt-inputwrapper__helptext,
    .pkt-inputwrapper__helptext > .pkt-btn,
    .pkt-inputwrapper__helptext-expandable .pkt-btn {
      @include typography.get-text('pkt-txt-12-light');
    }

    .pkt-inputwrapper__helptext-expandable-heading {
      @include typography.get-text('pkt-txt-16-medium');
    }

    .pkt-inputwrapper__fieldset {
      gap: map.get(variables.$spacing, 'size-4');
    }
  }

  &--small {
    --pkt-inputwrapper-options-gap: #{map.get(variables.$spacing, 'size-12')};

    .pkt-inputwrapper__label,
    .pkt-inputwrapper__legend {
      @include typography.get-text('pkt-txt-16-medium');
    }
  }

  // xsmall: wrapper chrome only — field scale lives on .pkt-input--xsmall / .pkt-combobox__input--xsmall
  &--xsmall {
    --pkt-inputwrapper-options-gap: #{map.get(variables.$spacing, 'size-8')};

    .pkt-inputwrapper__label,
    .pkt-inputwrapper__legend {
      @include typography.get-text('pkt-txt-14-medium');
    }
  }
}

[data-mode='dark'] .pkt-inputwrapper {
  color: functions.color-token('text-body-light');
}