@use "abstract" as *;

/* hide */
.u-hide             { display:none!important; }
.u-opacity-0        { opacity:0!important;    }
.u-opacity-20       { opacity:0.2!important;  }
.u-opacity-50       { opacity:0.5!important;  }

.u-overflow-hidden  { overflow:hidden!important; }
.u-overflow-visible { overflow:visible!important;}
.u-overflow-x-auto  { overflow-x:auto !important; }
.u-overflow-y-auto  { overflow-y: auto !important;}

/* text */
.u-direction-ltr    { direction:ltr!important; }
.u-direction-rtl    { direction:rtl!important; }
.u-x-small          { font-size:pxToRem(12)!important; }
.u-small            { font-size:pxToRem(14)!important; }
.u-medium           { font-size:pxToRem(16)!important; }
.u-font-size-20     { font-size:pxToRem(20)!important; }
.u-font-size-32     { font-size:pxToRem(32)!important; }
.u-bold             { font-weight:600!important; }
.u-normal           { font-weight:normal!important; }
.u-underline        { text-decoration:underline!important; }
.u-text-start       { text-align:start!important;   }
.u-text-center      { text-align:center!important;  }
.u-text-end         { text-align:end!important;     }
.u-line-height-0-7  { line-height:0.7!important; }
.u-line-height-1    { line-height:1; }
.u-line-height-1-25 { line-height:1.25; }
.u-line-height-1-5  { line-height:1.5; }
.u-line-height-2    { line-height:2; }
.u-trim             { @include trim; }
.u-trim-1           { @include trim(1); }
.u-trim-2           { @include trim(2); }
.u-trim-3           { @include trim(3); }
.u-trim-start       { @include trim; direction:rtl; text-align:left; }
.u-break-word       { @include break-word; white-space:initial; }
.u-break-all        { @include break-all; white-space:initial; }
.u-un-break-text    { white-space:nowrap!important; }
.u-capitalize       { text-transform:capitalize!important; }
.u-icon-small       { font-size:var(--icon-size-small)!important; }

/* Font family */
.u-font-heading       { font-family:var(--heading-font)!important;  }
.u-font-content       { font-family:var(--content-font)!important;  }
.u-font-code          { font-family:var(--code-font)!important;     }

/* Mouse Cursor */
.u-cursor-pointer     { cursor:pointer!important; }
.u-cursor-text        { cursor:text!important;    }

/* color text */
.u-color-text-disabled  { color:hsl(var(--color-text-disabled))!important; }
.u-color-text-offline   { color:hsl(var(--color-text-offline))!important;  }
.u-color-text-info      { color:hsl(var(--color-text-info))!important;     }
.u-color-text-danger    { color:hsl(var(--color-text-danger))!important;   }
.u-color-text-warning   { color:hsl(var(--color-text-warning))!important;  }
.u-color-text-success   { color:hsl(var(--color-text-success))!important;  }

.u-color-text-gray      { color:hsl(var(--color-text-gray))!important;     }
.u-color-text-pink      { color:hsl(var(--color-pink-text))!important;     }

/* color text light mode only */
:where(body:not(#{$theme-dark})) {
  .u-color-light-only-text-neutral-70 { color:hsl(var(--color-neutral-50))!important; }
}


/* color text dark mode only */
#{$theme-dark} {
  .u-color-dark-only-text-neutral-50 { color:hsl(var(--color-neutral-20))!important; }
}

/* position */

.u-position-sticky      {
  --inset-block-start:  auto;
  --inset-block-end:    auto;
  --inset-inline-start: auto;
  --inset-inline-end:   auto;

  position:sticky;
  inset-block: var(--inset-block-start) var(--inset-block-end)!important;
  inset-inline: var(--inset-inline-start) var(--inset-inline-end)!important;
}
.u-position-relative    { position:relative!important; }
.u-position-absolute    { position:absolute!important; }
.u-position-fixed       { position:fixed!important; }
.u-position-static      { position:static!important; }

