/* ==================================
   #INPUT
   ================================== */

/* Variables
   ========================================================================== */

$au-input-height: $au-unit-large - $au-unit-small !default;
$au-input-color: var(--au-gray-1000) !default;
$au-input-border-color: var(--au-gray-300) !default;
$au-input-disabled-background-color: var(--au-gray-100) !default;
$au-input-disabled-border-color: var(--au-gray-300) !default;
$au-input-disabled-color: var(--au-gray-700) !default;
$au-input-font-size: var(--au-h6) !default;
$au-input-border-radius: 0.3rem !default;

/* Component
  ========================================================================== */

.au-c-input {
  border: 0.1rem solid $au-input-border-color;
  color: $au-input-color;
  font-size: $au-input-font-size;
  font-weight: var(--au-regular);
  font-family: var(--au-font);
  height: $au-input-height;
  max-width: 100%;
  padding: 0 $au-unit-small 0.1ex;
  border-radius: $au-input-border-radius;

  &.is-disabled {
    background-color: $au-input-disabled-background-color;
    border-color: $au-input-disabled-border-color;
    color: $au-input-disabled-color;
    cursor: not-allowed;
  }
}

.au-c-input:focus {
  outline: none;
  border-width: 0.1rem !important; // Temporary overide for Webuniversum
  border-color: var(
    --au-outline-color
  ) !important; // Temporary overide for Webuniversum
  box-shadow: inset 0 0 0 0.2rem var(--au-outline-color) !important; // Temporary overide for Webuniversum
}

// Wrapper for positioning icons on an input field
.au-c-input-wrapper {
  position: relative;
  display: inline-block;

  .au-c-input {
    padding-left: 1.6rem + $au-unit;
  }

  .au-c-icon {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1.6rem;
    margin-left: $au-unit-small;
    margin-right: $au-unit-small;
    pointer-events: none; // allow users to focus the field by "clicking" the icon
  }

  .au-c-icon--right {
    right: 0;
  }

  .au-c-icon--left {
    left: 0;
  }
}

.au-c-input-wrapper--right {
  .au-c-input {
    padding-left: $au-unit-small;
    padding-right: 1.6rem + $au-unit;
  }
}

/* Modifiers
  ========================================================================== */

.au-c-input--block {
  display: block;
  width: 100%;
}

.au-c-input--error {
  border-color: var(--au-red-600);
  box-shadow: inset 0 0 0 0.2rem var(--au-red-600);
}

.au-c-input--warning {
  border-color: var(--au-orange-500);
  box-shadow: inset 0 0 0 0.2rem var(--au-orange-500);
}

.au-c-input--mask {
  letter-spacing: 0.2rem;

  &::placeholder {
    color: var(--au-gray-500);
  }

  &:-ms-input-placeholder {
    color: var(--au-gray-500);
  }

  &::-ms-input-placeholder {
    color: var(--au-gray-500);
  }
}