:is(:root, :host){
  /* position */
  .rel {position: relative}
  .abs {position: absolute}
  .sticky {position: sticky}
  .fixed {position: fixed}

  /* cursor */
  .pointer {cursor: pointer}
  .pointer-e-none {pointer-events: none;}

  /* padding */
  .pad-1 {padding: calc(var(--space-unit)*1);}
  .pad-2 {padding: calc(var(--space-unit)*2);}
  .pad-3 {padding: calc(var(--space-unit)*3);}
  .pad-4 {padding: calc(var(--space-unit)*4);}
  .pad-6 {padding: calc(var(--space-unit)*6);}
  .pad-8 {padding: calc(var(--space-unit)*8);}
  .pad-10 {padding: calc(var(--space-unit)*12);}
  .pad-12 {padding: calc(var(--space-unit)*12);}
  .pad-16 {padding: calc(var(--space-unit)*16);}
  .pad-20 {padding: calc(var(--space-unit)*20);}

  /* horizontal padding */
  .padh-1 {padding-left: calc(var(--space-unit)*1);padding-right: calc(var(--space-unit)*1);}
  .padh-2 {padding-left: calc(var(--space-unit)*2);padding-right: calc(var(--space-unit)*2)}
  .padh-3 {padding-left: calc(var(--space-unit)*3);padding-right: calc(var(--space-unit)*3)}
  .padh-4 {padding-left: calc(var(--space-unit)*4);padding-right: calc(var(--space-unit)*4)}
  .padh-6 {padding-left: calc(var(--space-unit)*6);padding-right: calc(var(--space-unit)*6)}
  .padh-8 {padding-left: calc(var(--space-unit)*8);padding-right: calc(var(--space-unit)*8)}
  .padh-10 {padding-left: calc(var(--space-unit)*12);padding-right: calc(var(--space-unit)*10)}
  .padh-12 {padding-left: calc(var(--space-unit)*12);padding-right: calc(var(--space-unit)*12)}
  .padh-16 {padding-left: calc(var(--space-unit)*16);padding-right: calc(var(--space-unit)*16)}
  .padh-20 {padding-left: calc(var(--space-unit)*20);padding-right: calc(var(--space-unit)*20)}

  /* vertical padding */
  .padv-1 {padding-top: calc(var(--space-unit)*1);padding-bottom: calc(var(--space-unit)*1)}
  .padv-2 {padding-top: calc(var(--space-unit)*2);padding-bottom: calc(var(--space-unit)*2)}
  .padv-3 {padding-top: calc(var(--space-unit)*3);padding-bottom: calc(var(--space-unit)*3)}
  .padv-4 {padding-top: calc(var(--space-unit)*4);padding-bottom: calc(var(--space-unit)*4)}
  .padv-6 {padding-top: calc(var(--space-unit)*6);padding-bottom: calc(var(--space-unit)*6)}
  .padv-8 {padding-top: calc(var(--space-unit)*8);padding-bottom: calc(var(--space-unit)*8)}
  .padv-10 {padding-top: calc(var(--space-unit)*12);padding-bottom: calc(var(--space-unit)*10)}
  .padv-12 {padding-top: calc(var(--space-unit)*12);padding-bottom: calc(var(--space-unit)*12)}
  .padv-16 {padding-top: calc(var(--space-unit)*16);padding-bottom: calc(var(--space-unit)*16)}

  /* column-gap */
  .col-gap-1 {column-gap: calc(var(--space-unit)*1)}
  .col-gap-2 {column-gap: calc(var(--space-unit)*2)}
  .col-gap-3 {column-gap: calc(var(--space-unit)*3)}
  .col-gap-4 {column-gap: calc(var(--space-unit)*4)}
  .col-gap-5 {column-gap: calc(var(--space-unit)*5)}
  .col-gap-6 {column-gap: calc(var(--space-unit)*6)}
  .col-gap-8 {column-gap: calc(var(--space-unit)*8)}
  .col-gap-10 {column-gap: calc(var(--space-unit)*10)}
  .col-gap-12 {column-gap: calc(var(--space-unit)*12)}
  .col-gap-16 {column-gap: calc(var(--space-unit)*16)}

  /* row-gap */
  .row-gap-1 {row-gap: calc(var(--space-unit)*1)}
  .row-gap-2 {row-gap: calc(var(--space-unit)*2)}
  .row-gap-3 {row-gap: calc(var(--space-unit)*3)}
  .row-gap-4 {row-gap: calc(var(--space-unit)*4)}
  .row-gap-5 {row-gap: calc(var(--space-unit)*5)}
  .row-gap-6 {row-gap: calc(var(--space-unit)*6)}
  .row-gap-8 {row-gap: calc(var(--space-unit)*8)}
  .row-gap-10 {row-gap: calc(var(--space-unit)*10)}
  .row-gap-12 {row-gap: calc(var(--space-unit)*12)}
  .row-gap-16 {row-gap: calc(var(--space-unit)*16)}

  /* font-size */
  .fs-s {font-size: var(--f-size-s);}
  .fs-t {font-size: var(--f-size-t);}
  .fs-p {font-size: var(--f-size-p);}
  .fs-4 {font-size: var(--f-size-4)}
  .fs-3 {font-size: var(--f-size-3)}
  .fs-2 {font-size: var(--f-size-2)}
  .fs-1 {font-size: var(--f-size-1)}
  .fs-l {font-size: var(--f-size-l)}
  .fs-xl {font-size: var(--f-size-xl)}
  .fs-2xl {font-size: var(--f-size-2xl)}
  .fs-3xl {font-size: var(--f-size-3xl)}
  .fs-4xl {font-size: var(--f-size-4xl)}
  .fs-5xl {font-size: var(--f-size-5xl)}
  .fs-6xl {font-size: var(--f-size-6xl)}
  .fs-7xl {font-size: var(--f-size-7xl)}
  .fill-max {width: -webkit-fill-available;}
  .fill-max {width: -moz-fill-available;}
  .w-100 {width: 100%}
  .w-50 {width: 50%}
  .w-max-content {width: max-content}
  .h-max-content {height: max-content}
  .h-100 {height: 100%}

  /* flex */
  .flex {display: flex}
  .flex-inline{display: inline-flex}
  .fj-cent,
  .fj-center {justify-content: center}
  .fj-between, .fj-tween {justify-content: space-between}
  .fj-around {justify-content: space-around}
  .fj-start {justify-content: flex-start}
  .fj-end {justify-content: flex-end}
  .f-wrap {flex-wrap: wrap;}

  .fa-cent,
  .fa-center {align-items: center;}
  .fa-between, .fa-tween {align-items: space-between}
  .fa-around {align-items: space-around}
  .fa-start {align-items: flex-start}
  .fa-end {align-items: flex-end}
  .fd-col {flex-direction: column}
  .fd-rev {flex-direction: row-reverse}
  .fd-col-rev {flex-direction: column-reverse}

  /* font-weight */
  .fw-100 {font-weight: var(--fw-100)}
  .fw-200 {font-weight: var(--fw-200)}
  .fw-300 {font-weight: var(--fw-300)}
  .fw-400 {font-weight: var(--fw-400)}
  .fw-500 {font-weight: var(--fw-500)}
  .fw-600 {font-weight: var(--fw-600)}
  .fw-700 {font-weight: var(--fw-700)}
  .fw-800 {font-weight: var(--fw-800)}
  .fw-900 {font-weight: var(--fw-900)}

  /* text-align */
  .txt-center {text-align: center}
  .txt-left {text-align: left}
  .txt-right {text-align: right}

  /* margin */
  .mt-1 {margin-top: calc(var(--space-unit)*1);}
  .mt-2 {margin-top: calc(var(--space-unit)*2);}
  .mt-3 {margin-top: calc(var(--space-unit)*3);}
  .mt-4 {margin-top: calc(var(--space-unit)*4);}
  .mt-5 {margin-top: calc(var(--space-unit)*5);}
  .mt-6 {margin-top: calc(var(--space-unit)*6);}
  .mt-8 {margin-top: calc(var(--space-unit)*8);}
  .mt-10 {margin-top: calc(var(--space-unit)*10);}
  .mt-12 {margin-top: calc(var(--space-unit)*12);}
  .mt-16 {margin-top: calc(var(--space-unit)*16);}

  .ml-1 {margin-left: calc(var(--space-unit)*1)}
  .ml-2 {margin-left: calc(var(--space-unit)*2)}
  .ml-3 {margin-left: calc(var(--space-unit)*3)}
  .ml-4 {margin-left: calc(var(--space-unit)*4)}
  .ml-5 {margin-left: calc(var(--space-unit)*5)}
  .ml-6 {margin-left: calc(var(--space-unit)*6)}
  .ml-8 {margin-left: calc(var(--space-unit)*8)}
  .ml-10 {margin-left: calc(var(--space-unit)*10)}
  .ml-12 {margin-left: calc(var(--space-unit)*12)}
  .ml-16 {margin-left: calc(var(--space-unit)*16)}

  .mr-1 {margin-right: calc(var(--space-unit)*1)}
  .mr-2 {margin-right: calc(var(--space-unit)*2)}
  .mr-3 {margin-right: calc(var(--space-unit)*3)}
  .mr-4 {margin-right: calc(var(--space-unit)*4)}
  .mr-5 {margin-right: calc(var(--space-unit)*5)}
  .mr-6 {margin-right: calc(var(--space-unit)*6)}
  .mr-8 {margin-right: calc(var(--space-unit)*8)}
  .mr-10 {margin-right: calc(var(--space-unit)*10)}
  .mr-12 {margin-right: calc(var(--space-unit)*12)}
  .mr-16 {margin-right: calc(var(--space-unit)*16)}

  .mb-1 {margin-bottom: calc(var(--space-unit)*1)}
  .mb-2 {margin-bottom: calc(var(--space-unit)*2)}
  .mb-3 {margin-bottom: calc(var(--space-unit)*3)}
  .mb-4 {margin-bottom: calc(var(--space-unit)*4)}
  .mb-5 {margin-bottom: calc(var(--space-unit)*5)}
  .mb-6 {margin-bottom: calc(var(--space-unit)*6)}
  .mb-8 {margin-bottom: calc(var(--space-unit)*8)}
  .mb-10 {margin-bottom: calc(var(--space-unit)*10)}
  .mb-12 {margin-bottom: calc(var(--space-unit)*12)}
  .mb-16 {margin-bottom: calc(var(--space-unit)*16)}

  /* padding */
  .pt-1 {padding-top: calc(var(--space-unit)*1)}
  .pt-2 {padding-top: calc(var(--space-unit)*2)}
  .pt-3 {padding-top: calc(var(--space-unit)*3)}
  .pt-4 {padding-top: calc(var(--space-unit)*4)}
  .pt-5 {padding-top: calc(var(--space-unit)*5)}
  .pt-6 {padding-top: calc(var(--space-unit)*6)}
  .pt-8 {padding-top: calc(var(--space-unit)*8)}
  .pt-10 {padding-top: calc(var(--space-unit)*10)}
  .pt-12 {padding-top: calc(var(--space-unit)*12)}
  .pt-16 {padding-top: calc(var(--space-unit)*16)}

  .pb-1 {padding-bottom: calc(var(--space-unit)*1)}
  .pb-2 {padding-bottom: calc(var(--space-unit)*2)}
  .pb-3 {padding-bottom: calc(var(--space-unit)*3)}
  .pb-4 {padding-bottom: calc(var(--space-unit)*4)}
  .pb-5 {padding-bottom: calc(var(--space-unit)*5)}
  .pb-6 {padding-bottom: calc(var(--space-unit)*6)}
  .pb-8 {padding-bottom: calc(var(--space-unit)*8)}
  .pb-10 {padding-bottom: calc(var(--space-unit)*10)}
  .pb-12 {padding-bottom: calc(var(--space-unit)*12)}
  .pb-16 {padding-bottom: calc(var(--space-unit)*16)}

  .pl-1 {padding-left: calc(var(--space-unit)*1)}
  .pl-2 {padding-left: calc(var(--space-unit)*2)}
  .pl-3 {padding-left: calc(var(--space-unit)*3)}
  .pl-4 {padding-left: calc(var(--space-unit)*4)}
  .pl-5 {padding-left: calc(var(--space-unit)*5)}
  .pl-6 {padding-left: calc(var(--space-unit)*6)}
  .pl-8 {padding-left: calc(var(--space-unit)*8)}
  .pl-10 {padding-left: calc(var(--space-unit)*10)}
  .pl-12 {padding-left: calc(var(--space-unit)*12)}
  .pl-16 {padding-left: calc(var(--space-unit)*16)}

  .pr-1 {padding-right: calc(var(--space-unit)*1)}
  .pr-2 {padding-right: calc(var(--space-unit)*2)}
  .pr-3 {padding-right: calc(var(--space-unit)*3)}
  .pr-4 {padding-right: calc(var(--space-unit)*4)}
  .pr-5 {padding-right: calc(var(--space-unit)*5)}
  .pr-6 {padding-right: calc(var(--space-unit)*6)}
  .pr-8 {padding-right: calc(var(--space-unit)*8)}
  .pr-10 {padding-right: calc(var(--space-unit)*10)}
  .pr-12 {padding-right: calc(var(--space-unit)*12)}
  .pr-16 {padding-right: calc(var(--space-unit)*16)}

}