@mixin border-medium{
    border: 2px solid;
}

@mixin cursor{
    cursor: pointer;
    *{
        cursor: pointer;
    }
}

@mixin rotate{
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@mixin select-none{
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;
}

@mixin over-hidden{
    overflow: hidden;
}

@mixin over-scroll{
    overflow: scroll;
}

@mixin over-auto{
    overflow: auto;
}

@mixin border-dashed{
    border-style: dashed;
}
@mixin carre-wd-hgt($px){
    height: $px;
    width: $px;
}
/* ---------------------------- TEXTE  ------------------------------------------------ */
@mixin text-shadow{
    text-shadow: black 0.1em 0.1em 0.2em;
}

@mixin text-mini{
    @media screen and (min-width: 1200px)
    {
        font-size: 12px;
    }
    @media screen and (min-width: 915px) and (max-width: 1200px)
    {
        font-size: 10px;
    }
    @media screen and (max-width: 915px)
    {
        font-size: 8px;
    }
}

@mixin text-small{
    @media screen and (min-width: 1200px)
    {
        font-size: 14px;
    }
    @media screen and (min-width: 915px) and (max-width: 1200px)
    {
        font-size: 12px;
    }
    @media screen and (max-width: 915px)
    {
        font-size: 10px;
    }
}

@mixin text-medium{
    @media screen and (min-width: 1200px)
    {
        font-size: 18px;
    }
    @media screen and (min-width: 915px) and (max-width: 1200px)
    {
        font-size: 16px;
    }
    @media screen and (max-width: 915px)
    {
        font-size: 14px;
    }
}

@mixin text-large{
    @media screen and (min-width: 1200px)
    {
        font-size: 24px;
    }
    @media screen and (min-width: 915px) and (max-width: 1200px)
    {
        font-size: 22px;
    }
    @media screen and (max-width: 915px)
    {
        font-size: 20px;
    }
}

@mixin text-h1{
    @media screen and (min-width: 1200px)
    {
        font-size: 45px;
    }
    @media screen and (min-width: 915px) and (max-width: 1200px)
    {
        font-size: 32px;
    }
    @media screen and (max-width: 915px)
    {
        font-size: 25px;
    }
}

@mixin linear-gradient($direction, $color-first, $color-stop) {
  background-image: -webkit-linear-gradient($direction, $color-first, $color-stop);
  background-image: linear-gradient($direction, $color-first, $color-stop);
}

.h-87-vh{
    height: 87vh;
}

.border-medium{
    @include border-medium;
    @include border-cl($cl-white);
}

.border-dashed{
    @include border-dashed;
}

.pointer{
    @include cursor;
}

.over-hidden{
    @include over-hidden;
}

.over-scroll{
    @include over-scroll;
}

.over-auto{
    @include over-auto;
}

/* ------------------------     TEXTE    ------------------------------------- */
.text-shadow{
    @include text-shadow;
}

.text-mini{
    @include text-mini;
}

.text-small{
    @include text-small;
}

.text-medium{
    @include text-medium;
}

.text-large{
    @include text-large;
}

.text-h1{
    @include text-h1;
}

.select-none{
    @include select-none;
}

/* ------------------------     IMAGES    ------------------------------------- */

/* remplissage pointillé auto */
img.thumbnail{
    max-height: 75px;
    max-width: 75px;
}

/* Rotation image 180° */
img.img-flip{
    @include rotate;
}

.none{
    display: none;
}
.hidden{
    visibility: hidden;
}

.carre-60{
   @include carre-wd-hgt(60px);
}

.carre-55{
   @include carre-wd-hgt(55px);
}

.carre-50{
   @include carre-wd-hgt(50px);
}

.carre-45{
   @include carre-wd-hgt(45px);
}

.carre-40{
   @include carre-wd-hgt(40px);
}

.carre-35{
   @include carre-wd-hgt(35px);
}

.carre-30{
   @include carre-wd-hgt(30px);
}

.carre-25{
    @include carre-wd-hgt(25px);
}

.carre-20{
    @include carre-wd-hgt(20px);
}

/* ------------------------     PASTILLE    ------------------------------------- */
div.etat_ouvert{
    background: $cl-white;
}

div.etat_en_cours{
    background: $cl-bleu-clair;
}

div.etat_suspendu{
    background: $cl-orange;
}

div.etat_clos{
    background: $cl-vert;
}

div.etat_annule{
    background: $cl-rouge;
}

div.div_etat{
    &:hover{
        border: 1px white solid;
    }
    @include cursor;
    @include carre-wd-hgt(20px);
    border-radius: 20px;
    margin: 5px;
}

/* ------------------------     MODAL    ------------------------------------- */
.modal-xxl{
    @media screen and (min-width: 1700px)
    {
        max-width: 1600px;
    }
    @media screen and (min-width: 1400px) and (max-width: 1700px)
    {
        max-width: 1300px;
    }
    @media screen and (min-width: 1200px) and (max-width: 1400px)
    {
        max-width: 1140px;
    }
    @media screen and (min-width: 1110px) and (max-width: 1200px)
    {
        max-width: 1100px;
    }
    @media screen and (min-width: 1040px) and (max-width: 1110px)
    {
        max-width: 1000px;
    }
    @media screen and (min-width: 915px) and (max-width: 1040px)
    {
        max-width: 900px;
    }
    @media screen and (min-width: 720px) and (max-width: 915px)
    {
        max-width: 700px;
    }
    @media screen and (max-width: 720px)
    {
        max-width: 500px;
    }
}