/* This file contains spacing variables for the application
    and utility classes for margin and padding.
    - margin and padding classes
    - gap utility classes

*/

:root {
    --spacing-0: 0rem;        /* 0px */
    --spacing-0_5: 0.125rem;  /* 2px */
    --spacing-1: 0.25rem;     /* 4px */
    --spacing-1_5: 0.375rem;   /* 6px */
    --spacing-2: 0.5rem;      /* 8px */
    --spacing-2_5: 0.625rem;  /* 10px */
    --spacing-3: 0.75rem;     /* 12px */
    --spacing-3_5: 0.875rem;  /* 14px */
    --spacing-4: 1rem;        /* 16px */
    --spacing-5: 1.25rem;     /* 20px */
    --spacing-6: 1.5rem;      /* 24px */
    --spacing-7: 1.75rem;     /* 28px */
    --spacing-8: 2rem;        /* 32px */
    --spacing-9: 2.25rem;     /* 36px */
    --spacing-10: 2.5rem;     /* 40px */
    --spacing-11: 2.75rem;    /* 44px */
    --spacing-12: 3rem;        /* 48px */
    --spacing-14: 3.5rem;      /* 56px */
    --spacing-16: 4rem;        /* 64px */
    --spacing-20: 5rem;        /* 80px */
    --spacing-24: 6rem;        /* 96px */
    --spacing-28: 7rem;        /* 112px */
    --spacing-32: 8rem;        /* 128px */
    --spacing-36: 9rem;        /* 144px */
    --spacing-40: 10rem;       /* 160px */
    --spacing-48: 12rem;       /* 192px */
    --spacing-52: 13rem;       /* 208px */
    --spacing-56: 14rem;       /* 224px */
    --spacing-60: 15rem;       /* 240px */
    --spacing-64: 16rem;       /* 256px */
    --spacing-72: 18rem;       /* 288px */
    --spacing-80: 20rem;       /* 320px */
    --spacing-86: 21.5rem;     /* 344px */
    --spacing-88: 22rem;       /* 352px */
    --spacing-96: 24rem;       /* 384px */
    --spacing-full: 9999px;    /* 9999px */
}

/* Margin Classes */
/* #region margin-classes */

.cg-m-0 {
    margin: 0;
}
.cg-m-0_5 {
    margin: var(--spacing-0_5);
}
.cg-m-1 {
    margin: var(--spacing-1);
}
.cg-m-1_5 {
    margin: var(--spacing-1_5);
}
.cg-m-2 {
    margin: var(--spacing-2);
}
.cg-m-2_5 {
    margin: var(--spacing-2_5);
}
.cg-m-3 {
    margin: var(--spacing-3);
}
.cg-m-3_5 {
    margin: var(--spacing-3_5);
}
.cg-m-4 {
    margin: var(--spacing-4);
}
.cg-m-5 {
    margin: var(--spacing-5);
}
.cg-m-6 {
    margin: var(--spacing-6);
}
.cg-m-7 {
    margin: var(--spacing-7);
}
.cg-m-8 {
    margin: var(--spacing-8);
}
.cg-m-9 {
    margin: var(--spacing-9);
}
.cg-m-10 {
    margin: var(--spacing-10);
}
.cg-m-11 {
    margin: var(--spacing-11);
}
.cg-m-12 {
    margin: var(--spacing-12);
}
.cg-m-14 {
    margin: var(--spacing-14);
}
.cg-m-16 {
    margin: var(--spacing-16);
}
.cg-m-20 {
    margin: var(--spacing-20);
}
/* #endregion margin-classes */

/* Padding Classes */
/* #region padding-classes */
.cg-p-0 {
    padding: 0;
}
.cg-p-0_5 {
    padding: var(--spacing-0_5);
}
.cg-p-1 {
    padding: var(--spacing-1);
}
.cg-p-1_5 {
    padding: var(--spacing-1_5);
}
.cg-p-2 {
    padding: var(--spacing-2);
}
.cg-p-2_5 {
    padding: var(--spacing-2_5);
}
.cg-p-3 {
    padding: var(--spacing-3);
}
.cg-p-3_5 {
    padding: var(--spacing-3_5);
}
.cg-p-4 {
    padding: var(--spacing-4);
}
.cg-p-5 {
    padding: var(--spacing-5);
}
.cg-p-6 {
    padding: var(--spacing-6);
}
.cg-p-7 {
    padding: var(--spacing-7);
}
.cg-p-8 {
    padding: var(--spacing-8);
}
.cg-p-9 {
    padding: var(--spacing-9);
}
.cg-p-10 {
    padding: var(--spacing-10);
}
.cg-p-11 {
    padding: var(--spacing-11);
}
.cg-p-12 {
    padding: var(--spacing-12);
}
.cg-p-14 {
    padding: var(--spacing-14);
}
.cg-p-16 {
    padding: var(--spacing-16);
}
.cg-p-20 {
    padding: var(--spacing-20);
}
/* #endregion padding-classes */

/* Gap Classes */
/* #region gap-classes */
.cg-gap-0 {
    gap: 0;
}

.cg-gap-0_5 {
    gap: var(--spacing-0_5);
}
.cg-gap-1 {
    gap: var(--spacing-1);
}

.cg-gap-2 {
    gap: var(--spacing-2);
}

.cg-gap-3 {
    gap: var(--spacing-3);
}

.cg-gap-4 {
    gap: var(--spacing-4);
}

.cg-gap-5 {
    gap: var(--spacing-5);
}

.cg-gap-6{
    gap: var(--spacing-6);
}

.cg-gap-8 {
    gap: var(--spacing-8);
}

.cg-gap-12 {
    gap: var(--spacing-12);
}

.cg-gap-16 {
    gap: var(--spacing-16);
}

.cg-gap-20 {
    gap: var(--spacing-20);
}

.cg-gap-28 {
    gap: var(--spacing-28);
}
/* #endregion gap-classes */