/* Special styles to hide the border and </> icon on hover */

.markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget, .cm-lang-base):has(.menu-container):hover {
    border-width: 0;
    outline: 0;
    box-shadow: var(--background-primary) 0 0 0 1px inset !important;
    background-color: transparent !important;
    outline: 1px solid transparent;

    .edit-block-button {
        top: 0em;
        bottom: 0;
        left: 0;
        width: 0.5rem;
        padding: 0;

        cursor: help;

        svg {
            display: none;
        }
    }
}

/* Default style variant */

.menu-container.default {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    border-radius: 6px;
    background-color: var(--background-primary);

    a {
        padding: 0.6em 1em;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.2s ease;
        font-weight: 500;
        border: 1px solid var(--background-modifier-border);
        color: var(--text-normal);

        &:hover {
            color: var(--text-accent);
            /* background-color: var(--background-modifier-hover); */
            border-color: var(--text-accent);
        }
    }
}

/* .menu-file-link
.menu-external-link
.menu-internal-link */

.menu-container {
    transition: 125ms;

    a {
        transition: 125ms;
    }
}

/* Minimal style variant */
.menu-container.minimal {
    display: flex;
    gap: 0.2em;
    flex-wrap: wrap;
    transition: 125ms;


    a {
        padding: 0.4em 0.8em;
        text-decoration: none;
        border-radius: 3px;
        transition: color 0.15s ease;
        font-size: 0.9em;
        font-weight: normal;

        &:hover {
            background-color: var(--background-secondary);
            color: var(--text-accent);
        }
    }

    a.menu-internal-link {
        color: var(--text-accent);

        &:hover {
            color: var(--text-accent-hover);
        }
    }

    a.menu-external-link {
        color: var(--text-faint);

        &:hover {
            color: var(--text-normal);
        }
    }

    a.menu-file-link {
        color: var(--text-faint);

        &:hover {
            color: var(--text-normal);
        }
    }
}

/* Minimal style variant */
.menu-container.slate {
    display: flex;
    gap: 0.2em;
    flex-wrap: wrap;


    a {
        padding: 0.4em 0.8em;
        text-decoration: none;
        border-radius: 3px;
        transition: color 0.15s ease;
        font-size: 0.9em;
        font-weight: normal;
        background-color: var(--background-secondary);
        border: 1px solid var(--background-secondary);
        color: var(--text-faint);


        &:hover {
            background-color: var(--background-secondary);
            color: var(--text-accentl);
            border: 1px solid var(--text-accent);
        }
    }

}


.menu-container.horizon {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    border-radius: 8px;
    background-color: var(--background-primary);

    a {
        font-family: 'Space Grotesk', Inter, sans-serif;
        font-size: var(--fs, 1.1rem);
        white-space: nowrap;
        color: var(--cyan-500, darkcyan);
        text-align: center;
        text-decoration: none;
        text-align: center;

        border: 1px solid var(--cyan-500, darkcyan);
        border-radius: 3px;
        padding-block: var(--size-2, 0.5em);
        padding-inline: var(--size-3, 2em);
        transition: 250ms;

        &:hover {
            color: var(--text-accent);
            /* background-color: var(--background-modifier-hover); */
            border: 1px solid var(--orange-500, darkorange);
            color: var(--orange-500, darkorange);
        }
    }
}

.menu-container.aether {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(150px, 1fr));

    gap: 0.5em;

    a {
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        padding: 0.5em 1em;
        border-radius: 8px;

        border: 1px solid var(--background-modifier-border);
    }
}