@use "sass:math";

@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 {
    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 {
      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;
        }
        [class*=pb_body_kit_negative] {
          color: $error_dark;
        }
      }
      .text_input_wrapper_add_on {
        .add-on {
          &-right {
            .add-on-card {
              border: 1px solid $error_dark;
              border-left: 0;
            }
          }
          &-left {
            .add-on-card {
              border: 1px solid $error_dark;
              border-right: 0;
            }
          }
        }
      }
    }
  }
  &.error {
    .text_input_wrapper {
      [class*="pb_body_kit"] {
        margin-top: math.div($space_xs, 2);
      }
      input,
      .text_input {
        border-color: $error;
      }
    }
    .text_input_wrapper_add_on {
      .add-on {
        &-right {
          .add-on-card {
            border: 1px solid $error;
            border-left: 0;
          }
        }
        &-left {
          .add-on-card {
            border: 1px solid $error;
            border-right: 0;
          }
        }
      }
      .border {
        &_left {
          &_on {
            .card-right-aligned {
              border-left: 0;
            }
          }
          &_off {
            .card-right-aligned {
              border-left: 0;
            }
            .text_input {
              border-right: 0;
              padding-right: 0;
            }
          }
        }
        &_right {
          &_on {
            .card-left-aligned {
              border-right: 0;
            }
          }
          &_off {
            .card-left-aligned {
              border-right: 0;
            }
            .text_input {
              border-left: 0;
              padding-left: 0;
            }
          }
        }
      }
    }
  }
  &.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: rgba($white, $opacity_1);
        border-color: rgba($white, 0.15);
      }
      &-left {
        .text_input {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }

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

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

    .border {
      &_right_off {
        .card-left-aligned {
          border-right: 0;
        }
        .text_input {
          border-left: 0;
          padding-left: 16px;
        }
      }
      &_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;
          padding-right: 0;
        }
      }
    }
  }
}