@use '../core' as *;
@use 'sass:map';

a#{$selector-exclude-grid} {
    --icon-size: 1.5em;
    --icon-color: var(--color-link);

    text-decoration: none;
    color: var(--color-link);
    transition: color $transition-default-timing;
    font-weight: var(--text-semibold);

    &:where([href]):hover {
        --icon-color: var(--color-link-hover);

        color: var(--color-link-hover);
    }
}

code#{$selector-exclude-grid} {
    font-size: var(--text-fs-sm);
    padding: 3px;
    padding: 1px 0.375rem;
    font-family: var(--text-monospace-font-family);
    white-space: normal;
    border-radius: var(--radius-sm, 0.375rem);
    background-color: var(--color-bg-code);
    color: var(--color-fg-primary);
    border: 1px solid rgba(black, 0.1);
    font-size: 0.875em;
    font-variant-ligatures: none;
    font-optical-sizing: auto;
    font-weight: 500;

    #{$selector-darkmode} & {
        border-color: rgba(255, 255, 255, 0.1);
        color: var(--color-fg-primary);
        background-color: var(--color-bg-secondary);
    }
}

kbd#{$selector-exclude-grid} {
    display: inline-block;
    margin: 0.1em 0.1em;
    padding: 0.1em 0.6em 0.15em;
    font-size: var(--text-fs-sm);
    font-family: var(--text-font-family);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: inset 0 -2px 0 var(--color-util-gray-200);

    #{$selector-darkmode} & {
        color: var(--color-fg-primary);
        background-color: color-mix(in srgb, var(--color-util-gray-200), var(--color-util-gray-300));
        text-shadow: -1px -1px var(--color-util-gray-50);
        border: 1px solid color-mix(in srgb, var(--color-util-gray-300), var(--color-util-gray-400));
        box-shadow: inset 0 -2px 0 var(--color-util-gray-50);
        font-weight: 500;
    }
}

img#{$selector-exclude-grid},
svg#{$selector-exclude-grid} {
    vertical-align: middle;
}

svg#{$selector-exclude-grid} {
    overflow: hidden;
}
