/**
 * layout
 */

/* it depends, it exceeds (french joke) */
%reset-responsive-height-max-width {
    height: auto;
    max-width: 100%;
}

blockquote,
code,
pre,
textarea,
input,
svg {
    @extend %reset-responsive-height-max-width;
}

%reset-responsive-max-width-only {
    max-width: 100%;
}

@if $use-height-auto-td==true {
    td {
        @extend %reset-responsive-height-max-width;
    }
}
@else {
    td {
        @extend %reset-responsive-max-width-only;
    }
}

@if $use-height-auto-img==true {
    img {
        @extend %reset-responsive-height-max-width;
    }
}
@else {
    img {
        @extend %reset-responsive-max-width-only;
    }
}
@if $use-height-auto-table==true {
    table {
        @extend %reset-responsive-height-max-width;
    }
}
@else {
    table {
        @extend %reset-responsive-max-width-only;
    }
}

/* no reset on embed, object & video, some players don't like */


.hauto {
    height: auto;
}

/* useful to manage floats */
/* containing floats */
.mod,
.scroll-if-needed {
    overflow: auto;
}

.scroll-horizontal-if-needed {
    overflow-x: auto;
}

.mod--hidden,
.no-scroll {
    overflow: hidden;
}

.scroll-smooth-touch {
    -webkit-overflow-scrolling: touch;
}

/* some floattings */
.left {
    float: left;
}

.right {
    float: right;
}

@if $rtl-option==true {

    /* RTL */
    [dir="rtl"] .left {
        float: right;
    }

    [dir="rtl"] .right {
        float: left;
    }
}

/* clear floats */
.clear {
    clear: both;
}

@if $use-clearleft_right==true {
    .clearleft {
        clear: left;
    }

    .clearright {
        clear: right;
    }

    @if $rtl-option==true {

        /* RTL */
        [dir="rtl"] .clearleft {
            clear: right;
        }

        [dir="rtl"] .clearright {
            clear: left;
        }
    }
}

