.form-control {
  display: block;
  width: 100%;
  height: 50px;
  padding: 1.4rem 1.5rem 1rem 7rem;

  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1.1;
  color: $dark;
  font-weight: 500;

  border-radius: 0;
  border: none;
  border-bottom: 1px solid #E2E2E2;
  background: transparent;
  box-shadow: none;

  transition: border .2s linear, box-shadow .2s linear;

  &:disabled {
    color: #9e9e9ecf;
    cursor: not-allowed;
  }

  &:focus {
    outline: none;
    border-color: $primary;

    + .form-label {
      color: $primary;

      + .form-control-icon {
        stroke: $primary;
      }
    }
  }

  &::placeholder {
    color: #9E9E9E;
    font-weight: 400;
  }

  

  &--textarea {
    min-height: 94px;
    max-height: 200px;
    padding-left: 1.6rem;
    resize: none;

    &#locker_message{
      padding-left: 2rem;
    }
  }

  &--textarea-icon {
    padding-left: 7rem;
    padding-top: 1.7rem;
  }

  &--select {
    padding: 0;
    position: relative;
    border-bottom: none;

    #locker_country_id{
      padding-left: 2rem;
      
    }

    select {
      display: block;
      width: 100%;
      height: 100%;
      padding: .8rem .5rem .8rem 1.6rem;

      font-family: inherit;
      font-size: inherit;
      line-height: 1.1;

      appearance: none;
      background: none;
      border: none;
      border-bottom: 1px solid #E2E2E2;
      border-radius: 0;
      cursor: pointer;

      &:focus {
        outline: none;
        border-color: #606060;
      }
    }

    &::after {
      content: "";
      display: block;
      width: 23px;
      height: 24px;

      background: url("/shop/images/select-arrow.svg") center no-repeat;
      pointer-events: none;

      position: absolute;
      top: 50%;
      right: .5rem;
      z-index: 1;

      transform: translateY(-50%);
    }

    &.error {
      select {
        border-color: $red;
      }
    }
  }

  &--search {
    padding-right: 4.3rem;
    padding-left: 1.5rem;

    background-color: $white;
    border: 1px solid #C7C7C7;
    border-radius: 5px;
    font-weight: 400;

    &:focus {
      border-color: $blue;
    }
  }

  &--icon {
    padding-left: 5rem;

    background: left 17px center no-repeat;
  }

  &--email {
    background-image: url("/shop/images/input-email-icon.svg");
  }

  &--pswd {
    background-image: url("/shop/images/input-pswd-icon.svg");
  }

  &--user {
    background-image: url("/shop/images/input-user-icon.svg");
    background-position: left 14px center;
  }

  &.error {
    border-color: $red;

    + .form-label {
      color: $red;

      + .form-control-icon {
        stroke: $red;
      }
    }
  }
}

#select2-locker_identifier_id-container .select2-selection__placeholder{
  font-weight: 500;
}

.form-control-icon {
  width: 2.8rem;
  height: 2.8rem;

  position: absolute;
  top: 6px;
  left: 1.6rem;
  z-index: 1;
  pointer-events: none;

  stroke: #9E9E9E;
}

.form-control-showhide {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;

  font-size: 0;
  color: transparent;
  cursor: pointer;

  border: none;
  background: url("/shop/images/eye.svg") center no-repeat;

  position: absolute;
  top: 50%;
  right: 1.7rem;
  z-index: 1;
  transform: translateY(-50%);

  &.active {
    background-image: url("/shop/images/eye-slash.svg");
  }
}

.form__group {
  .form-field {
    display: flex;
    height: 50px;
    .form-field-prefix {
      height: 100%;
      border-bottom: 1px solid #E2E2E2;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.1s linear;
      padding-left: 16px;
      padding-right: 13px;
      &::after {
        content: "";
        width: 1px;
        height: 3.6rem;
        background-color: #f2f2f2;
        margin-left: 13px;
        margin-top: -8px;
      }
      svg {
        stroke: #9E9E9E;
        background: center center no-repeat;
        transition: stroke 0.1s linear;
        width: 2.8rem;
        height: 2.8rem;
      }
    }
    .form-field-infix {
      height: 100%;
      width: 100%;
      border-bottom: 1px solid #E2E2E2;
      transition: border-color 0.1s linear;
      display: flex;
      flex-direction: column;
      gap: 5px;
      label {
        font-size: 1rem;
        color: #9E9E9E;
        transition: color 0.1s linear;
      }
      input {
        display: inline-block;
        font-family: inherit;
        font-size: 1.4rem;
        line-height: 1.1;
        color: $dark;
        font-weight: 500;
        border-radius: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        &:focus {
          outline: none;
          border-color: $primary;
        }
      }
      .select-container {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        .prefix {
          font-family: inherit;
          font-size: 1.4rem;
          line-height: 1.1;
          color: #252525;
          font-weight: 500;
        }
        select {
          font-family: inherit;
          line-height: 1.1;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          background: none;
          border: none;
          border-radius: 0;
          cursor: pointer;
          padding-right: 20px;
          font-size: 1.4rem;
          color: #252525;
          font-weight: 500;
  
          &:focus {
            outline: none;
          }
        }
        .caret {
          display: block;
          height: 12px;
          width: 12px;
          background: url("/shop/images/select-arrow.svg") center no-repeat;
          transform: translateY(-15%);
          cursor: pointer;
          pointer-events: none;
          margin-left: -20px;
        }
      }
      .input-group-container {
        display: flex;
        gap: 6px;
      }
    }
    &:focus-within {
      .form-field-infix {
        border-color: $primary;
        label {
          color: $primary;
        }
      }
      .form-field-prefix {
        border-color: $primary;
        svg {
          stroke: $primary;
        }
      }
    }
    &.error {
      .form-field-infix,
      .form-field-prefix {
        border-color: $red;
      }
      .form-field-prefix {
        svg {
          stroke: $red;
        }
      }
      .form-field-infix {
        label {
          color: $red;
        }
      }
    }
  }
}