/*
Base
==================================================
Contains global base styles for all pages
*/

html {
    // used by backdrop util to override body scroll behaviour
    &.no-scroll {
        position: relative;
        overflow: hidden;
    }

    // used by viewport detection helper to determine the current viewport
    &::before {
        position: absolute;
        top: -100%;
        font-size: 0;

        @include media-breakpoint-only(xs) {
            content: 'xs';
        }
        @include media-breakpoint-only(sm) {
            content: 'sm';
        }
        @include media-breakpoint-only(md) {
            content: 'md';
        }
        @include media-breakpoint-only(lg) {
            content: 'lg';
        }
        @include media-breakpoint-only(xl) {
            content: 'xl';
        }
        @include media-breakpoint-only(xxl) {
            content: 'xxl';
        }
    }

    /* stylelint-disable selector-class-pattern -- allow BEM here as it is a generated class name from the administration
     * sw-text-editor component adds a column selector to configure the width of table columns
     * this must no be shown in the storefront as it breaks table layouts
     */

    .sw-text-editor-table {
        .sw-text-editor-table__col {
            border: 1px solid $black;
            padding: 8px;
            text-align: left;
        }

        .sw-text-editor-table__col-selector {
            display: none;
        }
    }

    .sw-text-editor-table__head {
        td {
            background: $gray-200;
        }
    }
    /* stylelint-enable selector-class-pattern */
}