@if $use-clearhidden==true {
    .clearhidden {
        clear: both;
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
}

@if $use-clearfix==true {
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

/* gut: "spacing" empty div */
.gut {
    height: 1px;
}

/* table-design in CSS */
.row {
    display: table;
    table-layout: fixed;
}

.inline-row {
    display: inline-table;
    table-layout: fixed;
}

.line {
    display: table-row;
}

.col {
    display: table-cell;
    vertical-align: top;
}

.col-noalign {
    display: table-cell;
}

/* alignments */
.aligntop {
    vertical-align: top;
}

.alignbottom {
    vertical-align: bottom;
}

.alignmiddle {
    vertical-align: middle;
}

.alignbaseline {
    vertical-align: baseline;
}

.alignsub {
    vertical-align: sub;
}

/* block */
.bl {
    display: block;
}

.inline {
	display: inline;
}

/* inline-block, useful for grids, and not only */
.inbl {
    display: inline-block;
}

/* grid = element of inline-grid */
.grid {
    @extend .inbl;
    @extend .aligntop;
}

/* to relativize */
.relative {
    position: relative;
}

/* centered block */
.center {
    margin-left: auto;
    margin-right: auto;
}

/* to absolute */
.absolute {
    position: absolute;
    z-index: 1;
}
.z667 {
	z-index: 667;
}

/* to centered absolute */
.centered-absolute {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centered-absolute-horizontal {
	left: 50%;
    transform: translate(-50%, 0%);
}

.covered-absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* to top right */
.top-right {
    top: 0;
    right: 0;
}

.bottom {
	bottom: 0;
}

@if $rtl-option==true {
    [dir="rtl"] {
        .top-right {
            left: 0;
            right: auto;
        }
    }
}

.right-icon,
.right-text {
    top: 0;
    right: .5em;
	height: $default-height-fields; // height of field
	align-content: center;
}
.right-text {
	right: 1em;
}
.right-text-inner {
	padding-bottom: .2rem;
}

@if $rtl-option==true {
    [dir="rtl"] {
        .right-icon,
		.right-text {
            left: .5em;
            right: auto;
		}
		.right-text {
			left: 1em;
		}
    }
}



.fixed {
    position: fixed;
}


.sticky {
	&-top,
	&-bottom {
		position: sticky;
		z-index: 1;
	}

	&-top {
		top: 0;
	}

	&-bottom {
		bottom: 0;
	}
}

/* hardware-acceleration activation */
.hardware-accelerated {
    @include vendor-prefix(transform, translateZ(0));
}

/* block widths */
.w0 {
    width: 0;
}

.w1 {
    width: 1%;
}

.w2 {
    width: 2%;
}

.w3 {
    width: 3%;
}

.w5 {
    width: 5%;
}

.w10 {
    width: 10%;
}

.w15 {
    width: 15%;
}

.w20 {
    width: 20%;
}

.w25 {
    width: 25%;
}

.w30 {
    width: 30%;
}

.w33 {
    width: 33.333%;
}

.w40 {
    width: 40%;
}

.w45 {
    width: 45%;
}

.w49 {
    width: 49%;
}

.w50 {
    width: 50%;
}

.w60 {
    width: 60%;
}

.w66 {
    width: 66.666%;
}

.w70 {
    width: 70%;
}

.w75 {
    width: 75%;
}

.w80 {
    width: 80%;
}

.w90 {
    width: 90%;
}

.w95 {
    width: 95%;
}

.w100 {
    width: 100%;
}

/* here you may add px widths */
$list-width-px: 40, 50, 70, 150, 200, 500 !default;
// ex .w500p { width: 500px; }

@each $width in $list-width-px {
    .w#{$width}p {
        width: #{$width}px;
    }
}

/* here you may add rem widths */
$list-width-rem: 33 !default; // say 33
// ex .w500p { width: 500px; }

@each $width in $list-width-rem {
    .w#{$width}r {
        width: #{$width}rem;
    }
}

/* here you may add em widths */
$list-width-em: 2, 6, 8, 10, 11, 13, 14, 16 !default;
// ex .w16e { width: 16em; }

@each $width in $list-width-em {
    .w#{$width}e {
        width: #{$width}em;
    }
}

/* max-block widths */

/* here you may add max-widths % */
$list-max-widths: 50, 60, 80, 100 !default;
@each $max-width in $list-max-widths {
    .mw#{$max-width} {
        max-width: #{$max-width * 1%};
    }
}

/* here you may add pixel max-widths */
$list-max-width-px: 100, 650 !default;

@each $max-width in $list-max-width-px {
    .mw#{$max-width}p {
        max-width: #{$max-width}px;
    }
}

/* here you may add ch max-widths */
$list-max-width-ch: 70 !default;

@each $max-width in $list-max-width-ch {
    .mw#{$max-width}ch {
        max-width: #{$max-width}ch;
    }
}

/* here you may add em max-widths */
$list-max-width-em: 5, 7, 8, 13, 15, 18, 30, 37, 40, 50 !default;

@each $max-width in $list-max-width-em {
    .mw#{$max-width}e {
        max-width: #{$max-width}em;
    }
}

$list-min-width-em: 1.4, 3, 5, 14, 35 !default;

@each $min-width in $list-min-width-em {
    $fragment-class: str-replace(inspect($min-width), '.', '-'); // inspect to convert to string

    .min-w#{$fragment-class}e {
        min-width: #{$min-width}em;
    }
}


$list-min-height-em: 5, 16 !default;

@each $min-height in $list-min-height-em {
    .min-h#{$min-height}e {
        min-height: #{$min-height}em;
    }
}


.h100 {
    height: 100%;
}

.h100v {
    height: 100vh;
}

/* margins */
.mt1r {
    margin-top: 1rem;
}

.mt0-5r {
    margin-top: .5rem;
}

.mr0-5r {
    margin-right: .5rem;
}

$list-margins: m, mt, mr, mb, ml !default;
$list-margins-values: 0, 0.1, 0.25, 0.4, 0.5, 0.6, 0.75, 1, 1.5, 2, 4 !default; // specify 2.5 if needed

