@import "../breakpoints";

/**
 * Utilities
 *
 * Utility classes that make life simple.
 *
 *============================================================================*/



/* Flex
 *============================================================================*/

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

.fw-wrap    { flex-wrap: wrap; }
.fw-nowrap  { flex-wrap: nowrap; }
.fw-rev     { flex-wrap: wrap-reverse; }

.fd-row     { flex-direction: row; }
.fd-row-rev { flex-direction: row-reverse; }
.fd-col     { flex-direction: column; }
.fd-col-rev { flex-direction: column-reverse; }

.ai-stretch { align-items: stretch; }
.ai-start   { align-items: flex-start; }
.ai-end     { align-items: flex-end; }
.ai-center  { align-items: center; }
.ai-base    { align-items: baseline; }

.jc-start   { justify-content: flex-start; }
.jc-end     { justify-content: flex-end; }
.jc-center  { justify-content: center; }
.jc-around  { justify-content: space-around; }
.jc-between { justify-content: space-between; }
.jc-evenly  { justify-content: space-evenly; }

.flex-1     { flex: 1; }
.flex-2     { flex: 2; }
.flex-3     { flex: 3; }
.flex-4     { flex: 4; }



/* Other displays
 *============================================================================*/

.block    { display: block; }
.iblock   { display: inline-block; }
.inline   { display: inline; }
.contents { display: contents; }



/* Hide & show
 *============================================================================*/

.hide-xs { @media (max-width: $screen-xs) { display: none; } }
.hide-s  { @media (max-width: $screen-s)  { display: none; } }
.hide-m  { @media (max-width: $screen-m)  { display: none; } }
.hide-l  { @media (max-width: $screen-l)  { display: none; } }

.show-xs { @media (min-width: $screen-xs + 1px) { display: none; } }
.show-s  { @media (min-width: $screen-s + 1px)  { display: none; } }
.show-m  { @media (min-width: $screen-m + 1px)  { display: none; } }
.show-l  { @media (min-width: $screen-l + 1px)  { display: none; } }



/* Backgrounds
 *============================================================================*/

// Relative
.bg {
  background-color: var(--theme);
  color: var(--primary);
}

