/* utils.css */
/* ==============================================
    Font
============================================== */

/* ------------------------------
   1. font size
------------------------------ */
.font-size-10px { font-size: 0.675rem; }
.font-size-12px { font-size: 0.75rem; }
.font-size-14px { font-size: 0.875rem; }
.font-size-16px { font-size: 1rem; }
.font-size-18px { font-size: 1.125rem; }
.font-size-20px { font-size: 1.25rem; }
.font-size-22px { font-size: 1.375rem; }
.font-size-24px { font-size: 1.5rem; }
.font-size-28px { font-size: 1.75rem; }
.font-size-30px { font-size: 1.875rem; }
.font-size-32px { font-size: 2rem; }

/* ------------------------------
   2. font weight
------------------------------ */
.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }
.font-weight-1000 { font-weight: 1000; }

/* ------------------------------
   3. line height
------------------------------ */
.line-height-auto { line-height: auto; }
.line-height-150 { line-height: 150%; }
.line-height-160 { line-height: 160%; }

/* ------------------------------
   4. letter spacing
------------------------------ */
.letter-spacing--3 { letter-spacing: -3%; }
.letter-spacing-0 { letter-spacing: 0%; }
.letter-spacing-4 { letter-spacing: 4%; }

/* ==============================================
    Padding
============================================== */

/* ------------------------------
   1. padding left and right
------------------------------ */
.padding-lr-2px { padding: 0 0.125rem; }
.padding-lr-4px { padding: 0 0.25rem; }
.padding-lr-8px { padding: 0 0.5rem; }
.padding-lr-10px { padding: 0 0.625rem; }
.padding-lr-12px { padding: 0 0.75rem; }
.padding-lr-14px { padding: 0 0.875rem; }
.padding-lr-16px { padding: 0 1rem; }
.padding-lr-18px { padding: 0 1.125rem; }
.padding-lr-20px { padding: 0 1.25rem; }
.padding-lr-24px { padding: 0 1.5rem; }
.padding-lr-32px { padding: 0 2rem; }
.padding-lr-48px { padding: 0 3rem; }
.padding-lr-64px { padding: 0 4rem; }

.padding-l-2px { padding-left:  0.125rem; }
.padding-l-4px { padding-left:  0.25rem; }
.padding-l-8px { padding-left:  0.5rem; }
.padding-l-10px { padding-left:  0.625rem; }
.padding-l-12px { padding-left:  0.75rem; }
.padding-l-14px { padding-left:  0.875rem; }
.padding-l-16px { padding-left:  1rem; }
.padding-l-18px { padding-left:  1.125rem; }
.padding-l-20px { padding-left:  1.25rem; }
.padding-l-24px { padding-left:  1.5rem; }
.padding-l-32px { padding-left:  2rem; }
.padding-l-48px { padding-left:  3rem; }
.padding-l-64px { padding-left:  4rem; }

.padding-r-2px { padding-right:  0.125rem; }
.padding-r-4px { padding-right:  0.25rem; }
.padding-r-8px { padding-right:  0.5rem; }
.padding-r-10px { padding-right:  0.625rem; }
.padding-r-12px { padding-right:  0.75rem; }
.padding-r-14px { padding-right:  0.875rem; }
.padding-r-16px { padding-right:  1rem; }
.padding-r-18px { padding-right:  1.125rem; }
.padding-r-20px { padding-right:  1.25rem; }
.padding-r-24px { padding-right:  1.5rem; }
.padding-r-32px { padding-right:  2rem; }
.padding-r-48px { padding-right:  3rem; }
.padding-r-64px { padding-right:  4rem; }

/* ------------------------------
   2. padding top and bottom
------------------------------ */
.padding-tb-2px { padding: 0.125rem 0; }
.padding-tb-4px { padding: 0.25rem 0; }
.padding-tb-8px { padding: 0.5rem 0; }
.padding-tb-10px { padding: 0.625rem 0; }
.padding-tb-12px { padding: 0.75rem 0; }
.padding-tb-14px { padding: 0.875rem 0; }
.padding-tb-16px { padding: 1rem 0; }
.padding-tb-18px { padding: 1.125rem 0; }
.padding-tb-20px { padding: 1.25rem 0; }
.padding-tb-24px { padding: 1.5rem 0; }
.padding-tb-32px { padding: 2rem 0; }
.padding-tb-48px { padding: 3rem 0; }
.padding-tb-64px { padding: 4rem 0; }