@include margin-generator($list-margins, $list-margins-values);

.mtauto {
    margin-top: auto;
}

.mrauto {
    margin-right: auto;
}

.mbauto {
    margin-bottom: auto;
}

.mlauto {
    margin-left: auto;
}

.mauto {
    margin: auto;
}

@if $rtl-option==true {
    [dir="rtl"] {
        .mrauto {
            margin-right: 0;
            margin-left: auto;
        }

        .mlauto {
            margin-left: 0;
            margin-right: auto;
        }
    }
}

/* paddings */

$list-paddings: p, pt, pr, pb, pl !default;
$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 !default; // specify 2.5 if needed

@include padding-generator($list-paddings, $list-paddings-values);

/* to hide text with accessibility… a11y */
.invisible,
.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
	width: 1px;
	top: 0; // needed for Safari dumb and 💩 behaviour
}

.nonvisible {
    visibility: hidden;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-30 {
    opacity: 0.3;
}

.filter-blur {
    filter: blur(4px);
}

.hidden,
[hidden],
.display-on-darkmode {
    display: none;
}

/* hidden everywhere */
.nodesktop {
    display: none;
}

/* hidden on desktop */
/*.noprint   {} /* hidden on print */
/*.notablet  {} /* hidden on tablets */
/*.nomobile  {} /* hidden on mobile */

.list-2columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;

    & > * {
        -webkit-column-break-inside: avoid;
        /* Chrome, Safari, Opera */
        page-break-inside: avoid;
        /* Firefox */
        break-inside: avoid;
        /* IE 10+ */
        break-inside: avoid-column;
        /* W3C */
    }
}

/*
 * ratio container (for responsive iframes/videos/etc.)
 */
[class*="ratio-container-"] {
    width: 100%;
    height: 0;
    @extend .relative;
}

.ratio-container-square {
    padding-top: 100%;
}

.ratio-container-16-9 {
    padding-top: 56.25%;
}

.ratio-container-5-1 {
    padding-top: 20%;
}

.inner-ratio-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/*
 * Flexbox helpers, also name tartiflex
 */
.inline-flex,
.inline-flex-vcenter {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex,
.flex-flex-children,
.flex-noMinChildren {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.flex-spacebetween {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-spacearound {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
}

.flex-justify-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.flex-justify-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.flex-justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.flex-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

/* fix aspect ratio */
.flex > *,
.no-min-dims {
  min-height: 0;
  min-width: 0;
}

.flex-flex-children > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.inline-flex-vcenter > *,
.flex-item-centered-vert {
    margin-top: auto;
    margin-bottom: auto;
    align-self: center;
}

.flex-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
}

.flex-items-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -ms-grid-row-align: baseline;
    align-items: baseline;
}

.flex-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-grid-row-align: flex-start;
    align-items: flex-start;
}

.flex-items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
}

.flex-items-stretch {
    align-items: stretch;
}

.flex-item-fluid {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
}

.flex-item-fluid-auto {
    flex: 1 1 auto;
}

.flex-item-noshrink {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.flex-item-nogrow {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

.flex-item-grow-2 {
    -webkit-box-flex: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
}

.flex-item-noflex {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
}

.flex-self-vcenter {
    -ms-flex-item-align: center;
    align-self: center;
}

.flex-self-start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.flex-self-end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.flex-autogrid {
    margin: 0 -0.5em;
    @extend .flex;
    @extend .flex-spacebetween;
}

.flex-autogrid-item {
    @extend .flex-item-fluid;
    padding: 0 0.5em 1em;
}

.flex-autogrid-item.pb0 {
    padding-bottom: 0;
}

.inline-grid-container {
	display: inline-grid;
}

/* RTL/others */
.mirror,
[dir="rtl"] .on-rtl-mirror {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.rotateX-180 {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.rotateZ-90 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.rotateZ-270 {
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
}

/* increase surface click/tap */
.increase-surface-click::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.no-pointer-events,
.no-pointer-events-children * {
    pointer-events: none;
}