.ffe-inline-button {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 1.375rem;
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ffe-g-font);
    margin: 0 -4px; // Hack to allow box-shadow to float outside content on focus
    transition: all var(--ffe-transition-duration) var(--ffe-ease);
    overflow: hidden;
    padding: 0 var(--ffe-spacing-2xs);
    text-decoration: none;
    font-size: var(--ffe-fontsize-body-text);
    align-items: center;
    user-select: none; /* Forhindrer tekstmarkering */

    &:active {
        transform: scale(0.97);
    }

    &:focus {
        box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
        outline: none;
    }

    &:focus:not(:focus-visible) {
        box-shadow: none;
    }

    &__icon {
        margin-bottom: -2px;
        will-change: transform, opacity;

        .ffe-inline-button--expanded & {
            transform: rotateZ(180deg);
        }

        &--left {
            margin-right: var(--ffe-spacing-2xs);
        }

        &--right {
            margin-left: var(--ffe-spacing-2xs);
        }
    }
}

.ffe-inline-button--back {
    background-color: var(--background-color);
    color: var(--ffe-color-component-button-tertiary-foreground-default);
    padding: var(--ffe-spacing-xs) var(--ffe-spacing-md) var(--ffe-spacing-xs)
        var(--ffe-spacing-sm);

    .ffe-inline-button__label {
        &::after {
            border-bottom: solid 1px currentcolor;
            content: ' ';
            display: block;
            width: 100%;
        }
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            background-color: var(
                --ffe-color-component-button-tertiary-fill-hover
            );
            color: var(--ffe-color-component-button-tertiary-foreground-hover);
        }
    }

    &:active {
        background-color: var(
            --ffe-color-component-button-tertiary-fill-pressed
        );
    }

    .ffe-button__icon {
        color: var(--text-color);
    }
}

.ffe-inline-button--expand {
    --text-color: var(
        --ffe-color-component-button-secondary-foreground-default
    );
    --background-color: var(
        --ffe-color-component-button-secondary-fill-default
    );

    color: var(--text-color);
    background-color: var(--background-color);
    padding: 0 12px;
    margin: 0;
    align-items: center;

    .ffe-inline-button__icon {
        color: var(--text-color);
        transition: transform var(--ffe-transition-duration)
            var(--ffe-ease-in-out-back);
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            --text-color: var(
                --ffe-color-component-button-secondary-foreground-hover
            );
            --background-color: var(
                --ffe-color-component-button-secondary-fill-hover
            );
        }
    }

    &:active {
        --text-color: var(
            --ffe-color-component-button-secondary-foreground-hover
        );
        --background-color: var(
            --ffe-color-component-button-secondary-fill-pressed
        );
    }
}

.ffe-inline-button--tertiary {
    --icon-size-md: 1.5rem; // 24px
    --border-width: 2px;
    --padding-sm: calc(var(--ffe-spacing-2xs) - var(--border-width));
    --padding-md: calc(var(--ffe-spacing-xs) - var(--border-width));
    --padding-lg: calc(12px - var(--border-width));

    align-content: center;
    color: var(--ffe-color-component-button-tertiary-foreground-default);
    flex-wrap: wrap;
    padding: calc(var(--ffe-spacing-xs) - var(--border-width)) var(--ffe-spacing-sm);
    border: 2px solid transparent;
    line-height: calc(var(--icon-size-md) - var(--border-width));

    &.ffe-inline-button--sm {
        padding: var(--padding-sm) 12px;
        font-size: var(--ffe-fontsize-button-sm);

        &.ffe-inline-button--icon-only {
            padding: var(--padding-sm);
        }
    }

    &.ffe-inline-button--md {
        padding: var(--padding-md) var(--ffe-spacing-sm);

        &.ffe-inline-button--icon-only {
            padding: var(--padding-md);
        }
    }

    &.ffe-inline-button--lg {
        padding: var(--padding-lg) var(--ffe-spacing-md);

        &.ffe-inline-button--icon-only {
            padding: var(--padding-md); //Md for å kompansere for hvor stort lg-ikonet er i forhold til lg-knappen
        }
    }

    .ffe-inline-button__icon {
        color: var(--ffe-color-component-button-tertiary-foreground-default);
    }

    .ffe-inline-button__label {
        &::after {
            border-bottom: solid var(--border-width) currentcolor;
            content: ' ';
            display: block;
            width: 100%;
        }
    }

    &.ffe-inline-button--icon-only {
        .ffe-inline-button__label {
            display: flex;
            align-items: center;
            justify-content: center;

            &::after {
                display: none;
            }
        }
    }

    &:focus {
        box-shadow: none;
        border-color: var(--ffe-color-border-interactive-focus);
        color: var(--ffe-color-component-button-tertiary-foreground-default);

        &:not(:focus-visible) {
            border-color: transparent;
        }
    }

    &:active,
    &.ffe-button--pressed {
        transform: scale(0.97);
        background-color: var(--ffe-color-default-feedback-success-strongest);
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            color: var(--ffe-color-component-button-tertiary-foreground-hover);
            background-color: var(
                --ffe-color-component-button-tertiary-fill-hover
            );

            .ffe-inline-button__icon {
                color: var(
                    --ffe-color-component-button-tertiary-foreground-hover
                );
            }
        }
    }

    &:active {
        background-color: var(
            --ffe-color-component-button-secondary-fill-pressed
        );
    }
}