%input-focus {
  border-color: var(--input-focus-border-color, $input-focus-border-color);
  transition: border-color 0.2s;
  box-shadow: 0px 0px 5px 1px var(--input-focus-border-color, $input-focus-border-color);
  transition: box-shadow 0.2s;
}

.ui-fieldset {
  border: 1px solid $base-border-color;
  border-radius: $base-border-radius;
}

.ui-password-meter {
  &::before {
    background-image: -webkit-linear-gradient(left, $red, $yellow, $green);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
  }

  &::after {
    background-color: $base-bg;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
  }
}

.ui-field {
  &:focus-within &__label {
    color: $input-focus-color;
    font-weight: $font-weight-medium;
  }

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

  &__label {
    span:last-child {
      color: var(--secondary, $secondary);
    }
  }

  > label {
    color: $gray-dark;
  }

  &--empty > label {
    color: #cccccc;
  }

  &__wrapper {
    background-color: $base-component-bg;
    border: solid 1px $gray-50;
    .ui-dropdown {
      box-shadow: none;
      background-color: transparent;
    }

    &:focus-within {
      @extend %input-focus;
      box-shadow: none;
      border-color: var(--primary, $primary);
    }
  }

  &--plain &__wrapper,
  &--plain {
    background-color: transparent;
    box-shadow: none;

    .ui-input {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;

      &__info {
        background: none;
        box-shadow: none;
      }
    }

    .ui-dropdown {
      background: none;
      box-shadow: none;
    }
  }
  &.ui-field--invalid {
    > label {
      > span {
        color: $red;
      }
    }
    > ui-field-wrapper.ui-ml-input {
      border: 1px solid $red;
      > ui-input.ui-input {
        border-color: $gray-50;
      }
    }
  }
}

$input-bevel: 0 1px 2px 0 rgba($black, 0.25) inset;

.ui-input {
  background-color: $input-bg;
  border-color: $gray-50;
  color: #1d1d1d;

  &:not([readonly]):focus-within {
    @extend %input-focus;
    box-shadow: none;
    border-color: var(--primary, $primary);
  }

  &.ui-list {
    .ui-list__container {
      border-top: 1px solid $base-border-color;
    }
  }

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

  &--textarea {
    #{$base}__counter {
      border-top: 1px dashed $base-border-color;
    }
    > .ui-input__clear {
      position: initial;
      padding-top: 10px;
      place-content: baseline;
      margin-left: 15px;
    }
    > textarea {
      min-height: 8rem;
      &.textarea {
        &__sm {
          min-height: 4rem;
        }
        &__md {
          min-height: 6rem;
        }
        &__lg {
          min-height: 8rem;
        }
        &__xl {
          min-height: 10rem;
        }
      }
    }
  }

  &::after {
    background-color: $input-focus-color;
  }

  &:focus-within {
    color: $input-focus-color;
  }

  &--invalid {
    background-color: $input-error-bg;

    &::after {
      background-color: $input-error-color;
    }
  }

  &--disabled {
    background-color: $black-4;
    color: $gray-80;
    > input,
    textarea {
      cursor: not-allowed;
    }
  }

  &--readonly {
    background-color: $black-4;
    border: none;
    border-bottom: solid 1px $gray-50;

    &::before {
      background-color: rgba($gray, 0.05);
    }
  }

  &__addon {
    .ui-option {
      color: $base-color;
    }

    &--end:first-child() {
      border-color: $base-border-color;
    }

    &.link {
      &:hover {
        cursor: pointer;
      }

      &:active {
        background-color: $menu-active-bg;
        color: var(--menu-active-color, $menu-active-color);
      }
    }
  }

  &__info {
    background-color: $base-component-bg;
    box-shadow:
      0 1px 0 0 $base-component-bg inset,
      0 0 0 1px $base-border-color inset;
  }

  &__counter,
  &__error,
  &__clear {
    color: $gray;
  }

  &__error {
    color: $input-error-color;

    > ul {
      background: $input-error-color;
      color: $white;
    }
  }

  &__valid {
    color: $input-valid-color;
  }

  input,
  textarea {
    background: none;
    color: inherit;

    &:focus {
      color: darken($input-color, 30%);
      transition: color 0.2s;
    }
  }

  &-file {
    &__dropzone {
      border: 2px dashed $gray;
      color: $gray;

      &.dragging {
        border-color: $input-focus-color;
        color: $input-focus-color;
      }

      & + input {
        box-shadow: none;
        display: none;
      }
    }
  }

  &__tags {
    .ui-tag {
      background-color: rgba($gray, 0.1);
      box-shadow: 0 0 1px 0 $gray;
    }
  }
}

