@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;
@use './form.scss' as form;

$classname: '#{utils.$prefix}-input-field';
// Color variables
$color-background: tokens.$color-neutral-white;
$color-default-grey: tokens.$color-neutral-grey-600;
$color-hover-grey: tokens.$color-neutral-grey-700;
$color-active-grey: tokens.$color-neutral-grey-800;
$color-interaction: tokens.$color-interface-interaction;
$color-disabled-grey: tokens.$color-neutral-grey-500;
// Size variables
$min-width: calc(#{tokens.$spacing-base-8} * 10);
$height-medium: tokens.$spacing-base-12;
$height-large: tokens.$spacing-base-14;
$size-icon-medium: tokens.$spacing-base-5;
$size-icon-large: tokens.$spacing-base-6;
// Padding sizes
$padding-icon-medium: tokens.$spacing-base-3;
$padding-icon-large: tokens.$spacing-base-4;
$padding-placeholder-horizontal-medium: tokens.$spacing-base-4;
$padding-placeholder-horizontal-large: tokens.$spacing-base-5;
$padding-placeholder-horizontal-icon-medium: calc(
  #{$size-icon-medium} + #{$padding-icon-medium} * 2
);
$padding-placeholder-horizontal-icon-large: calc(
  #{$size-icon-large} + #{$padding-icon-large} * 2
);

.#{$classname} {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;

  // Size medium
  max-width: utils.$component-max-width;
  height: $height-medium;

  // Elements
  &__input {
    margin: 0;
    width: 100%;
    height: 100%;

    @include typography.text-body-300();

    background-color: $color-background;
    color: tokens.$color-text-background-light;
    padding: 0 $padding-placeholder-horizontal-medium;

    box-sizing: border-box;
    border-radius: tokens.$border-radius-x-small;
    border: tokens.$border-width-thin solid $color-default-grey;

    transition: all tokens.$duration-normal;
    transition-property: border, box-shadow;

    &::placeholder {
      color: $color-default-grey;
    }

    &:focus {
      outline: none;
      border-color: $color-interaction;
      box-shadow: inset 0 0 0 tokens.$border-width-thin $color-interaction;
    }
  }

  & ~ .#{form.$field-label-classname} {
    cursor: text;
    width: fit-content;
  }

  &__icon-left,
  &__icon-right {
    pointer-events: none;
    position: absolute;
  }
  & svg {
    display: block;
    flex-shrink: 0;
    flex-grow: 0;

    // Size medium
    width: $size-icon-medium;
    height: $size-icon-medium;

    fill: $color-default-grey;
    transition: all tokens.$duration-normal;
  }
  &__icon-left {
    left: $padding-icon-medium;
  }
  &__icon-right {
    right: $padding-icon-medium;
  }

  // Set extra padding when icon is used
  &--icon-left > &__input {
    padding-left: $padding-placeholder-horizontal-icon-medium;
  }
  &--error &__input,
  &--icon-right > &__input {
    padding-right: $padding-placeholder-horizontal-icon-medium;
  }

  // State modifiers of non-disabled states
  &:not([class*='#{$classname}--disabled']) > input.#{$classname}__input {
    &:hover {
      cursor: text;
      border-color: $color-interaction;
      & ~ .#{$classname}__icon-left svg,
      & ~ .#{$classname}__icon-right svg {
        fill: $color-hover-grey;
      }
    }
    &:focus {
      & ~ .#{$classname}__icon-left svg,
      & ~ .#{$classname}__icon-right svg {
        fill: $color-active-grey;
      }
      &::placeholder {
        opacity: 0;
      }
    }
  }

  &--disabled {
    & svg {
      fill: $color-disabled-grey;
    }
    & ~ .#{form.$field-label-classname} {
      cursor: not-allowed;
      color: $color-disabled-grey;
    }
    & > input.#{$classname}__input {
      cursor: not-allowed;
      color: $color-disabled-grey;
      &:not(:focus) {
        border-color: $color-disabled-grey;
      }
      &::placeholder {
        color: $color-disabled-grey;
      }
    }
  }

  &--error {
    &:not([class*='#{$classname}--disabled'])
      .#{$classname}__input:not(:hover):not(:focus) {
      border-color: tokens.$color-interface-error;
      box-shadow: inset 0 0 0 tokens.$border-width-thin
        tokens.$color-interface-error;
    }
    // Error icon
    &::after {
      pointer-events: none;
      position: absolute;
      content: '';
      background-color: tokens.$color-neutral-white;
      background-image: utils.$icon-url-error;
      background-repeat: no-repeat;

      background-size: $size-icon-medium, $size-icon-medium;
      width: $size-icon-medium;
      height: $size-icon-medium;
      right: $padding-icon-medium;
    }
  }

  // Size modifiers
  &--large {
    height: $height-large;

    & .#{$classname}__input {
      @include typography.text-body-400();
      padding: 0 $padding-placeholder-horizontal-large;
    }
    // Set icon size
    &::after,
    & svg {
      width: $size-icon-large;
      height: $size-icon-large;
    }
    &::after {
      background-size: $size-icon-large, $size-icon-large;
    }
    // Set icon padding
    & .#{$classname}__icon-left {
      left: $padding-icon-large;
    }
    &::after,
    & .#{$classname}__icon-right {
      right: $padding-icon-large;
    }
    // Set input field padding to large icon
    &.#{$classname}--icon-left .#{$classname}__input {
      padding-left: $padding-placeholder-horizontal-icon-large;
    }
    &.#{$classname}--error .#{$classname}__input,
    &.#{$classname}--icon-right .#{$classname}__input {
      padding-right: $padding-placeholder-horizontal-icon-large;
    }
  }
}