// Absolute
@each $group-name, $group in $colors-themes {
  .bg-#{$group-name} {
    background-color: var(--#{$group-name}-theme);
    color: var(--#{$group-name}-primary);
  }
}



/* Colors
 *============================================================================*/

// Relative
.c            { color: var(--theme); }
.fg-primary   { color: var(--primary); }
.fg-secondary { color: var(--secondary); }
.fg-tertiary  { color: var(--tertiary); }

// Absolute
@each $group-name, $group in $colors-themes {
  .c-#{$group-name} {
    color: var(--#{$group-name}-theme);
  }
}



/* Fonts
 *============================================================================*/

@each $group-name, $group in $fonts {
  .font-#{$group-name} {
    font-family: var(--font-#{$group-name});
  }
}



/* Text aligns
 *============================================================================*/

.ta-left    { text-align: left; }
.ta-center  { text-align: center; }
.ta-right   { text-align: right; }
.ta-justify { text-align: justify; }



/* White space
 *============================================================================*/

.ws-nowrap { white-space: nowrap; }
.ws-normal { white-space: normal; }



/* Font size
 *============================================================================*/

.fs-small { font-size: 0.8em; }
.fs-large { font-size: 1.3em; }



/* Font weight
 *============================================================================*/

.fw-light  { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-bold   { font-weight: 700; }



/* Text decoration
 *============================================================================*/

.td-underline { text-decoration: underline; }



/* Image controls
 *============================================================================*/

.obj-cover   { object-fit: cover; }
.obj-contain { object-fit: contain; }



/* Position
 *============================================================================*/

.relative { position: relative; }



/* Overflows
 *============================================================================*/

.of-auto     { overflow: auto; }
.of-hidden   { overflow: hidden; }
.of-scroll   { overflow: scroll; }

.of-x-auto   { overflow-x: auto; }
.of-x-hidden { overflow-x: hidden; }
.of-x-scroll { overflow-x: scroll; }

.of-y-auto   { overflow-y: auto; }
.of-y-hidden { overflow-y: hidden; }
.of-y-scroll { overflow-y: scroll; }



/* Width & height
 *============================================================================*/

.w-full  { width: 100%; }
.w-auto  { width: auto; }

.h-full  { height: 100%; }
.h-auto  { height: auto; }

.mw-full { max-width: 100%; }



/* Border radii
 *============================================================================*/

.br-rounded { border-radius: 4px; }
.br-circle  { border-radius: 50%; }
.br-pill    { border-radius: 999px; }



/* Borders
 *============================================================================*/

.b-a { border       : 1px solid var(--tertiary); }
.b-t { border-top   : 1px solid var(--tertiary); }
.b-r { border-right : 1px solid var(--tertiary); }
.b-b { border-bottom: 1px solid var(--tertiary); }
.b-l { border-left  : 1px solid var(--tertiary); }



/* Paddings
 *============================================================================*/

.p-a-0  { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; }
.p-t-0  { padding-top: 0; }
.p-r-0  { padding-right: 0; }
.p-b-0  { padding-bottom: 0; }
.p-l-0  { padding-left: 0; }

.p-a-xs { padding: calc(4px + .25vw); }
.p-a-s  { padding: calc(8px + .5vw); }
.p-a-m  { padding: calc(16px + 1vw); }
.p-a-l  { padding: calc(32px + 2vw); }
.p-a-xl { padding: calc(64px + 4vw); }

.p-y-xs { padding-top: calc(4px + .25vw); padding-bottom: calc(4px + .25vw); }
.p-y-s  { padding-top: calc(8px + .5vw);  padding-bottom: calc(8px + .5vw); }
.p-y-m  { padding-top: calc(16px + 1vw);  padding-bottom: calc(16px + 1vw); }
.p-y-l  { padding-top: calc(32px + 2vw);  padding-bottom: calc(32px + 2vw); }
.p-y-xl { padding-top: calc(64px + 4vw);  padding-bottom: calc(64px + 4vw); }

.p-x-xs { padding-left: calc(4px + .25vw); padding-right: calc(4px + .25vw); }
.p-x-s  { padding-left: calc(8px + .5vw);  padding-right: calc(8px + .5vw); }
.p-x-m  { padding-left: calc(16px + 1vw);  padding-right: calc(16px + 1vw); }
.p-x-l  { padding-left: calc(32px + 2vw);  padding-right: calc(32px + 2vw); }
.p-x-xl { padding-left: calc(64px + 4vw);  padding-right: calc(64px + 4vw); }

.p-t-xs { padding-top: calc(4px + .25vw); }
.p-t-s  { padding-top: calc(8px + .5vw); }
.p-t-m  { padding-top: calc(16px + 1vw); }
.p-t-l  { padding-top: calc(32px + 2vw); }
.p-t-xl { padding-top: calc(64px + 4vw); }

.p-r-xs { padding-right: calc(4px + .25vw); }
.p-r-s  { padding-right: calc(8px + .5vw); }
.p-r-m  { padding-right: calc(16px + 1vw); }
.p-r-l  { padding-right: calc(32px + 2vw); }
.p-r-xl { padding-right: calc(64px + 4vw); }

.p-b-xs { padding-bottom: calc(4px + .25vw); }
.p-b-s  { padding-bottom: calc(8px + .5vw); }
.p-b-m  { padding-bottom: calc(16px + 1vw); }
.p-b-l  { padding-bottom: calc(32px + 2vw); }
.p-b-xl { padding-bottom: calc(64px + 4vw); }

.p-l-xs { padding-left: calc(4px + .25vw); }
.p-l-s  { padding-left: calc(8px + .5vw); }
.p-l-m  { padding-left: calc(16px + 1vw); }
.p-l-l  { padding-left: calc(32px + 2vw); }
.p-l-xl { padding-left: calc(64px + 4vw); }



/* Margins
 *============================================================================*/

.m-a-0  { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; }
.m-t-0  { margin-top: 0; }
.m-r-0  { margin-right: 0; }
.m-b-0  { margin-bottom: 0; }
.m-l-0  { margin-left: 0; }

.m-a-xs { margin: calc(4px + .25vw); }
.m-a-s  { margin: calc(8px + .5vw); }
.m-a-m  { margin: calc(16px + 1vw); }
.m-a-l  { margin: calc(32px + 2vw); }
.m-a-xl { margin: calc(64px + 4vw); }

.m-y-xs { margin-top: calc(4px + .25vw); margin-bottom: calc(4px + .25vw); }
.m-y-s  { margin-top: calc(8px + .5vw);  margin-bottom: calc(8px + .5vw); }
.m-y-m  { margin-top: calc(16px + 1vw);  margin-bottom: calc(16px + 1vw); }
.m-y-l  { margin-top: calc(32px + 2vw);  margin-bottom: calc(32px + 2vw); }
.m-y-xl { margin-top: calc(64px + 4vw);  margin-bottom: calc(64px + 4vw); }

.m-x-xs { margin-left: calc(4px + .25vw); margin-right: calc(4px + .25vw); }
.m-x-s  { margin-left: calc(8px + .5vw);  margin-right: calc(8px + .5vw); }
.m-x-m  { margin-left: calc(16px + 1vw);  margin-right: calc(16px + 1vw); }
.m-x-l  { margin-left: calc(32px + 2vw);  margin-right: calc(32px + 2vw); }
.m-x-xl { margin-left: calc(64px + 4vw);  margin-right: calc(64px + 4vw); }

.m-t-xs { margin-top: calc(4px + .25vw); }
.m-t-s  { margin-top: calc(8px + .5vw); }
.m-t-m  { margin-top: calc(16px + 1vw); }
.m-t-l  { margin-top: calc(32px + 2vw); }
.m-t-xl { margin-top: calc(64px + 4vw); }

.m-r-xs { margin-right: calc(4px + .25vw); }
.m-r-s  { margin-right: calc(8px + .5vw); }
.m-r-m  { margin-right: calc(16px + 1vw); }
.m-r-l  { margin-right: calc(32px + 2vw); }
.m-r-xl { margin-right: calc(64px + 4vw); }

.m-b-xs { margin-bottom: calc(4px + .25vw); }
.m-b-s  { margin-bottom: calc(8px + .5vw); }
.m-b-m  { margin-bottom: calc(16px + 1vw); }
.m-b-l  { margin-bottom: calc(32px + 2vw); }
.m-b-xl { margin-bottom: calc(64px + 4vw); }

.m-l-xs { margin-left: calc(4px + .25vw); }
.m-l-s  { margin-left: calc(8px + .5vw); }
.m-l-m  { margin-left: calc(16px + 1vw); }
.m-l-l  { margin-left: calc(32px + 2vw); }
.m-l-xl { margin-left: calc(64px + 4vw); }