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

.jkl-navlink--beta {
    --border-radius: 4px;
    --separator: 1px solid var(--jkl-color-border-subdued);

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

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

    &:hover,
    &:focus-visible {
        background-color: color-mix(in srgb,
                currentColor 15%,
                transparent);

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

    &:first-of-type {
        border-start-start-radius: var(--border-radius);
        border-start-end-radius: var(--border-radius);
    }

    &:last-of-type {
        border-end-start-radius: var(--border-radius);
        border-end-end-radius: var(--border-radius);
    }

    &:has(+ .jkl-navlink--beta) {
        border-block-end: var(--separator);
    }
}