/*==================================================
TABLE OF CONTENTS
====================================================

1. Display
2. Flex
3. Grid
4. Width & Height
5. Position
6. Overflow
7. Visibility
8. Text Alignment
9. Margin
10. Padding
11. Gap
12. Border Radius
13. Opacity
14. Cursor
15. Z-Index

==================================================*/


/*==================================================
DISPLAY
==================================================*/

.d-block{
    display:block;
}

.d-inline{
    display:inline;
}

.d-inline-block{
    display:inline-block;
}

.d-flex{
    display:flex;
}

.d-inline-flex{
    display:inline-flex;
}

.d-grid{
    display:grid;
}

.d-none{
    display:none;
}


/*==================================================
FLEX
==================================================*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/*==================================================
GRID
==================================================*/

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}


/*==================================================
WIDTH & HEIGHT
==================================================*/

.w-25{
    width:25%;
}

.w-50{
    width:50%;
}

.w-75{
    width:75%;
}

.w-100{
    width:100%;
}

.h-100{
    height:100%;
}

.min-vh-100{
    min-height:100vh;
}


/*==================================================
POSITION
==================================================*/

.relative{
    position:relative;
}

.absolute{
    position:absolute;
}

.fixed{
    position:fixed;
}

.sticky{
    position:sticky;
}


/*==================================================
OVERFLOW
==================================================*/

.overflow-hidden{
    overflow:hidden;
}

.overflow-auto{
    overflow:auto;
}

.overflow-visible{
    overflow:visible;
}


/*==================================================
VISIBILITY
==================================================*/

.hidden{
    display:none !important;
}

.visible{
    display:block;
}


/*==================================================
TEXT ALIGNMENT
==================================================*/

.text-left{
    text-align:left;
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}


/*==================================================
MARGIN
==================================================*/

.m-0{margin:0;}

.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}
.mt-7{margin-top:var(--space-7);}
.mt-8{margin-top:var(--space-8);}
.mt-9{margin-top:var(--space-9);}
.mt-10{margin-top:var(--space-10);}
.mt-11{margin-top:var(--space-11);}

.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}
.mb-6{margin-bottom:var(--space-6);}
.mb-7{margin-bottom:var(--space-7);}
.mb-8{margin-bottom:var(--space-8);}
.mb-9{margin-bottom:var(--space-9);}
.mb-10{margin-bottom:var(--space-10);}
.mb-11{margin-bottom:var(--space-11);}

.ml-auto{
    margin-left:auto;
}

.mr-auto{
    margin-right:auto;
}

.mx-auto{
    margin-inline:auto;
}


/*==================================================
PADDING
==================================================*/

.p-0{padding:0;}

.pt-1{padding-top:var(--space-1);}
.pt-2{padding-top:var(--space-2);}
.pt-3{padding-top:var(--space-3);}
.pt-4{padding-top:var(--space-4);}
.pt-5{padding-top:var(--space-5);}
.pt-6{padding-top:var(--space-6);}
.pt-7{padding-top:var(--space-7);}
.pt-8{padding-top:var(--space-8);}
.pt-9{padding-top:var(--space-9);}
.pt-10{padding-top:var(--space-10);}
.pt-11{padding-top:var(--space-11);}

.pb-1{padding-bottom:var(--space-1);}
.pb-2{padding-bottom:var(--space-2);}
.pb-3{padding-bottom:var(--space-3);}
.pb-4{padding-bottom:var(--space-4);}
.pb-5{padding-bottom:var(--space-5);}
.pb-6{padding-bottom:var(--space-6);}
.pb-7{padding-bottom:var(--space-7);}
.pb-8{padding-bottom:var(--space-8);}
.pb-9{padding-bottom:var(--space-9);}
.pb-10{padding-bottom:var(--space-10);}
.pb-11{padding-bottom:var(--space-11);}

.py-1{
    padding-block:var(--space-1);
}

.py-2{
    padding-block:var(--space-2);
}

.py-3{
    padding-block:var(--space-3);
}

.py-4{
    padding-block:var(--space-4);
}

.py-5{
    padding-block:var(--space-5);
}

.py-6{
    padding-block:var(--space-6);
}

.py-7{
    padding-block:var(--space-7);
}

.py-8{
    padding-block:var(--space-8);
}

.py-9{
    padding-block:var(--space-9);
}

.py-10{
    padding-block:var(--space-10);
}

.py-11{
    padding-block:var(--space-11);
}


/*==================================================
GAP
==================================================*/

.gap-1{gap:var(--space-1);}
.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}
.gap-4{gap:var(--space-4);}
.gap-5{gap:var(--space-5);}
.gap-6{gap:var(--space-6);}
.gap-7{gap:var(--space-7);}
.gap-8{gap:var(--space-8);}


/*==================================================
BORDER RADIUS
==================================================*/

.rounded-sm{
    border-radius:var(--radius-sm);
}

.rounded-md{
    border-radius:var(--radius-md);
}

.rounded-lg{
    border-radius:var(--radius-lg);
}

.rounded-full{
    border-radius:var(--radius-pill);
}


/*==================================================
OPACITY
==================================================*/

.opacity-0{
    opacity:0;
}

.opacity-25{
    opacity:.25;
}

.opacity-50{
    opacity:.5;
}

.opacity-75{
    opacity:.75;
}

.opacity-100{
    opacity:1;
}


/*==================================================
CURSOR
==================================================*/

.cursor-pointer{
    cursor:pointer;
}

.cursor-default{
    cursor:default;
}


/*==================================================
Z-INDEX
==================================================*/

.z-dropdown{
    z-index:var(--z-dropdown);
}

.z-fixed{
    z-index:var(--z-fixed);
}

.z-sticky{
    z-index:var(--z-sticky);
}

.z-modal{
    z-index:var(--z-modal);
}

.z-tooltip{
    z-index:var(--z-tooltip);
}