@charset "UTF-8";
@use "sass:string";
@use "../../core/jkl";

@layer jokul.components {
    .jkl-button {
        --jkl-button-font-size: var(--jkl-typography-body-base-font-size);
        --jkl-button-line-height: var(--jkl-typography-body-base-line-height);
        --jkl-button-padding-block: var(--jkl-unit-10);
        --jkl-button-padding-text: var(--jkl-unit-30);
        --jkl-button-padding-icon: var(--jkl-unit-20);
        --jkl-button-padding-icon-button: var(--jkl-unit-10);
        --jkl-button-tertiary-padding-icon: var(--jkl-unit-05);
        --jkl-button-text-ink-offset: 0.1em;
        --jkl-icon-weight: var(--jkl-icon-weight-bold);
        --text-color: var(--jkl-color-text-default);
        --background-color: transparent;
        --border-radius: 0;
        --border-width: #{jkl.rem(1px)}; // For secondary og tertiary button

        display: inline-block;

        @include jkl.text-style("text-medium") {
            font-weight: jkl.$typography-weight-bold;
        }

        cursor: pointer;
        user-select: none;
        background: var(--background-color);
        color: var(--text-color);
        border: unset;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;

        border-radius: var(--border-radius);
        padding-inline: var(--jkl-button-padding-text);
        padding-block: var(--jkl-button-padding-block);
        position: relative;
        overflow: hidden;
        max-width: 100%;
        animation: a 0.3s linear;

        @include jkl.motion("standard", "productive", background-color);

        &:has(.jkl-button__text) {
            min-width: 9.5ch;
        }

        &:has(.jkl-icon:first-child) {
            padding-inline-start: var(--jkl-button-padding-icon);
        }

        &:has(.jkl-icon:last-child) {
            padding-inline-end: var(--jkl-button-padding-icon);
        }

        &:has(.jkl-icon:first-child):has(.jkl-icon:last-child) {
            padding-inline: var(--jkl-button-padding-icon-button);
        }

        &__label {
            @include jkl.motion("standard", "expressive", translate);

            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: jkl.$unit-02;
            pointer-events: none;
        }

        &__loader {
            @include jkl.motion("standard", "expressive", opacity, translate);

            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% 350%;
            opacity: 0;
            pointer-events: none;
        }

        &__text {
            // Håndter tekster som er lenger enn knappen
            // Knappen vokser til teksten, men kan f.eks. begrenses
            // av sidebredde på mobil
            display: block;
            width: 100%;
            max-width: 100%;
            // Gir diakritiske tegn litt ekstra plass i tekstboksen uten
            // å endre knappens totale høyde.
            padding-block-start: var(--jkl-button-text-ink-offset);
            margin-block-start: calc(var(--jkl-button-text-ink-offset) * -1);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &[data-loading="true"] &__label {
            --button-loading-offset: calc(-100% - var(--jkl-button-padding-block) * 2 - var(--jkl-button-text-ink-offset));
            translate: 0 var(--button-loading-offset);
        }

        &[data-loading="true"] &__loader {
            translate: -50% -50%;
            opacity: 1;
        }

        &:focus-visible {
            @include jkl.focus-outline;
        }

        &:hover {
            background-color: color-mix(in srgb,
                    var(--background-color),
                    var(--text-color) 15%);

            @media (forced-colors: active) {
                @include jkl.focus-outline;
            }
        }

        &--primary,
        &--secondary,
        &--ghost {
            --border-radius: 999px;
        }

        &--primary {
            --background-color: var(--jkl-color-background-action);
            --text-color: var(--jkl-color-text-on-action);

            @media (forced-colors: active) {
                border: calc(var(--border-width) * 2) solid Highlight;
            }
        }

        &--secondary {
            border: var(--border-width) solid var(--text-color);
        }

        &--tertiary {
            border-bottom: var(--border-width) solid var(--text-color);
            padding-inline: var(--jkl-button-tertiary-padding-icon);

            &:has(.jkl-icon:first-child) {
                padding-inline: var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon) * 2);
            }

            &:has(.jkl-icon:last-child) {
                padding-inline: calc(var(--jkl-button-tertiary-padding-icon) * 2) var(--jkl-button-tertiary-padding-icon);
            }
        }
    }
}