@use "sass:color";
@use "../../jkl";

@mixin wrapper-styles {
    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
    --jkl-text-input-vertical-padding: var(--jkl-unit-15);
    --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
    --jkl-text-input-action-button-size: var(--jkl-unit-60);
    --jkl-text-input-action-button-icon-size: var(--jkl-unit-30);
    --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
    --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
    --text-color: var(--jkl-color-text-default);
    --background-color: transparent;
    --border-color: var(--jkl-color-border-default);
    --placeholder-color: var(--jkl-color-text-subdued);

    border-radius: var(--jkl-border-radius-s);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;

    position: relative;
    display: flex;
    align-items: center;

    @include jkl.text-style("text-medium"); // eg. Component/Input
    @include jkl.motion;
    transition-property: color, box-shadow, background-color;

    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
    0 0 0 jkl.rem(1px) transparent;

    &:focus-within,
    &:has([data-focused="true"]) {
        --background-color: var(--jkl-color-background-container);
    }

    &[data-invalid="true"]:not(:focus-within):not(:has([data-focused="true"])) {
        --text-color: var(--jkl-color-error-text-default);
        --border-color: var(--jkl-color-error-border-default);
        --placeholder-color: var(--jkl-color-error-text-subdued);
    }

    &:hover,
    &:focus-within,
    &:has([data-focused="true"]) {
        --border-color: var(--jkl-color-border-strong);

        box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
        0 0 0 jkl.rem(1px) var(--border-color);

        @include jkl.forced-colors-mode {
            border: jkl.rem(2px) solid ButtonText;
        }
    }

    @include jkl.keyboard-navigation {
        &:has(.jkl-text-input__input:focus-visible),
        &:has(.jkl-text-area__text-area:focus-visible) {
            @include jkl.focus-outline;
        }
    }

    > .jkl-icon-button:focus-visible {
        @include jkl.focus-outline($offset: -8px);

        @include jkl.forced-colors-mode {
            --border-color: ButtonText;
        }
    }

    > .jkl-text-input-action-button {
        flex-shrink: 0;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        padding: var(--jkl-text-input-action-button-padding);
        height: var(--jkl-text-input-action-button-size);
        width: var(--jkl-text-input-action-button-size);

        // Unngå for langt mellomrom mellom ikon og teksten i feltet
        margin-inline-start: calc(
            var(--jkl-text-input-horizontal-padding) * -1
        );

        .jkl-icon-button__icon {
            height: var(--jkl-text-input-action-button-icon-size);
            width: var(--jkl-text-input-action-button-icon-size);
        }

        &:hover {
            color: var(--jkl-color-text-subdued);

            @include jkl.forced-colors-mode {
                border: jkl.rem(2px) inset ButtonText;
            }
        }
    }

    @include jkl.forced-colors-mode {
        border: jkl.rem(2px) inset ButtonText;
    }
}

@mixin input-styles {
    background: none;
    -webkit-appearance: none;
    color: inherit;

    @include jkl.text-style("text-medium"); // Eg. Component/Input
    @include jkl.reset-outline;
    @include jkl.remove-inner-outer-button;

    @include jkl.forced-colors-mode {
        outline: none;
        border: none;

        &:focus-visible {
            outline: none;
        }
    }

    // Placeholder text style
    &::placeholder {
        opacity: 1;
        color: var(--placeholder-color);
    }
}

@mixin input-separator {
    --inset-size: 1ex;
    --separator-color: var(--jkl-color-border-subdued);

    position: relative;

    &::before {
        content: "";
        position: absolute;
        block-size: calc(100% * var(--inset-size));
        top: 0;
        left: 0;
        inset-block: var(--inset-size);
        border-inline-end: 1px solid var(--separator-color);
        z-index: 1;
        @include jkl.motion("standard", "productive", inset, border-color);
    }

    &:hover, &:focus-within {
        --inset-size: 1px;
        --separator-color: var(--jkl-color-border-subdued);
    }
}