.padding-t-2px { padding-top:  0.125rem; }
.padding-t-4px { padding-top:  0.25rem; }
.padding-t-8px { padding-top:  0.5rem; }
.padding-t-10px { padding-top:  0.625rem; }
.padding-t-12px { padding-top:  0.75rem; }
.padding-t-14px { padding-top:  0.875rem; }
.padding-t-16px { padding-top:  1rem; }
.padding-t-18px { padding-top:  1.125rem; }
.padding-t-20px { padding-top:  1.25rem; }
.padding-t-24px { padding-top:  1.5rem; }
.padding-t-32px { padding-top:  2rem; }
.padding-t-48px { padding-top:  3rem; }
.padding-t-64px { padding-top:  4rem; }

.padding-b-2px { padding-bottom:  0.125rem; }
.padding-b-4px { padding-bottom:  0.25rem; }
.padding-b-8px { padding-bottom:  0.5rem; }
.padding-b-10px { padding-bottom:  0.625rem; }
.padding-b-12px { padding-bottom:  0.75rem; }
.padding-b-14px { padding-bottom:  0.875rem; }
.padding-b-16px { padding-bottom:  1rem; }
.padding-b-18px { padding-bottom:  1.125rem; }
.padding-b-20px { padding-bottom:  1.25rem; }
.padding-b-24px { padding-bottom:  1.5rem; }
.padding-b-32px { padding-bottom:  2rem; }
.padding-b-48px { padding-bottom:  3rem; }
.padding-b-64px { padding-bottom:  4rem; }
/* ------------------------------
   3. padding
------------------------------ */
.padding-2px { padding: 0.125rem; }
.padding-4px { padding: 0.25rem; }
.padding-8px { padding: 0.5rem; }
.padding-10px { padding: 0.625rem; }
.padding-12px { padding: 0.75rem; }
.padding-14px { padding: 0.875rem; }
.padding-16px { padding: 1rem; }
.padding-18px { padding: 1.125rem; }
.padding-20px { padding: 1.25rem; }
.padding-24px { padding: 1.5rem; }
.padding-32px { padding: 2rem; }
.padding-48px { padding: 3rem; }
.padding-64px { padding: 4rem; }

/* ==============================================
    Color
============================================== */

/* ------------------------------
   1. page background color
------------------------------ */
.page-background-color { background-color: var(--color-surface-page); }

/* ------------------------------
   2. popup background color
------------------------------ */
.popup-background-color { background-color: var(--color-surface-popup); }

/* ------------------------------
   3. button background color
------------------------------ */
.primary-button-background-color { background-color: var(--color-surface-button-primary); }
.secondary-button-background-color { background-color: var(--color-surface-button-secondary); }

/* ------------------------------
   4. text color
------------------------------ */
.primary-text-color { color: var(--color-text-primary); }
.secondary-text-color { color: var(--color-text-secondary); }

/* ------------------------------
   5. button text color
------------------------------ */
.primary-button-text-color { color: var(--color-text-button-primary); }
.secondary-button-text-color { color: var(--color-text-button-secondary); }

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

/* ------------------------------
   1. border-with
------------------------------ */
.border-with-1px { border-width: 1px; }
.border-with-2px { border-width: 2px; }
.border-with-3px { border-width: 3px; }
.border-with-4px { border-width: 4px; }
.border-with-5px { border-width: 5px; }

/* ------------------------------
   2. border-style
------------------------------ */
.border-style-none { border-style: none; }
.border-style-solid { border-style: solid; }
.border-style-dashed { border-style: dashed; }
.border-style-dotted { border-style: dotted; }

/* ------------------------------
   3. border-color
------------------------------ */
.border-color-black-10 { border-color: var(--color-black-alpha-1a); }
.border-color-white-10 { border-color: var(--color-white-alpha-1a); }

