:root {
    --bottom-base-height: 0;
    --fab-gap: 1rem;
}

body:has(nav.bottom) {
    --bottom-base-height: 4.5rem;
}

dialog {
    &.center {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &.medium {
        inline-size: 75%;
        max-inline-size: 500px;
        block-size: auto;
    }
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.h-100 {
    height: 100%;
}

.h-80 {
    height: 80%;
}

.flex-fill {
    flex: 1;
}

.no-radius {
    border-radius: 0;
}

.fab {
    position: fixed;
    right: var(--fab-gap);
    bottom: calc(var(--fab-gap) + var(--bottom-base-height));
}

.disable-hover-opacity:hover::after {
    opacity: 0 !important;
}