@use "../../../jkl";
@use "../../icon/base-styles" as icon;

.jkl-navlink--beta {
    --background-color: var(--jkl-color-background-container);
    --border-color: transparent;
    --border-radius: var(--jkl-border-radius-s);

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 2em;
    color: inherit;
    text-decoration: none;
    background-color: var(--background-color);
    padding: var(--jkl-spacing-s);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);

    @include jkl.text-style("paragraph-medium");
    @include jkl.motion("easeInBounceOut", "productive");

    transition-property: background-color;

    .title,
    .description {
        grid-column: 1;
    }

    &:has(.description) {
        .title {
            font-weight: bold;
        }
    }

    &::after {
        content: "arrow_forward" / "";
        grid-column: 2;
        grid-row: 1 / span 999;
        translate: 0;

        @include icon.base-styles;
        @include jkl.motion("easeInBounceOut", "productive");
        transition-property: translate;
    }

    &[data-outlined="true"] {
        --background-color: transparent;
        --border-color: var(--jkl-color-border-subdued);
    }

    &:hover,
    &:focus-visible {
        background-color: var(--jkl-color-background-container-accent);

        &::after {
            translate: 4px 0;
        }
    }

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