//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 {
  border-bottom: 1px solid $gray-80;
}

.ui-ml-input > .ui-input--readonly,
.textarea-multilang > ui-textarea.ui-input--readonly {
  border-bottom: none;
}

.ui-list {
  &__title {
    color: $base-muted;
  }

  &__item {
    background-color: var(--list-item-active-color, $list-item-active-color);
    color: var(--list-item-active-bg, $list-item-active-bg);

    u {
      color: var(--list-item-active-bg, $list-item-active-bg);
    }

    &--selected {
      background-color: var(--list-item-active-bg, $list-item-active-bg);
      color: var(--list-item-active-color, $list-item-active-color);
    }

    &:hover,
    &--hilight {
      background-color: var(--list-item-hover-bg, $list-item-hover-bg);
      color: var(--list-item-hover-color, $list-item-hover-color);
    }
  }
}

.ui-dropdown {
  background-color: $base-component-bg;
  box-shadow: 0 0 0 1px $base-border-color inset;

  &__link {
    &[data-open="true"],
    &:active {
      background-color: $menu-active-bg;
      color: var(--menu-active-color, $menu-active-color);
    }
  }
}

.ui-option {
  &__toggle {
    background-color: $toggle-bg;

    &::before {
      color: $toggle-color;
    }

    &::after {
      background-color: $base-theme;
      box-shadow: $shadow-level3;
    }

    input[type="checkbox"] ~ &:active::after {
      box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.15000000000000002);
    }
  }

  &__control {
    color: $gray-dark;

    > input {
      & ~ .ui-option__toggle {
        &:active::after {
          box-shadow: 0px 0px 0px 10px rgba($gray, 0.15);
        }
      }

      &:checked {
        ~ .ui-option__toggle {
          background-color: $toggle-on-bg;

          &::before {
            color: $toggle-on-color;
          }

          &:active::after {
            box-shadow: 0px 0px 0px 10px var(--primary-15, rgba($primary, 0.15));
          }
        }
      }

      &:hover ~ .ui-icon,
      &:focus ~ .ui-icon {
        color: $input-focus-color;
      }
    }
    > span {
      font-size: 1rem;
    }
  }

  @mixin make-toggle($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      input:checked {
        ~ .ui-option__toggle {
          background-color: $theme-color;
          color: $white;
        }
      }
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-toggle($label, $color);
  }

  @each $label, $color in $base-colors {
    @include make-toggle($label, $color);
  }

  @each $label, $color in $color-list {
    @include make-toggle($label, $color);
  }
}

.ui-slider {
  &__bubble {
    background-color: $input-bg;
    border: 1px solid $base-border-color;
    border-radius: $base-border-radius;
  }

  &__min,
  &__max {
    color: $base-muted;
  }

  &__bar {
    background-color: $base-bg;

    & > input {
      position: absolute !important;
      margin: 0 !important;

      &::-webkit-slider-thumb {
        background-color: $input-bg;
        border: 1px solid $base-border-color;
      }
    }
  }
}