/* ------------------------------
   4. border-radius
------------------------------ */
.border-radius-2px { border-radius: 0.125rem; }
.border-radius-4px { border-radius: 0.25rem; }
.border-radius-8px { border-radius: 0.5rem; }
.border-radius-10px { border-radius: 0.625rem; }
.border-radius-12px { border-radius: 0.75rem; }
.border-radius-14px { border-radius: 0.875rem; }
.border-radius-16px { border-radius: 1rem; }
.border-radius-18px { border-radius: 1.125rem; }
.border-radius-20px { border-radius: 1.25rem; }
.border-radius-24px { border-radius: 1.5rem; }
.border-radius-32px { border-radius: 2rem; }
.border-radius-48px { border-radius: 3rem; }
.border-radius-64px { border-radius: 4rem; }

/* ==============================================
    display
============================================== */

/* ------------------------------
   1. flex
------------------------------ */
.flex { display: flex; }
.flex1 { flex: 1; }
.flex-colum { flex-direction: column; }
.flex-row { flex-direction: row; }

/* ------------------------------
   3. justify content
------------------------------ */
.flex-justify-between { justify-content: space-between; }
.flex-justify-start { justify-content: flex-start; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-center { justify-content: center; }

/* ------------------------------
   4. align items
------------------------------ */
.flex-align-center { align-items: center; }
.flex-align-start { align-items: flex-start; }
.flex-align-end { align-items: flex-end; }

/* ------------------------------
   5. gap
------------------------------ */
.gap-2px { gap: 0.125rem; }
.gap-4px { gap: 0.25rem; }
.gap-8px { gap: 0.5rem; }
.gap-10px { gap: 0.625rem; }
.gap-12px { gap: 0.75rem; }
.gap-14px { gap: 0.875rem; }
.gap-16px { gap: 1rem; }
.gap-18px { gap: 1.125rem; }
.gap-20px { gap: 1.25rem; }
.gap-24px { gap: 1.5rem; }
.gap-32px { gap: 2rem; }
.gap-48px { gap: 3rem; }
.gap-64px { gap: 4rem; }

/* ==============================================
    height
============================================== */
.min-height-100vh { min-height: 100vh; }
.height-100vh { height: 100vh;}
.max-height-full { height: 100%;}
.min-height-14px { min-height: 0.875rem;}
.height-full { height: 100%; }
.height-auto { height: auto; }
.height-2px { height: 0.125rem; }
.height-4px { height: 0.25rem; }
.height-6px { height: 0.375rem; }
.height-8px { height: 0.5rem; }
.height-10px { height: 0.675rem; }
.height-12px { height: 0.75rem; }
.height-14px { height: 0.875rem; }
.height-16px { height: 1rem; }
.height-18px { height: 1.125rem; }
.height-20px { height: 1.25rem; }
.height-22px { height: 1.375rem; }
.height-24px { height: 1.5rem; }
.height-28px { height: 1.75rem; }
.height-30px { height: 1.875rem; }
.height-32px { height: 2rem; }
.height-48px { height: 3rem;}

/* ==============================================
    width
============================================== */
.max-width-768px { max-width: 48rem;}
.min-width-100vw { min-width: 100vw; }
.width-full { width: 100%; }
.width-auto { width: auto; }
.width-2px { width: 0.125rem; }
.width-4px { width: 0.25rem; }
.width-6px { width: 0.375rem; }
.width-8px { width: 0.5rem; }
.width-10px { width: 0.675rem; }
.width-12px { width: 0.75rem; }
.width-14px { width: 0.875rem; }
.width-16px { width: 1rem; }
.width-18px { width: 1.125rem; }
.width-20px { width: 1.25rem; }
.width-22px { width: 1.375rem; }
.width-24px { width: 1.5rem; }
.width-28px { width: 1.75rem; }
.width-30px { width: 1.875rem; }
.width-32px { width: 2rem; }

/* ==============================================
    scroll behavior
============================================== */
.smooth { scroll-behavior: smooth; }

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

.position-relative { position: relative; }
.position-fixed { position: fixed; }

/* ==============================================
    Top
============================================== */
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

/* ==============================================
    z-index
============================================== */
.z-index-999 { z-index: 999; }