@import '../00_Abstracts/index';

$breakpoints: (xl, lg, md, sm, xs, xxs, print);

.full-width {
    @include full-width();
}

.skip-to-content {
    position: absolute;
    transform: translateX(-110%);
    @include m(md);
    @include z-index(xl);
    @include transition();

    &:focus,
    &:focus-within {
        transform: translateX(0%);
        @include transition();
    }
}

.display-block {
    display: block !important;
}

.display-inline {
    display: inline !important;
}

.display-inline-block {
    display: inline-block !important;
}

.display-inline-flex {
    display: inline-flex !important;
}

.display-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

.space-between {
    justify-content: space-between !important;
}

.space-around {
    justify-content: space-around !important;
}

.space-evenly {
    justify-content: space-evenly !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-center {
    align-items: center !important;
}

.align-stretch {
    align-items: stretch !important;
}

[hidden] {
    display: none !important;
}

.sr-only {
    @include screen-reader-only();
}

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

.show {
    display: block !important;
}

.hide {
    display: none !important;
}

@each $key,
$value in $breakpoints {
    @include mq($key) {
        .#{$key}\:full-width {
            @include full-width(true);
        }

        .#{$key}\:display-block {
            display: block !important;
        }

        .#{$key}\:display-inline {
            display: inline !important;
        }

        .#{$key}\:display-inline-block {
            display: inline-block !important;
        }

        .#{$key}\:display-inline-flex {
            display: inline-flex !important;
        }

        .#{$key}\:display-flex {
            display: flex !important;
        }

        .#{$key}\:flex-wrap {
            flex-wrap: wrap !important;
        }

        .#{$key}\:flex-nowrap {
            flex-wrap: nowrap !important;
        }

        .#{$key}\:flex-row {
            flex-direction: row;
        }

        .#{$key}\:flex-row-reverse {
            flex-direction: row-reverse !important;
        }

        .#{$key}\:flex-column {
            flex-direction: column !important;
        }

        .#{$key}\:flex-column-reverse {
            flex-direction: column-reverse !important;
        }

        .#{$key}\:space-between {
            justify-content: space-between !important;
        }

        .#{$key}\:space-around {
            justify-content: space-around !important;
        }

        .#{$key}\:space-evenly {
            justify-content: space-evenly !important;
        }

        .#{$key}\:justify-center {
            justify-content: center !important;
        }

        .#{$key}\:justify-start {
            justify-content: flex-start !important;
        }

        .#{$key}\:justify-end {
            justify-content: flex-end !important;
        }

        .#{$key}\:align-start {
            align-items: flex-start !important;
        }

        .#{$key}\:align-end {
            align-items: flex-end !important;
        }

        .#{$key}\:align-center {
            align-items: center !important;
        }

        .#{$key}\:align-stretch {
            align-items: stretch !important;
        }

        .#{$key}\:sr-only {
            @include screen-reader-only();
        }

        .#{$key}\:visible {
            visibility: hidden !important;
        }

        .#{$key}\:invisible {
            visibility: hidden !important;
        }

        .#{$key}\:show {
            display: none !important;
        }

        .#{$key}\:show {
            display: initial !important;
        }

        .#{$key}\:hide {
            display: none !important;
        }
    }
}