::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: $gray;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: $gray;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: $gray;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: $gray;
}

%input-base {
  border-radius: rem-calc(3px);
  color: $black;
  outline: none;
  font-family: $body-font-family;
}

%input-box {
  background-color: $white;
  border: rem-calc(1px) solid $gray-border-color;
}

.input-container,
  {
  @extend .cell;
  position: relative;
  overflow: hidden;
  min-height: $input-min-height;
  @extend %input-base;
  &:focus-within {
    border-color: #2684ff;
  }
  &--normal {
    @extend %input-box;
  }
  &--primary {
    color: $primary-color;
    border: none;
    background-color: $white;
  }
  &--secondary {}
  &--error {
    border-color: $input-error-border-color;
    background-color: $input-error-bg-color;
  }
  &--disabled-color {
    color: $color-text-input;
  }
  &__inside-label {
    position: absolute;
    top: 0;
    padding: rem-calc(0 $input-padding-right-left);
  }
  &--disabled {
    border: solid 1px $gray-border-color;
    cursor: not-allowed !important;
  }
  &--disabled-transparent {
    >input:disabled {
      background-color: transparent;
    }
  }
  &__icon {
    &--left {
      position: absolute;
      left: rem-calc(1);
    }
    &--right {
      position: absolute;
      right: rem-calc(1);
    }
  }
  &__input {
    position: absolute;
    top: 0;
    border-radius: 0;
    &--with-inside-label {
      font-size: 16px;
      line-height: 16px;
      padding-bottom: 0;
      padding-top: 18px;
    }
  }
  &__reserved-input {
    position: absolute;
    right: 0;
    left: 0;
    padding: $input-padding;
    user-select: none;
    &--placeholder {
      color: $gray;
    }
    &--disabled {
      background-color: $disabled-gray;
      color: $color-text-input;
    }
  }
  &__error-message {
    color: $input-error-color;
    font-size: rem-calc(14);
    display: block;
    text-align: right;
    height: 10px;
    margin-top: 0px;
  }
  &--with-icon {
    &--left {
      .input-container__input {
        padding-left: calc(#{map-get(map-get($map: $icon, $key: small), width)} + #{rem-calc(2)});
      }
    }
    &--right {
      .input-container__input {
        padding-right: calc(#{map-get(map-get($map: $icon, $key: small), width)} + #{rem-calc(2)});
      }
    }
  }
  &--with-inside-label {}
}

.input-container:focus {
  @extend .input-container;
}

.input-with-icon {
  &__icon {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(-50%, -50%);
  }
}

.input-horizontal {
  flex: 1;
  width: auto;
}

.i-horizontal {
  width: 90%;
}

.select-view {
  position: relative;
  @include breakpoint(small only) {
    padding: $input-padding-responsive;
  }
  @include breakpoint(medium) {
    padding: $input-padding;
  }
  &:hover {
    cursor: pointer;
  }
  &--normal {
    @extend .input-container;
    @extend .input-container--normal;
  }
  &--secondary {
    border-radius: 2px;
    background-color: #f1f7ff;
    border: solid 1px #0077e2;
    color: $primary-light-color;
    font-weight: bold;
  }
  &--primary-light {
    padding-bottom: 6px;
    border: 0;
    .select-view__inside-label,
    .select-view__arrow {
      color: $primary-color;
    }
  }
  &--disabled {
    @extend .input-container--disabled;
    background-color: $disabled-gray;
  }
  &__inside-label {
    position: absolute;
    top: 0;
  }
  &__current-text {
    &--with-inside-label {
      font-size: 20px;
      line-height: 20px;
    }
    &--disabled {
      color: $color-text-input;
    }
  }
}

.text-area,
.text-area:focus {
  @extend %input-base;
  @extend %input-box;
  resize: none;
  min-height: rem-calc(80);
  line-height: 1.35;
}

.text-area:focus {
  border-color: #2684ff;
}

.checkbox-group {
  &--error {
    background-color: rgba(251, 87, 87, 0.15);
    border: solid 1px #fb5757;
    padding: 10px;
  }
  &--vertical {
    @extend .grid-y;
    >* {
      margin-bottom: rem-calc(10);
    }
  }
  button {
    &:focus {
      outline: none;
      .checkbox-image-item__wrapper,
      .text-checkbox-item {
        border-color: #2684ff;
      }
    }
  }
}

.checkbox {
  &--error {
    background-color: rgba(255, 0, 0, 0.1);
    border: solid 1px red;
    border-radius: 0.1875rem;
    padding: 5px;
  }
}