/* positions basis */
.position-static { position: static; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-relative { position: relative; }
.position-sticky { position: sticky; top: 0; left: 0; }

/* Z - INDEX */
.z-l0 { z-index:0; }
.z-l1 { z-index:1; }
.z-l2 { z-index:10; }
.z-l3 { z-index:100; }
.z-l4 { z-index:1000; }
.z-l5 { z-index:10000; } 
.z-l6 { z-index:100000; }

/*   hauteurs de bloc  */
.vw-100 { width:100vw; }
.vw-75 { width:75vw; }
.vw-66 { width:66.666vw; }
.vw-50 { width:50vw; }
.vw-33 { width:33.333vw; }
.vw-25 { width:25vw; }
.vh-100 { height: 100vh; }
.vh-75 { height: 75vh; }
.vh-66 { height: 66.666vh; }
.vh-50 { height: 50vh; }
.vh-33 { height: 33.333vh; }
.vh-25 { height: 25vh; }
.h-0 { height: 0; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* types d'affichage */
@mixin write-display($media: '') {
.d#{$media}-none { display: none !important; }
.d#{$media}-block { display: block; }
.d#{$media}-inline { display: inline; }
.d#{$media}-inline-block { display: inline-block; }
.d#{$media}-table { display: table; }
}
@include write-display();

/* margins, paddings */
@mixin write-margin-padding($media: '') {
    @each $nom, $size in $base_width {
        .m#{$media}-#{$nom} { margin: $size;}
    .mt#{$media}-#{$nom} { margin-top: $size !important; }
.mb#{$media}-#{$nom} { margin-bottom: $size !important; }
.mr#{$media}-#{$nom} { margin-right: $size !important; }
.ml#{$media}-#{$nom} { margin-left: $size !important; }
.mx#{$media}-#{$nom} { 
    margin-left: $size !important; 
    margin-right: $size !important;
}
.my#{$media}-#{$nom} { 
    margin-top: $size !important; 
    margin-bottom: $size !important;
}
.p#{$media}-#{$nom} { padding: $size; }  
.pt#{$media}-#{$nom} { padding-top: $size !important; }
.pb#{$media}-#{$nom} { padding-bottom: $size !important; }
.pr#{$media}-#{$nom} { padding-right: $size !important; }
.pl#{$media}-#{$nom} { padding-left: $size !important; }
.px#{$media}-#{$nom} { 
    padding-left: $size !important; 
    padding-right: $size !important;
}
.py#{$media}-#{$nom} { 
    padding-top: $size !important; 
    padding-bottom: $size !important;
}
}
}

@include write-margin-padding();

/* borders */
$b: 1px; 
@for $i from 0 through 5 { 
    .border-#{$i} { 
        border-color: $gray-50-color;
        border-width: $b*$i;
        border-style: solid;
    }
    .border-top-#{$i} {
        border-top: #{$b*$i} solid $gray-50-color !important;
    }
    .border-bottom-#{$i} {
        border-bottom: #{$b*$i} solid $gray-50-color !important;
    }
    .border-left-#{$i} {
        border-left: #{$b*$i} solid $gray-50-color !important;
    }
    .border-right-#{$i} {
        border-right: #{$b*$i} solid $gray-50-color !important;
    }
}

.border-rounded-1 {
    border-radius:0.3rem;
}
.border-rounded-2 {
    border-radius:0.5rem;
}
.border-rounded-3 {
    border-radius:1rem;
}

.border-circle {
    border-radius:50%;
}

/* Listes */
ul.cleanlist, ol.cleanlist {
    padding: 0;
    margin: 0;
}

ul.cleanlist li, ol.cleanlist li {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

/* scroll fins */
.thinscrollx {
    overflow-x: scroll;
    scrollbar-color: #bbb #fff;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}
.thinscrolly {
    overflow-y: scroll;
    scrollbar-color: #bbb #fff;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}