// 1. Get ready for positioning of bottom line and caret.
// 2. Always prefer `size` and `max` attributes when defined. Use CSS for sizing to normalize
//    result width across browsers.
// 3. Let inputs properly fit various layout scenarios.
// 4. Leave out space for SelectField caret.
// 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
// 6. Pull out the focused input from the group.

@use "../../settings/form-fields" as settings;
@use "../../theme/form-fields" as theme;
@use "../caret";
@use "../spacing";
@use "../transition";

@mixin input-container() {
    position: relative; // 1.
    display: inline-flex;
    min-width: 0; // 3.
    max-width: 100%; // 3.
}

@mixin base() {
    @include transition.add((opacity, color, border-color, background-color, box-shadow));

    width: theme.$box-input-width;
    min-width: theme.$box-input-min-width;
    max-width: 100%; // 3.
    height: var(--rui-local-height);
    padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
    color: var(--rui-local-color);
    border: theme.$box-border-width solid var(--rui-local-border-color);
    border-radius: theme.$box-border-radius;
    background: var(--rui-local-background);
}

@mixin input() {
    @include base();

    appearance: none;
    font-weight: settings.$box-input-font-weight;
    font-size: var(--rui-local-font-size);
    line-height: settings.$box-input-line-height;
    font-family: settings.$box-input-font-family;
    vertical-align: middle;
    box-shadow: var(--rui-local-box-shadow);

    &::placeholder {
        color: theme.$box-placeholder-color;
        opacity: 1;
    }
}

@mixin input-size() {
    width:
        calc(
            1ch * var(--rui-custom-input-size)
            + var(--rui-local-arrows-width, 0)
            + 2 * var(--rui-local-padding-x)
            + 2 * #{theme.$box-border-width}
        ); // 2.

    min-width: auto; // 2.

    &[type="number"] {
        --rui-local-arrows-width: #{settings.$box-field-input-number-arrows-width};
    }
}

@mixin input-textarea() {
    resize: vertical;

    &[cols] {
        min-width: auto;
    }
}

@mixin input-select() {
    appearance: none;
    padding-right: calc(#{settings.$box-field-caret-size} + #{spacing.of(2)}); // 4.

    &::-ms-expand {
        display: none;
    }
}

@mixin input-select-option() {
    option:disabled {
        color: theme.$box-select-option-disabled-color;
    }
}

@mixin caret() {
    @include transition.add((border-color));

    position: absolute; // 1.
    top: theme.$box-border-width;
    right: theme.$box-border-width;
    bottom: theme.$box-border-width;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
    border-start-end-radius: theme.$box-border-radius;
    border-end-end-radius: theme.$box-border-radius;
    pointer-events: none;
}

@mixin caret-icon() {
    @include caret.create();

    border-color: var(--rui-local-color);
}

@mixin bottom-line() {
    @include transition.add((transform, opacity), 180ms);

    position: absolute; // 1.
    bottom: 0;
    width: 100%;
    height: settings.$box-field-bottom-line-height;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center center;
    pointer-events: none;

    .input:focus ~ & {
        background-color: var(--rui-local-border-color);
        opacity: 1;
        transform: scaleX(1);
    }
}

@mixin in-group-layout($input-element-selector: ".input") {
    // 6.
    &:focus-within {
        isolation: isolate;
        z-index: 1;
    }

    .inputContainer {
        display: block; // 5.
    }

    &:not(:first-child) #{$input-element-selector} {
        border-start-start-radius: var(--rui-local-inner-border-radius);
        border-end-start-radius: var(--rui-local-inner-border-radius);
    }

    &:not(:last-child) #{$input-element-selector} {
        border-start-end-radius: var(--rui-local-inner-border-radius);
        border-end-end-radius: var(--rui-local-inner-border-radius);
    }
}