@use "sass:list";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$input-color: h.useVar("font-color") !default;
$input-font-size: h.useVar("font-size") !default;
$input-font-weight: h.useVar("font-weight") !default;
$input-line-height: h.useVar("line-height") !default;
$input-height: h.useVar("control-height") !default;

$input-padding: h.useVar("control-padding-vertical")
    h.useVar("control-padding-horizontal") !default;
$input-disabled-opacity: h.useVar("control-disabled-opacity") !default;

$input-box-shadow: h.useVar("control-box-shadow-inset") !default;
$input-border-width: h.useVar("control-border-width") !default;
$input-border-style: solid !default;
$input-border-color: h.useVar("control-border-color") !default;
$input-border-radius: h.useVar("border-radius") !default;
$input-border-radius-rounded: h.useVar("border-radius-rounded") !default;
$input-background-color: h.useVar("control-background-color") !default;

$input-textarea-min-height: 120px !default;
$input-textarea-max-height: 600px !default;
$input-textarea-padding: h.useVar("control-spacer") !default;

$input-counter-font-size: 0.75rem !default;
$input-counter-padding: 0.25rem 0.5rem !default;
/* @docs */

.o-input {
    @include h.defineVar("input-height", $input-height);
    @include h.defineVar("input-padding", $input-padding);
    @include h.defineVar("input-disabled-opacity", $input-disabled-opacity);

    @include h.defineVar("input-color", $input-color);
    @include h.defineVar("input-font-size", $input-font-size);
    @include h.defineVar("input-font-weight", $input-font-weight);
    @include h.defineVar("input-line-height", $input-line-height);

    @include h.defineVar("input-box-shadow", $input-box-shadow);
    @include h.defineVar("input-background-color", $input-background-color);
    @include h.defineVar("input-border-width", $input-border-width);
    @include h.defineVar("input-border-style", $input-border-style);
    @include h.defineVar("input-border-color", $input-border-color);
    @include h.defineVar("input-border-radius", $input-border-radius);
    @include h.defineVar(
        "input-border-radius-rounded",
        $input-border-radius-rounded
    );

    @include h.defineVar(
        "input-textarea-min-height",
        $input-textarea-min-height
    );
    @include h.defineVar(
        "input-textarea-max-height",
        $input-textarea-max-height
    );
    @include h.defineVar("input-textarea-padding", $input-textarea-padding);

    @include h.defineVar("input-counter-font-size", $input-counter-font-size);
    @include h.defineVar("input-counter-padding", $input-counter-padding);

    // define focus shadow effect
    @include h.focusable(".o-input__input");

    // add clickable cursor
    @include h.clickable;

    display: inline-block;
    position: relative;

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar("input-font-size", h.useVar("size-#{$name}"));
        }
    }

    // color variants
    @each $name, $pair in vars.$colors {
        &--#{$name} {
            @include h.defineVar("input-border-color", h.useVar($name));
        }
    }

    &__input {
        // remove default appearance
        @include h.removeAppearance;

        display: inline-block;
        position: relative;

        height: h.useVar("input-height");
        padding: h.useVar("input-padding");

        color: h.useVar("input-color");
        font-size: h.useVar("input-font-size");
        font-weight: h.useVar("input-font-weight");
        line-height: h.useVar("input-line-height");

        box-shadow: h.useVar("input-box-shadow");
        background-color: h.useVar("input-background-color");

        border-color: h.useVar("input-border-color");
        border-style: h.useVar("input-border-style");
        border-width: h.useVar("input-border-width");
        border-radius: h.useVar("input-border-radius");

        &--iconspace-left {
            padding-left: h.useVar("input-height");
        }

        &--iconspace-right {
            padding-right: h.useVar("input-height");
        }
    }

    &--textarea textarea {
        display: block;
        max-width: 100%;
        min-width: 100%;
        height: auto;
        resize: vertical;
        padding: h.useVar("input-textarea-padding");

        &:not([rows]) {
            max-height: h.useVar("input-textarea-max-height");
            min-height: h.useVar("input-textarea-min-height");
        }
    }

    &--rounded {
        @include h.defineVar(
            "input-border-radius",
            h.useVar("input-border-radius-rounded")
        );
    }

    &--disabled {
        @include h.disabled(h.useVar("input-disabled-opacity"));
    }

    &--expanded {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;

        .o-input__input {
            width: 100%;
        }
    }

    &__counter {
        display: block;
        float: right;
        font-size: h.useVar("input-counter-font-size");
        padding: h.useVar("input-counter-padding");
        height: h.useVar("input-height");
    }

    &__icon-left,
    &__icon-right {
        position: absolute;
        top: 0;
        height: 100%;
        width: h.useVar("input-height");
        z-index: 1;
    }

    &__icon-right {
        right: 0;
    }

    &__icon-left {
        left: 0;
    }
}