/* Page/html-tag helpers */
/* useful for blank pages - especially when used within iframe */
.page--no-flex {
    display: block;
    height: auto;
}

.html--scroll-behavior-auto {
    scroll-behavior: auto;
}
.html--clip-viewport,
.html--clip-viewport > body {
    overflow: hidden;
}

.svg-icon {
    width: 1em;
    height: 1em;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}
.svg-icon:not(.svg-icon--no-fill) {
    fill: currentColor;
    color: currentColor;
}
.svg-icon--md {
    width: 1.5em;
    height: 1.5em;
}

.word-wrap-break {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.lazy-element-link {
    display: block;
}
.lazy-element {
    position: relative;
}
.lazy-element--fade-in {
    opacity: 0;
    transition: 0.3s opacity ease-in-out;
}
.lazy-element--fade-in.lazy-element--rendered {
    opacity: 1;
}
.lazy-element__img {
    position: absolute;
    left: 0;
    top: 0;
}

/* Margins */
.mt-0 {margin-top: 0;}
.mb-0 {margin-bottom: 0;}
.mt-1 {margin-top: 0.75rem;}
.mb-1 {margin-bottom: 0.75rem;}
.mt-2 {margin-top: 1.5rem;}
.mb-2 {margin-bottom: 1.5rem;}
.mt-3 {margin-top: 3rem;}
.mb-3 {margin-bottom: 3rem;}
.mt-4 {margin-top: 4.5rem;}
.mb-4 {margin-bottom: 4.5rem;}
.mt-5 {margin-top: 6rem;}
.mb-5 {margin-bottom: 6rem;}

/* Paddings */
.pt-0 {padding-top: 0;}
.pb-0 {padding-bottom: 0;}
.pt-1 {padding-top: 0.75rem;}
.pb-1 {padding-bottom: 0.75rem;}
.pt-2 {padding-top: 1.5rem;}
.pb-2 {padding-bottom: 1.5rem;}
.pt-3 {padding-top: 3rem;}
.pb-3 {padding-bottom: 3rem;}
.pt-4 {padding-top: 4.5rem;}
.pb-4 {padding-bottom: 4.5rem;}
.pt-5 {padding-top: 6rem;}
.pb-5 {padding-bottom: 6rem;}
.pl-0 {padding-left: 0;}
.pr-0 {padding-right: 0;}
.pl-1 {padding-left: 0.75rem;}
.pr-1 {padding-right: 0.75rem;}
.pl-2 {padding-left: 1.5rem;}
.pr-2 {padding-right: 1.5rem;}

/* align-* classes from BE RTE, hardly configurable, avoid usage */
.text-left,
.align-left {
    text-align: left;
}
.text-center,
.align-center {
    text-align: center;
}
.text-right,
.align-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.text-caps {
    text-transform: uppercase;
}
.text-small {
    font-size: 12px;
}
.text-x-small {
    font-size: 11px;
}
.text-xx-small {
    font-size: 10px;
}

/* text colors */
.c-red {
    color: red;
}

@media ( min-width: 992px ) {
    .text-small {
        font-size: 14px;
    }
}
@media ( min-width: 1200px ) {
    .text-small {
        font-size: 15px;
    }
    .text-x-small {
        font-size: 12px;
    }
    .text-xx-small {
        font-size: 11px;
    }
}
@media ( min-width: 1600px ) {
    .text-small {
        font-size: 16px;
    }
    .text-x-small {
        font-size: 13px;
    }
    .text-xx-small {
        font-size: 12px;
    }
}

.visually-hidden {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
}

/* Fix extbase debugger */
body > .extbase-debugger {
    flex: 1 0 auto;
}
.extbase-debugger-floating {
    z-index: 100000;
}

.vue-hidden {
    display: none;
}