.ui-select {
  background-color: $input-bg;
  border-color: $gray-50;
  color: #1d1d1d;
  $base: unquote(".ui-input");

  &--focus {
    border-color: var(--primary, $primary) !important;
  }

  &#{$base}--invalid {
    background-color: $input-error-bg;

    &::after {
      background-color: $input-error-color;
    }
  }

  .select2-container {
    background-color: transparent;
    border: none;

    &.select2-container--focus {
      .select2-selection {
        border-color: unset;
        box-shadow: unset !important;
      }
    }

    &.select2-container--open {
      .select2-selection {
        border-color: unset;
        box-shadow: unset !important;
      }
    }

    span.select2-selection {
      &--single {
        .select2-selection__rendered {
          color: $input-color;
        }
      }

      .select2-selection__clear {
        color: $gray;
        opacity: 0.5;

        &:hover {
          opacity: 1;
        }
        a:hover {
          background-color: transparent;
        }
      }

      .select2-selection__choice {
        color: var(--primary-reverse, set-color($primary));
        background-color: var(--primary, $primary);
        .select2-selection__choice__remove {
          background-color: transparent;
          color: inherit !important;
          &:hover {
            background-color: transparent;
          }
          a {
            color: inherit;
            background-color: transparent;
            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}

.select2-container {
  .select2-search.select2-search--dropdown {
    padding: 0;

    input.select2-search__field {
      background-color: transparent;
      border-color: $base-border-color;
      border-bottom-width: 1px;
      box-shadow: none;

      &:focus {
        @extend %input-focus;
      }
    }
  }

  .select2-dropdown {
    box-shadow: $shadow-level3;

    .select2-results__options {
      background-color: $white;

      .select2-results__option {
        color: $input-color;
        line-height: 1.5rem;
        font-size: 16px;
        padding: 8px;

        /**
          * Disabled options
          */
        &[aria-disabled="true"] {
          cursor: not-allowed;
        }

        /**
          * Selected option
          */
        &[aria-selected="true"] {
          color: rgba($input-color, 0.5);
          background-color: rgba($gray, 0.25);
        }

        /**
          * Active/hovered option
          */
        &.select2-results__option--highlighted[aria-selected] {
          background-color: $gray-15;
          color: $black;
        }
      }
    }

    .select2-create-button {
      line-height: 2.5rem;
      display: block;
      color: $input-color;
      border-top: 1px solid var(--primary, $primary);
      padding-left: 10px;
      background-color: var(--primary-50, rgba($primary, 0.5));
      cursor: pointer;

      > span {
        vertical-align: middle;
      }

      > i {
        margin-right: 5px;
        vertical-align: middle;
      }
    }
  }
}

.ui-icon {
  @mixin make-icon($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      color: $theme-color;
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-icon($label, $color);
  }

  @each $label, $color in $base-colors {
    @include make-icon($label, $color);
  }
  &.ui-theme--dark {
    color: $gray-dark;
  }
}

.ui-field__wrapper.textarea-multilang .ui-input:first-child {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

ui-field-wrapper {
  &.readonly {
    background-color: $input-bg;
    box-shadow:
      0 0 0 1px rgba($base-border-color, 0.25) inset,
      $input-bevel;

    &::before {
      background-color: rgba($gray, 0.05);
    }
  }
  &.textarea-multilang {
    display: grid;
    > ui-textarea {
      border-right: none;
      > .ui-input__clear {
        position: initial;
        padding-top: 10px;
        place-content: baseline;
        margin-left: 20px;
      }
    }
    > ui-dropdown {
      margin: 5px;
      position: absolute;
      bottom: 0;
      right: 0;
      > .ui-dropdown__link {
        border: solid 1px $gray-50;
        border-radius: 5px;
        > .ui-dropdown__label {
          padding: 5px 3px;
        }
      }
    }
  }
}

ui-files {
  .dropzone {
    &.hover {
      border: 1px dashed var(--primary, $primary);
      border-radius: $base-border-radius;
      background-color: var(--primary-05, rgba($primary, 0.05));
    }

    &.in {
      background-color: var(--primary-25, rgba($primary, 0.25));
    }

    &-content {
      color: var(--primary, $primary);
    }
  }
  ui-enumeration-select {
    width: 100%;
  }
}

ui-radio {
  input[type="radio"] {
    accent-color: var(--primary, $primary);
  }
}
