@import "../../themes/liberty.globals";
:host {
    --lu-input-border-color:  #686A6F;
    display: block;
    position: relative;
    lu-icon {
        top: 50%;

        margin-top: -13px;

        font-size: 24px;

        line-height: 26px;
    }
}


:host(.lu-color) {
    color: current-color(base);
}

.native-input {
    @include padding(9px, 10px, 9px, 10px);
    width: 100%;

    border: 1px solid var(--lu-global-form-input-outline, var(--lu-input-border-color));

    outline: none;

    background-color: #FFFFFF;

    font-size: var(--lu-global-form-input-font-size, 16px);

    line-height: 26px;
    box-sizing: border-box;
}

:host([is-valid]) {
    .native-input {
        border: 2px solid #00854E;
    }
}

:host([is-invalid]) {
    .native-input {
        border: 2px solid #E4002B;
    }
}

:host([has-prefix]) {
    .prefix-icon {
        @include position-horizontal(13px, null);
        position: absolute;
    }

    .native-input {
        @include padding(null,null, null, 50px);
    }
}

:host([has-suffix]) {
    .suffix-icon {
        @include position-horizontal(null, 13px);
        position: absolute;
    }

    .native-input {
        @include padding(null,50px, null, null);
    }
}

:host([suffix-clickable]) {
    .suffix-icon {
        cursor: pointer;
    }
}

:host([prefix-clickable]) {
    .prefix-icon {
        cursor: pointer;
    }
}

:host(.has-focus) {
    .native-input {
        border: 2px solid  $primary;
    }
}

:host(.no-border) {
  .native-input {
    border: none;
  }
}