@import "../pb_textarea/textarea_mixin";
@import "../tokens/titles";
@import "../tokens/colors";


[class^=pb_text_input_kit] {
  .pb_text_input_kit_label {
    margin-bottom: $space_xs;
    display: block;
  }
  .text_input_wrapper {
    margin-bottom: $space_sm;
    display: block;
    input::placeholder,
    .text_input .placeholder {
      @include pb_body_light;
    }
    input,
    .text_input {
      max-height: 45px;
      @include pb_textarea_light;
      overflow: hidden;
    }
    input:hover,
    .text_input:hover{
      background-color: rgba($focus_input_light,$opacity_5);
    }
    input:focus,
    .text_input:focus,
    input:-webkit-autofill:focus,
    .text_input:-webkit-autofill:focus {
      @include pb_textarea_focus;
      @include transition_default;
      border-color: $primary;
      background-color: rgba($focus_input_light,$opacity_5);
    }
  }
  &.dark {
    .add_on_left {
      .text_input {
        border-left: 0;
      }
    }
    .add_on_right {
      .text_input {
        border-right: 0;
      }
    }
    .text_input_wrapper {
      margin-bottom: 1rem;
      input::placeholder,
      .text_input .placeholder {
        @include pb_body_light_dark;
      }
      input, .text_input {
        @include pb_textarea_dark;
        @include pb_body_dark;
        overflow: hidden;
        background-color: rgba($white,$opacity_1);
        border-color: rgba($white, 0.15);
      }
      input:hover,
      .text_input:hover{
        background-color: rgba($white, 0.15);
      }
      input:focus,
      .text_input:focus,
      input:-webkit-autofill:focus,
      .text_input:-webkit-autofill:focus {
        border-color: $active_dark;
        background-color: rgba($white, 0.025);
      }
    }
    &.error {
      .text_input_wrapper {
        input, .text_input {
          border-color: $error_dark;
        }
      }
    }
  }
  &.error {
    .text_input_wrapper {
      [class*=pb_body_kit] {
        margin-top: $space_xs / 2;
      }
      input, .text_input {
        border-color: $error;
      }
    }
  }
  &.inline {
    .text_input_wrapper input::placeholder,
    .text_input_wrapper .text_input .placeholder {
      opacity: 1;
    }
    &:not(:hover) {
      .text_input_wrapper input:not(:focus) {
        background-color: transparent;
        border-color: transparent;
      }
    }
  }
}

.text_input_wrapper_add_on {
  & > [class^=pb_text_input_kit]:not(:last-child) {
    .text_input_wrapper_add_on input, [class^=pb_text_input_kit] .text_input_wrapper_add_on .text_input {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      border-right-width: 0;
    }
  }
  .section-separator span {
    padding: 0;
  }

  .add-on {
    &-card {
      height: 45px;
      margin: 0;
      padding: 0 !important;
      align-items: center;
      justify-content: center;
      width: 45px;
    }
    &-icon {
      color: $text_lt_lighter;
    }
    &-card-dark {
      background-color: $bg-dark;
    }
    &-left {
      .text_input {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
      }
    }

    &-right {
      .text_input{
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }
    }
  }
  .text_input:focus ~ .add-on-card-dark {
    background-color: $focus_input_dark;
    border-width: 0px;
  }

  .card-left-aligned {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .card-right-aligned {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .border {
    &_right_off {
      .card-left-aligned {
        border-right: 0;
      }
      .text_input {
        border-left: 0 !important;
        padding-left: 0 !important;
      }
    }
    &_left_on {
      .card-right-aligned {
        border-left: 0;
      }
    }
    &_right_on {
      .card-left-aligned {
        border-right: 0;
      }
    }
    &_left_off {
      .card-right-aligned {
        border-left: 0;
      }
      .text_input {
        border-right: 0 !important;
        padding-right: 0 !important;
      }
    }
  }
}