%border-style {
  border: solid;
  border-width: 1px;
  border-color: gray;
}

.ui-input {
  padding: 3px 10px;
  font-size: 14px;
  display: grid;
  flex: 1 1 1rem;
  grid-column: 1;
  grid-template-areas: "addon-start error input counter clear addon-end";
  grid-template-columns: auto auto 1fr auto auto auto auto;
  line-height: 1;
  overflow: hidden;
  position: relative;
  @extend %border-style;
  border-radius: $ui-input-border-radius;
  border-top-right-radius: $ui-input-border-radius;
  border-bottom-right-radius: $ui-input-border-radius;
  align-items: center;

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    text-align: right;
    /* Firefox */
    -moz-appearance: textfield;
  }

  input[type="color"] {
    width: 100%;
    height: 2rem;
    padding-left: 0;
    border-radius: 5px;

    /* Chrome and Edge */
    &::-webkit-color-swatch {
      border-radius: 5px;
    }

    input[type="number"] {
      text-align: right;
      /* Firefox */
      -moz-appearance: textfield;
    }

    @supports (-moz-appearance: none) {
      padding-top: 4px;
      padding-bottom: 4px;
    }
  }

  &.ui-list {
    grid-template-areas: "addon-start error input counter clear addon-end" "list-container . . . . . .";
  }

  &.ui-phone {
    grid-template-areas: "addon-start error flag input counter clear addon-end";
    grid-template-columns: auto auto auto 1fr auto auto auto auto;

    > .ui-flag {
      align-self: center;
      grid-area: flag;
    }
  }

  $base: unquote(".ui-input");

  &--textarea {
    grid-template-areas: "addon-start error input clear addon-end" "counter . . . .";

    #{$base}__counter {
      grid-column: span 5;
      place-content: start;
    }

    #{$base}__error {
      align-self: start;
    }

    #{$base}__clear {
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
    }

    textarea {
      height: 24px;
      @include property-prefix(padding-end, 1.5rem);
    }
  }

  &::before {
    @include position(absolute, 0);
    opacity: 0.5;
  }

  &::after {
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    opacity: 0.75;
    position: absolute;
    right: 0;
    width: 0;
  }

  &:focus-within {
    &::after {
      transition: width 0.4s;
    }
  }

  &--readonly {
    padding: 3px 10px;
    border-radius: 0;

    input {
      font-family: inherit;
    }

    & > .ui-input__clear {
      display: none;
    }

    &::after {
      display: none;
    }

    &::before {
      cursor: default;
      background-color: transparent !important;
    }
  }

  &__addon {
    display: grid;
    font-size: map-get($font-sizes, sm);
    grid-area: addon-start;
    padding: 0;
    place-content: center;
    min-width: 40px;

    .ui-icon {
      font-size: 1.3rem;
    }

    .ui-flag {
      font-size: 1rem;
    }

    & + &,
    &--end {
      grid-area: addon-end;
      @extend %border-style;
      border-left-style: solid;
    }
  }

  > .ui-btn__wrapper {
    align-self: stretch;
    font-size: 0.8em;
    grid-area: addon-end;
    margin: 0;
  }

  &__info {
    grid-column: 1;
    padding: 0.25rem 0.5rem;

    .ui-row {
      --gutter: 0;
    }
  }

  &__counter,
  &__error,
  &__clear {
    display: grid;
    opacity: 0.5;
    padding: 0.25rem;
    place-content: center;
  }

  &__clear {
    cursor: pointer;
    grid-area: clear;
    min-width: 20px;

    &:hover {
      opacity: 1;
    }
  }

  &--invalid {
    overflow: visible;
  }

  &__error {
    display: initial;
    grid-area: error;
    opacity: 1;
    z-index: 5;

    > ul {
      position: absolute;
      margin-block-start: auto;
      transform: none;
      font-size: 0.9rem;
      padding: 0.3em;
      display: none;
      list-style: none;
      white-space: nowrap;
      z-index: 10;
    }

    &:hover > ul {
      display: block;
    }
  }

  &__counter {
    font-size: 0.8rem;
    grid-area: counter;
  }

  input,
  textarea {
    border: 0;
    grid-area: input;
    letter-spacing: 0.01em;
    line-height: 1.5rem;
    margin: 0;
    outline: none;
    padding: 0 0.5rem;
    padding-left: 0;
    @include text-select();
    height: 2rem;
    width: 100%;
    box-sizing: content-box;
  }

  input {
    font-size: 16px;
    font-weight: inherit;
    font-family: inherit;
  }

  textarea {
    font-size: 1rem;
    font-weight: $font-weight-light;
    padding: 0;
    min-height: 1.5rem;
    resize: none;

    &.resizable {
      resize: vertical;
    }
  }

  input[type="file"] {
    line-height: 1;
    padding: 0.358rem 0.5rem;
  }

  &-file {
    &__dropzone {
      display: grid;
      font-size: 1.25rem;
      font-weight: $font-weight-light;
      grid-area: input;
      grid-gap: 0.5rem;
      grid-template-columns: auto auto;
      padding: 3rem 0;
      place-content: center;
      text-align: center;

      .ui-icon {
        font-size: 3rem;
      }

      span {
        pointer-events: none;
      }
    }

    &__list {
      grid-area: 2 / 1 / 2 / 7;

      > div {
        align-items: start;
        display: grid;
        grid-gap: 8px;
        grid-template-columns: auto auto 1fr;
        line-height: 1.5;
        margin: 4px 0;
        overflow: hidden;

        > label {
          @include ellipsis();
        }
      }
    }
  }

  &__tags {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    grid-area: input;

    .ui-tag {
      align-items: center;
      border-radius: 2px;
      display: grid;
      font-size: 0.8rem;
      grid-gap: 4px;
      grid-template-columns: auto auto;
      line-height: 1.5rem;
      margin: 0.25rem;
      overflow: hidden;
      padding: 0 0.25rem;

      .ui-badge {
        float: right;
      }

      &__close {
        cursor: pointer;
        font-size: 1rem;
        line-height: 1.1;
        opacity: 0.5;

        &:hover {
          opacity: 0.9;
        }
      }
    }

    input {
      flex: 1 1 4em;
    }
  }

  &.bold {
    input {
      font-size: 20px;
      font-weight: bold;
    }
  }

  &.italic {
    input {
      font-size: 14px;
      font-style: italic;
    }
  }
}
//for ag-grid input
input:not([type]),
input[type="text"]:not(.browser-default),
input[type="password"]:not(.browser-default),
input[type="email"]:not(.browser-default),
input[type="url"]:not(.browser-default),
input[type="time"]:not(.browser-default),
input[type="date"]:not(.browser-default),
input[type="datetime"]:not(.browser-default),
input[type="datetime-local"]:not(.browser-default),
input[type="tel"]:not(.browser-default),
input[type="number"]:not(.browser-default),
input[type="search"]:not(.browser-default),
textarea.materialize-textarea {
  background-color: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 16px;
  margin: 0 0 8px 0;
  padding: 0;
  box-shadow: none;
  box-sizing: content-box;
  transition:
    box-shadow 0.3s,
    border 0.3s;
}
