/* =====================================================================
   b-spacing.css
   =====================================================================

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

/* =====================================================================
   WS UTILITIES — PADDING
   ===================================================================== */

/* ALL */

.ws-p-0   { padding: var(--ws-space-0); }
.ws-p-xs  { padding: var(--ws-space-xs); }
.ws-p-sm  { padding: var(--ws-space-sm); }
.ws-p-md  { padding: var(--ws-space-md); }
.ws-p-lg  { padding: var(--ws-space-lg); }
.ws-p-xl  { padding: var(--ws-space-xl); }
.ws-p-2xl { padding: var(--ws-space-2xl); }

/* X (gauche + droite) */

.ws-px-sm  { padding-left: var(--ws-space-sm); padding-right: var(--ws-space-sm); }
.ws-px-md  { padding-left: var(--ws-space-md); padding-right: var(--ws-space-md); }
.ws-px-lg  { padding-left: var(--ws-space-lg); padding-right: var(--ws-space-lg); }

/* Y (haut + bas) */

.ws-py-sm  { padding-top: var(--ws-space-sm); padding-bottom: var(--ws-space-sm); }
.ws-py-md  { padding-top: var(--ws-space-md); padding-bottom: var(--ws-space-md); }
.ws-py-lg  { padding-top: var(--ws-space-lg); padding-bottom: var(--ws-space-lg); }

/* SIDES */

.ws-pt-md { padding-top: var(--ws-space-md); }
.ws-pb-md { padding-bottom: var(--ws-space-md); }
.ws-pl-md { padding-left: var(--ws-space-md); }
.ws-pr-md { padding-right: var(--ws-space-md); }


/* =====================================================================
   WS UTILITIES — MARGIN
   ===================================================================== */

/* ALL */

.ws-m-0   { margin: 0; }
.ws-m-sm  { margin: var(--ws-space-sm); }
.ws-m-md  { margin: var(--ws-space-md); }
.ws-m-lg  { margin: var(--ws-space-lg); }

/* X */

.ws-mx-auto { margin-left: auto; margin-right: auto; }
.ws-mx-md   { margin-left: var(--ws-space-md); margin-right: var(--ws-space-md); }

/* Y */

.ws-my-sm { margin-top: var(--ws-space-sm); margin-bottom: var(--ws-space-sm); }
.ws-my-md { margin-top: var(--ws-space-md); margin-bottom: var(--ws-space-md); }
.ws-my-lg { margin-top: var(--ws-space-lg); margin-bottom: var(--ws-space-lg); }

/* SIDES */

.ws-mt-lg { margin-top: var(--ws-space-lg); }
.ws-mb-lg { margin-bottom: var(--ws-space-lg); }
.ws-mt-0  { margin-top: 0; }
.ws-mb-0  { margin-bottom: 0; }


/* =====================================================================
   WS UTILITIES — GAP
   ===================================================================== */

.ws-gap-sm { gap: var(--ws-space-sm); }
.ws-gap-md { gap: var(--ws-space-md); }
.ws-gap-lg { gap: var(--ws-space-lg); }
.ws-gap-xl { gap: var(--ws-space-xl); }


/* =====================================================================
   WS UTILITIES — WIDTH
   ===================================================================== */

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

.ws-max-w-sm { max-width: 480px; }
.ws-max-w-md { max-width: 720px; }
.ws-max-w-lg { max-width: 960px; }
.ws-max-w-xl { max-width: 1200px; }

.ws-center {
  margin-left: auto;
  margin-right: auto;
}


/* =====================================================================
   WS UTILITIES — ALIGN
   ===================================================================== */

.ws-text-center { text-align: center; }
.ws-text-left   { text-align: left; }
.ws-text-right  { text-align: right; }

.ws-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* =====================================================================
   WS UTILITIES — RESPONSIVE
   ===================================================================== */

@media (min-width: 768px){

  .ws-md-p-lg {
    padding: var(--ws-space-lg);
  }

  .ws-md-mt-xl {
    margin-top: var(--ws-space-xl);
  }

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

}