$placeholder-color: $color-controlelement;
$label-color: $color-controlelement;
$input-size-md: $size-xl;
$input-size-sm: $size-l;
$input-size-xs: $size-m;
$horizontal-padding: $spacing-xs;
$input-radius: $radius-control;
$border-size: $border-xs;
$border-color: $color-controlborder;
$border-color--hover: $color-controlborder--hover;
$input-text-color: $color-textfield;
$icon-size: $size-s;
$horizontal-spacing: $spacing-xxs;
$icon-color: $color-controlelement;

$focused-label-padding: $spacing-xxxs;
$focused-label-color: $color-primary;
$focused-border-color: $color-primary;

$error-border-size: $border-s;
$error-border-color: $color-alert;
$error-label-color: $color-alert;
$error-text-color: $color-alert;
$error-size: $size-xs;

$animation-time: 150ms;
$animation-function: cubic-bezier(0.4, 0, 0.2, 1);

.text-field {
  position: relative;
  display: block;

  &:hover {
    .outline {
      .start,
      .center,
      .end {
        border-color: $border-color--hover;
      }
    }
  }

  &.with-trailing-icon {
    input, textarea {
      padding-right: $icon-size + $horizontal-spacing + $horizontal-padding;
    }
  }

  &.with-leading-icon {
    input, textarea {
      padding-left: $icon-size + $horizontal-spacing + $horizontal-padding;
    }
  }

  .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    &:not(.btn) {
      pointer-events: none;
    }
    &.btn {
      cursor: pointer;
      &:hover {
        mtg-svg-icon {
          color: $color-control;
        }
      }
    }
    &.trailing-icon {
      right: $horizontal-padding;
    }
    &.leading-icon {
      left: $horizontal-padding;
    }
    mtg-svg-icon {
      width: $icon-size;
      height: $icon-size;
      color: $icon-color;
    }
  }

  .input {
    position: relative;
  }

  input,
  textarea {
    width: 100%;
    padding: 0 $horizontal-padding;
    @include font-control-label();
    color: $input-text-color;
    background: none;
    border: none;
    &:focus {
      outline: none;
    }

    @include placeholder {
      @include font-control-label();
      color: $placeholder-color;
    }

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus{
      -webkit-box-shadow: none;
      -webkit-text-fill-color: #fff;
      transition: background-color 5000s ease-in-out 0s;

      &+.outline {
        .center {
          border-top-color: transparent !important;
          padding: 0 $focused-label-padding;

          .label {
            top: 0 !important;
            transform: translateY(-50%) !important;
            @include font-control-focuslabel();
          }
        }
      }
    }

    &:-internal-autofill-selected {
      background-color: transparent !important;
      background-image: none !important;
      color: $input-text-color !important;
    }
  }
  .textarea {
    padding: $horizontal-padding;
    textarea {
      padding: 0;
      height: 100%;
      resize: none;
    }
    .outline {
      .center {
        .label {
          top: $horizontal-padding;
          transform: none;
        }
      }
    }
  }

  &.text-field--size-sm {
    input {
      height: $input-size-sm;
    }
    .textarea {
      min-height: $input-size-sm;
    }
  }

  &.text-field--size-md {
    input {
      height: $input-size-md;
    }
    .textarea {
      min-height: $input-size-md;
    }
  }

  &.text-field--size-xs {
    input {
      height: $input-size-xs;
    }
    .textarea {
      min-height: $input-size-xs;
    }
  }

  .outline {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .start {
      width: 12px;
      border: $border-size solid;
      border-right: none;
      border-radius: $input-radius 0 0 $input-radius;
    }
    .center {
      position: relative;
      display: flex;
      align-items: flex-start;
      flex: 0 0 auto;
      width: auto;
      max-width: calc(100% - 12px * 2);
      border-top: $border-size solid;
      border-bottom: $border-size solid;
      padding: 0 $horizontal-padding - 12px;
      .label {
        position: relative;
        top: 50%;
        transition: top $animation-time $animation-function, transform $animation-time $animation-function, color $animation-time $animation-function;
        transform: translateY(-50%);
        @include font-control-label();
        color: $label-color;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .end {
      flex-grow: 1;
      border: $border-size solid;
      border-left: none;
      border-radius: 0 $input-radius $input-radius 0;
    }
    .start,
    .center,
    .end {
      border-color: $border-color;
      transition: border-color 150ms ease;
    }
  }

  &.with-placeholder,
  &.focused,
  &.filled {
    &:not(.without-label) {
      .outline {
        .center {
          border-top-color: transparent !important;
          padding: 0 $focused-label-padding;

          .label {
            top: 0 !important;
            transform: translateY(-50%) !important;
            @include font-control-focuslabel();
          }
        }
      }
    }
  }
  &.focused {
    .outline {
      .start,
      .center,
      .end {
        border-color: $focused-border-color;
      }
      .center .label {
        color: $focused-label-color;
      }
    }
  }
  &.error {
    .outline {
      .start,
      .center,
      .end {
        border-width: $error-border-size;
        border-color: $error-border-color;
      }
      .center {
        .label {
          color: $error-label-color;
        }
      }
    }
  }

  .error-text {
    display: flex;
    align-items: center;
    width: 100%;
    height: $error-size;
    line-height: $error-size;

    padding: 0 $horizontal-padding;
    @include font-control-errortext();
    color: $error-text-color;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}