@use "sass:color";
@use "../../core/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: var(--jkl-color-background-input-base);
    --border-color: var(--jkl-color-border-input);
    --placeholder-color: var(--jkl-color-text-subdued);

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

    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-input-focus);
    }

    &[data-invalid="true"]:not(:focus-within):not(:has([data-focused="true"])) {
        --background-color: var(--jkl-color-background-alert-error);
        --text-color: var(--jkl-color-text-on-alert);
        // Vi har ingen god måte å få tak i kun light mode-versjon av subdued
        // så vi bruker tekstfargen med litt gjennomsiktighet
        --placeholder-color: color(from currentColor sRGB r g b / 75%);
    }

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

        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-interactive-hover);

            @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);
    }
}