@use 'Foundation/scss/input-chains.odeditor-dark' as chains;

$border-radius-medium: var(
  --wds-input-border-radius-default-medium,
  var(--wds-border-radius-400, 6px)
);
$border-radius-large: var(
  --wds-input-border-radius-default-large,
  var(--wds-border-radius-400, 6px)
);
$border-color: var(--wds-input-border-color, var(--wds-color-black-100-transparent-0, #d6e6fe));
$border-color-hover: var(--wds-input-border-color-hover, var(--wds-color-border-standard-primary, #d6e6fe));
$border-color-focus: var(--wds-input-border-color-focus, var(--wds-color-border-standard-primary-active, #116dff));
$background-fill-default: var(--wds-input-background-fill-default, var(--wds-color-black-700, #ffffff)) !default;
$background-fill-hover: var(--wds-input-background-fill-hover, var(--wds-color-black-700, #e7f0ff)) !default;
$shadow-fill: var(--wds-color-white-transparent-20, transparent) !default;
$background-fill-disabled: var(--wds-input-background-fill-disabled, var(--wds-color-black-700, #ffffff));
$border-color-disabled: var(--wds-input-border-color-disabled, var(--wds-color-black-700, #d6e6fe));

.input {
  border-color: $border-color;
  background-color: var(--wds-internal-input-background, #{$background-fill-default});
  border-radius: $border-radius-medium;

  &:-webkit-autofill {
    border-radius: $border-radius-medium;
  }

  &--size-tiny {
    height: var(--wds-input-size-tiny, var(--wds-space-600, 23px));
  }

  &--size-tiny > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-tiny, var(--wds-space-150, 6px));
  }

  &--size-tiny > &__wrapper > &__input {
    padding: var(--wds-input-padding-vertical-tiny, var(--wds-space-100, 3px)) var(--wds-space-50, 3px);
  }

  &--size-small {
    height: #{chains.$input-size-small};
    font-size: #{chains.$input-value-font-size-small};
  }

  &--size-small > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-small, var(--wds-space-200, 6px)) 0
      var(--wds-input-padding-horizontal-small, var(--wds-space-200, 6px));
  }

  &--size-small > &__wrapper > &__input {
    font-size: #{chains.$input-value-font-size-small};
    padding: var(--wds-input-padding-vertical-small, var(--wds-space-150, 5px))
      var(--wds-space-50, 3px) var(--wds-input-padding-vertical-small, var(--wds-space-150, 5px))
      var(--wds-space-100, 6px);
  }

  &--size-small > &__wrapper > &__input:-webkit-autofill::first-line {
    font-size: #{chains.$input-value-font-size-small};
  }

  &--size-medium {
    height: #{chains.$input-size-medium};
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
  }

  &--size-medium > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-medium, var(--wds-space-200, 6px)) 0
      var(--wds-input-padding-horizontal-medium, var(--wds-space-200, 6px));
  }

  &--size-medium > &__wrapper > &__input {
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
    padding: var(--wds-input-padding-vertical-medium, var(--wds-space-175, 5px))
      var(--wds-space-50, 3px) var(--wds-input-padding-vertical-medium, var(--wds-space-175, 5px))
      var(--wds-space-100, 6px);
  }

  &--size-medium > &__wrapper > &__input:-webkit-autofill::first-line {
    font-size: #{chains.$input-value-font-size-medium};
    line-height: #{chains.$input-value-font-line-height-medium};
  }

  &--size-large {
    height: #{chains.$input-size-large};
    font-size: #{chains.$input-value-font-size-large};
    line-height: #{chains.$input-value-font-line-height-large};
  }

  &--size-large > &__wrapper {
    padding: 0 var(--wds-input-padding-horizontal-large, var(--wds-space-300, 9px)) 0
      var(--wds-input-padding-horizontal-large, var(--wds-space-300, 9px));
  }

  &--size-large > &__wrapper > &__input {
    font-size: #{chains.$input-value-font-size-large};
    line-height: #{chains.$input-value-font-line-height-large};
    padding: var(--wds-input-padding-vertical-large, var(--wds-space-300, 8px))
      var(--wds-space-50, 3px) var(--wds-input-padding-vertical-large, var(--wds-space-300, 8px))
      var(--wds-space-100, 6px);
  }

  &--size-large > &__wrapper > &__input:-webkit-autofill::first-line {
    font-size: #{chains.$input-value-font-size-large};
    line-height: #{chains.$input-value-font-line-height-large};
  }

  &--has-focus#{&}--border-standard,
  &--has-focus#{&}--border-round {
    border-color: $border-color-focus;
  }

  &#{&}#{&}--force-hover#{&}--border-standard,
  &#{&}#{&}--force-hover#{&}--border-round {
    background-color: var(--wds-internal-input-background, #{$background-fill-hover});
  }

  &--force-hover {
    border-color: $border-color-hover;
  }

  @media (hover: hover) {
    &:hover:not(&--has-focus):not(&--disabled):not(&--read-only)#{&}--border-standard,
    &:hover:not(&--has-focus):not(&--disabled):not(&--read-only)#{&}--border-round {
      background-color: var(--wds-internal-input-background, #{$background-fill-hover});
    }

    &:hover:not(&--read-only) {
      border-color: $border-color-hover;
    }

    &:hover#{&}--read-only:not(&--disabled):not(&--status-error):not(&--status-warning):not(&--border-bottom-line) {
      border-color: $border-color;
    }
  }

  &--read-only {
    border-color: $border-color;
    background-color: var(--wds-internal-input-background, #{$background-fill-default});
  }

  &--size-medium#{&}--border-standard {
    border-radius: $border-radius-medium;

    &:-webkit-autofill {
      border-radius: $border-radius-medium;
    }
  }

  &--size-large#{&}--border-standard {
    border-radius: $border-radius-large;

    &:-webkit-autofill {
      border-radius: $border-radius-large;
    }
  }

  &#{&}--disabled:not(#{&}--border-bottom-line) {
    border-color: $border-color-disabled;
    background-color: $background-fill-disabled;
  }

  &#{&}--disabled#{&}--border-bottom-line {
    border-bottom-color: $border-color-disabled;
  }

  &__input:-webkit-autofill,
  &__input:-webkit-autofill:focus {
    box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-default}) inset;
    -webkit-box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-default}) inset;
  }

  @media (hover: hover) {
    &:hover:not(&--has-focus):not(&--disabled) &__input:-webkit-autofill:hover,
    &--force-hover &__input:-webkit-autofill:hover {
      box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-hover}) inset;
      -webkit-box-shadow: 0 0 0px 1000px var(--wds-internal-input-background, #{$background-fill-hover}) inset;
    }
  }

  &::after {
    box-shadow: var(--wds-shadow-x-input, var(--wds-shadow-x-25, 0)) var(--wds-shadow-y-input, var(--wds-shadow-y-25, 0))
      var(--wds-shadow-blur-input, var(--wds-shadow-blur-35, 0)) 0px
      var(--wds-shadow-fill-input, #{$shadow-fill}) inset;
  }

  &__menu-arrow svg {
    color: var(--wds-dropdown-icon-fill, var(--wds-color-text-standard-secondary, var(--wsr-color-D10, #000624)));
  }

  &--border-standard#{&}--no-left-border-radius,
  &--border-round#{&}--no-left-border-radius {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  &--border-standard#{&}--no-right-border-radius,
  &--border-round#{&}--no-right-border-radius {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  &--border-bottom-line {
    border-radius: 0;
    background-color: transparent;
    border-color: transparent;

    &::after {
      box-shadow: none;
    }
  }

  &--border-none {
    border: none;
    padding: 1px;
    border-radius: 0;
    background-color: transparent;

    &::after {
      box-shadow: none;
    }
  }

  &--border-bottom-line:-webkit-autofill {
    border-radius: 0;
  }
}