@use "media" as *;

.container {
    &-wide {
        max-width: (calc(var(--container-width-wide) + var(--container-padding-x) * 2));
        margin-inline: auto;
        padding-inline: var(--container-padding-x);
    }

    &-mid {
        max-width: (calc(var(--container-width-mid) + var(--container-padding-x) * 2));
        margin-inline: auto;
        padding-inline: var(--container-padding-x);
    }

    &-tight {
        max-width: (calc(var(--container-width-tight) + var(--container-padding-x) * 2));
        margin-inline: auto;
        padding-inline: var(--container-padding-x);
    }
}

.visually-hidden {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0px !important;
    height: 0px !important;
    display: block !important;
    margin-left: -10000px !important;
    background: transparent !important;
    font-size: 0 !important;
}

.hidden-desktop-wide {
    @include desktop-wide {
        display: none;
    }
}

.visible-desktop-wide {
    @include desktop-wide-above {
        display: none;
    }
}

.hidden-desktop {
    @include desktop {
        display: none;
    }
}

.visible-desktop {
    @include desktop-above {
        display: none;
    }
}

.hidden-tablet {
    @include tablet {
        display: none;
    }
}

.visible-tablet {
    @include tablet-above {
        display: none;
    }
}

.hidden-mobile {
    @include mobile {
        display: none;
    }
}

.visible-mobile {
    @include mobile-above {
        display: none;
    }
}

.none {
    display: none !important;
}

body:has(dialog[open]) {
    overflow: hidden
}