.menu-bar {
    .menu-title {
        display: flex;
        justify-content: center;

        &::before {
            content: "";

            aspect-ratio: 1 / 2;
            background-size: 90% 90%;
        }
    }

    container-type: inline-size;

    @container (min-width: 30em) {
        .menu-title {
            gap: 1ch;

            &::before {
                aspect-ratio: 1;
            }
        }
    }
}

.menu-bar .menu-title::before,
.logo {
    background-image: url(./?mortyurl=https%3A%2F%2Fgit-gamble.is-cool.dev%2Fassets%2Flogo%2Fgit-gamble.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.logo {
    aspect-ratio: 1;
    background-size: contain;

    &.mini {
        height: 1lh;
        display: inline-block;
        vertical-align: middle;

        &.time-keeper {
            height: 1.3lh;
        }
    }

    &.big {
        height: 5lh;
    }

    &.front {
        background-image: url(./?mortyurl=https%3A%2F%2Fgit-gamble.is-cool.dev%2Fassets%2Flogo%2Fgit-gamble.svg#front);
    }

    &.back {
        background-image: url(./?mortyurl=https%3A%2F%2Fgit-gamble.is-cool.dev%2Fassets%2Flogo%2Fgit-gamble.svg#back);
    }

    &.time-keeper {
        background-image: url(./?mortyurl=https%3A%2F%2Fgit-gamble.is-cool.dev%2Fassets%2Flogo%2Fgit-gamble.svg#time-keeper);
    }
}

.cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;

    .button {
        padding: 0.8em 1.2em;
        border-radius: 0.9em;
        font-weight: bold;
        cursor: pointer;

        &.primary {
            background-color: var(--links);
            color: var(--bg);
            background-color: var(--sidebar-bg);
            color: var(--sidebar-fg);
        }

        &.secondary {
            text-decoration: underline;
        }
    }
}

summary {
    cursor: pointer;
}

@media not (prefers-reduced-motion: reduce) {
    details {
        --transition-duration: .25s;

        &::details-content {
            transition: transform var(--transition-duration);
            transform: scaleY(0);
            transform-origin: top center;
        }

        &[open]::details-content {
            transform: scaleY(1);
        }

        /*
        spell-checker:words Roko Buljan
        Source - https://stackoverflow.com/a/79142029
        Posted by Roko C. Buljan, modified by community. See post 'Timeline' for change history
        Retrieved 2026-01-10, License - CC BY-SA 4.0
        */
        @supports (transition-behavior: allow-discrete) and (height: calc-size(auto, size)) {
            &::details-content {
                transform: none; /* remove legacy transition */

                transition:
                    height var(--transition-duration),
                    content-visibility var(--transition-duration) allow-discrete;
                overflow: hidden;
                height: 0;
            }

            &[open]::details-content {
                height: calc-size(auto, size);
            }
        }
    }

    @view-transition {
        navigation: auto;
    }
}