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

@layer jokul.components {
    .jkl-card {
        --padding-s: var(--jkl-unit-05);
        --padding-m: var(--jkl-unit-15);
        --padding-l: var(--jkl-unit-20);
        --padding-xl: var(--jkl-unit-30);
        --border-radius: var(--jkl-border-radius-m);
        --border-color: transparent;
        --border-width: #{jkl.rem(1px)};
        --background-color: transparent;

        position: relative;
        overflow: hidden;
        display: block;
        background-color: var(--background-color);
        border-radius: var(--border-radius);
        box-sizing: border-box;
        padding: var(--padding, var(--padding-s));
        text-decoration: none;
        color: var(--jkl-color-text-default);

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: var(--border-radius);
            border: var(--border-width) solid var(--border-color);

            @include jkl.motion("standard", "snappy", border-color, border-size);
        }

        @include jkl.from-medium-device {
            --padding-s: var(--jkl-unit-10);
            --padding-m: var(--jkl-unit-20);
            --padding-l: var(--jkl-unit-30);
            --padding-xl: var(--jkl-unit-40);
        }

        &[data-padding="s"] {
            --padding: var(--padding-s);
        }

        &[data-padding="m"] {
            --padding: var(--padding-m);
        }

        &[data-padding="l"] {
            --padding: var(--padding-l);
        }

        &[data-padding="xl"] {
            --padding: var(--padding-xl);
        }

        &--high {
            --background-color: var(--jkl-color-background-container-high);
        }

        &--low {
            --background-color: var(--jkl-color-background-container-low);
        }

        &--outlined {
            --border-color: var(--jkl-color-border-separator);
        }

        &[data-clickable="true"] {
            cursor: pointer;

            &:hover {
                --border-color: var(--jkl-color-border-separator-hover);
                --border-width: #{jkl.rem(2px)};
            }

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

    .jkl-card-image {
        --margin: calc(var(--padding, 0) * -1); // Sett negativ margin tilsvarende padding (fra Card)

        width: calc(100% + 2 * var(--padding, 0));
        aspect-ratio: var(--image-aspect-ratio, 3/2);
        margin-inline: var(--margin, 0);
        object-fit: cover;

        &--top {
            margin-top: var(--margin, 0);
        }

        &--bottom {
            margin-bottom: var(--margin, 0);
        }

        &--full {
            margin-block: var(--margin, 0);
        }
    }
}