.u-z-index-0   { z-index:0!important;  }
.u-z-index-1   { z-index:1!important;  }
.u-z-index-5   { z-index:5!important;  }
.u-z-index-10  { z-index:10!important; }
.u-z-index-15  { z-index:15!important; }
.u-z-index-20  { z-index:20!important; }

/* display */
.u-block          { display:block!important;        }
.u-inline         { display:inline!important;       }
.u-grid           { display:grid!important;         }
.u-flex           { display:flex!important;         }
.u-inline-flex    { display:inline-flex!important;  }
.u-contents       { display:contents!important;     }
.u-contents-mobile{ @media #{$break1} {display:contents!important;} }

.u-box-sizing-content { box-sizing:content-box!important; }
.u-sep-inline-start   { border-inline-start:solid pxToRem(1) hsl(var(--color-border))!important; }
.u-sep-block-start    { border-block-start:solid pxToRem(1) hsl(var(--color-border))!important; }
.u-sep-block-end      { border-block-end:solid pxToRem(1) hsl(var(--color-border))!important; }

.u-flex-vertical            { display:flex!important; flex-direction:column!important;  }
.u-flex-vertical-mobile     { @media #{$break1} { flex-direction:column!important; }  }
.u-flex-wrap                { flex-wrap:wrap!important;         }
.u-stretch                  { flex:1!important;                 }
.u-flex-basis-140           { flex-basis:pxToRem(140)!important;}
.u-flex-basis-250           { flex-basis:pxToRem(250)!important;}
.u-flex-basis-500           { flex-basis:pxToRem(500)!important;}
.u-flex-basis-50-percent    { flex-basis:50%!important;         }
.u-flex-basis-100-percent   { flex-basis:100%!important;        }
.u-flex-shrink-0            { flex-shrink:0!important;          }
.u-flex-basis-auto          { flex-basis:auto!important;        }

.u-grid-columns-auto-1fr    { display:grid; grid-template-columns:auto 1fr; }
.u-grid-cols-2              { display:grid; grid-template-columns:1fr 1fr; }
.u-grid-equal-row-size      { display:grid; grid-auto-rows:1fr; align-items:center; }

.u-width-fit-content      { inline-size:fit-content!important;     }
.u-width-full-line        { inline-size:100%!important;            }
.u-width-140              { inline-size:pxToRem(140)!important;    }
.u-width-150              { inline-size:pxToRem(150)!important;    }
.u-width-200              { inline-size:pxToRem(200)!important;    }
.u-width-250              { inline-size:pxToRem(250)!important;    }
.u-width-280-desktop      { @media #{$break3open} { inline-size:pxToRem(280)!important; } }
.u-width-600              { inline-size:pxToRem(600)!important;    }
.u-min-width-0            { min-inline-size:0!important;            } /*use to solve flexbox un-shrink problem;*/
.u-min-width-200          { min-inline-size:pxToRem(200)!important; }
.u-min-width-100-percent  { min-inline-size:100%!important;         }

.u-max-width-250    { max-inline-size:pxToRem(250)!important; }
.u-max-width-300    { max-inline-size:pxToRem(300)!important; }
.u-max-width-350    { max-inline-size:pxToRem(350)!important; }
.u-max-width-400    { max-inline-size:pxToRem(400)!important; }
.u-max-width-450    { max-inline-size:pxToRem(440)!important; }
.u-max-width-500    { max-inline-size:pxToRem(500)!important; }
.u-max-width-600    { max-inline-size:pxToRem(600)!important; }
.u-max-width-650    { max-inline-size:pxToRem(650)!important; }
.u-max-width-700    { max-inline-size:pxToRem(700)!important; }
.u-max-width-100-percent { max-inline-size:100%!important; }

.u-height-100-percent { block-size:100%!important; }
.u-height-auto        { block-size:auto!important; }

.u-min-height-100   { min-block-size:pxToRem(100)!important; }
.u-min-height-184   { min-block-size:pxToRem(184)!important; }
.u-min-height-100-percent { min-block-size:100%!important;   }

.u-max-height-200   { max-block-size:pxToRem(200)!important; }

.u-full-screen-height { block-size:100vh!important; block-size:100lvh!important; }

/* alignments */
.u-main-start         { justify-content:start!important;  }
.u-main-center        { justify-content:center!important;           }
.u-main-space-between { justify-content:space-between!important;    }
.u-main-end           { justify-content:end!important;              }

.u-cross-start        { align-items:start!important;    }
.u-cross-baseline     { align-items:baseline!important; }
.u-cross-center       { align-items:center!important;   }
.u-cross-end          { align-items:end!important;      }

.u-cross-child-start  { align-self:start!important;   }
.u-cross-child-center { align-self:center!important;  }
.u-cross-child-end    { align-self:end!important;     }

/* box model */
$spacings: 0, 1, 2, 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 52, 56, 64, 80, 96, 128, 160, 192, 100, 200, 300;
$directions: "", "-inline", "-block", "-inline-start", "-inline-end", "-block-start", "-block-end";

@each $spacing in $spacings {
  @each $direction in $directions {
    .u-margin#{$direction}-#{$spacing}          { margin#{$direction}:pxToRem($spacing)!important;    }
    .u-margin#{$direction}-negative-#{$spacing} { margin#{$direction}:pxToRem(-$spacing)!important;   }
    .u-padding#{$direction}-#{$spacing}         { padding#{$direction}:pxToRem($spacing)!important;  }

    .u-inset#{$direction}-#{$spacing}           { inset#{$direction}:pxToRem($spacing)!important; }
  }

  .u-gap-#{$spacing}          { gap:pxToRem($spacing)!important;        }
  .u-row-gap-#{$spacing}      { row-gap:pxToRem($spacing)!important;    }
  .u-column-gap-#{$spacing}   { column-gap:pxToRem($spacing)!important; }
}

@each $direction in $directions {
  .u-margin#{$direction}-auto { margin#{$direction}:auto!important; }
}

/* special cases */
.u-margin-16-negative               { margin:pxToRem(-16)!important; }
.u-margin-block-start-negative-56   { margin-block-start:pxToRem(-56)!important; }
.u-margin-block-start-negative-168  { margin-block-start:pxToRem(-168)!important; }

.u-border-width-0         { border-width:0!important; }
.u-mobile-border-width-0  { @media #{$break1} { border-width:0!important; } }

.u-border-radius-4        { border-radius:var(--border-radius-xsmall)!important;   }
.u-border-radius-8        { border-radius:var(--border-radius-small)!important;    }
.u-border-radius-16       { border-radius:var(--border-radius-medium)!important;   }
.u-border-radius-24       { border-radius:var(--border-radius-large)!important;    }
.u-border-radius-circle   { border-radius:var(--border-radius-circular)!important; }

.u-image-object-fit-contain { object-fit:contain!important; }
.u-image-object-fit-cover   { object-fit:cover!important; }

/* container queries */
.u-container-inline-size { container-type: inline-size; }

/* Shadows */
.u-drop-shadow-large { filter:drop-shadow(var(--shadow-large))!important;}

/* reset inputs */
/** remove number button inputs **/
/* Chrome, Safari, Edge, Opera */
.u-remove-input-number-buttons::-webkit-outer-spin-button,
.u-remove-input-number-buttons::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.u-remove-input-number-buttons {
  -moz-appearance: textfield;
}

/* only light / only dark */
.u-only-light,
.u-only-dark   { display:none!important; }

#{$theme-dark} {
  .u-only-dark   { display:block!important; }
}
body:not(#{$theme-dark}) {
  .u-only-light { display:block!important; }
}

/* responsive global state classes */
.is-only-mobile {
  @media #{$break2open} { display:none!important; }
}

.is-only-tablet {
  @media #{$break1}, #{$break3open} { display:none!important; }
}

.is-only-desktop {
  @media #{$break1}, #{$break2} { display:none!important; }
}

.is-not-mobile {
  @media #{$break1} { display:none!important; }
}

.is-not-desktop {
  @media #{$break3open} { display:none!important; }
}