@keyframes loading-appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide-element-default {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
    }
}

[disabled]:is(a, button) {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    text-decoration: none !important;
}
[hidden] {
    display: none !important;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
a, button {
    cursor: pointer;
    font-family: inherit;
}
button.themed, a.button-link {
    color: var(--site-background-color);
    background-color: var(--site-foreground-color);
    padding: 12px;
    border-radius: 8px;
    border-bottom: 4px solid rgb(from var(--site-background-color) r g b / 0.5);
    text-decoration: none;
    transition: border-color 0.25s ease-out;
    
    &::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: "";
        background-color: #000;
        opacity: 0;
        transition: opacity 0.25s ease-out;
    }
    
    &:is(:hover, :focus)::before {
        opacity: 0.15;
    }
    &:active::before {
        opacity: 0.35;
    }
}
a.themed, button.link-button {
    appearance: none;
    display: inline-block;
    background: none;
    border: none;
    color: var(--highlight-site-color);
    font-size: 1em;
    padding: 0;
    margin: 0;
    
    &:hover {
        text-decoration: underline;
    }
}
body.no-overflow {
    overflow: hidden;
}
.dynamically-loaded {
    opacity: 0;
    animation: loading-appear 0.4s ease-in forwards;
}
:is(a, button.disabled-link):is(.external-link, .mail-link) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;

    .external-link-icon, .mail-link-icon {
        font-size: 0.85em;
    }

    &:not([data-external-link-icon-location="after"]) .external-link-icon {
        padding-right: 4px;
    }
    &[data-external-link-icon-location="after"] .external-link-icon {
        padding-left: 4px;
    }

    &:not([data-mail-link-icon-location="after"]) .mail-link-icon {
        padding-right: 4px;
    }
    &[data-mail-link-icon-location="after"] .mail-link-icon {
        padding-left: 4px;
    }
}
.hiding-element {
    animation: hide-element-default 0.2s ease-out;
}
.showing-element {
    animation: hide-element-default 0.2s ease-out reverse;
}

.content-wrapper, .content-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    
    &.limited-width {
        max-width: 1400px;
    }
}
.content-wrapper {
    height: 100%;
    width: 100%;
}
.icon:is(.fa-solid, .fa-regular) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    min-height: 1.25em;
    min-width: 1.25em;
    overflow: hidden;
}