{"version":3,"sourceRoot":"","sources":["../../src/partials/utilities.scss","../../src/helpers/_mixins.scss"],"names":[],"mappings":"AAEA,iBAEE,aCDA,2CACA,oCACA,2CACA,kBDEA,cC0CA,mCACA,0CACA,iDACA,wCACA,0CD1CA,YCFA,2CACA,oCACA,2CACA,kBDGA,WCCA,2CACA,mCACA,2CACA,6BAIA,2CACA,mCACA,0CACA,kBDHA,WCOA,2CACA,mCACA,0CACA,kBDNA,uBCgBA,mCACA,2CACA,gDDbA,yBCyBA,mCACA,2CACA,gDDtBA,WC0BA,oCACA,2CACA,gDDvBA,iBACE,+CACA,iBAGF,WACE,iBACA,iBAGF,cACE,4CACA,iBAGF,gBACE,8CACA,iBAGF,cACE,4CACA,iBACA,+CAGF,0EACE,oBACA,2BACA,+BACA,+IAMA,0BACA,mDACA,iBACA,oBACA,wBAEA,8EACE,UAGF,yGACE,eACA,kBAEA,iHACE,WACA,cACA,2BACA,4BAGF,gHACE,WACA,cACA,yBACA,0BAKN,qBACE,gCAGF,4BACE,KACE,yBAGF,GACE,wBAKJ,kBCtDA,8CACA,iCDyDA,kBCrDA,+CACA,iCDwDA,mBCpDA,+CACA,iCDuDA,oBCnDA,+CACA,iCDuDA,mBACE,eACA,+CAIF,wGAEE,qBACA,eACA,gBACA,kBACA,mBACA","file":"utilities.css","sourcesContent":["@use \"../helpers/mixins\" as mx;\n\n@layer utilities {\n  // Text\n  .n-text-hero {\n    @include mx.hero;\n  }\n\n  .n-text-quote {\n    @include mx.quote;\n  }\n\n  .n-text-2xl {\n    @include mx.h1;\n  }\n\n  .n-text-xl {\n    @include mx.h2;\n  }\n\n  .n-text-lg {\n    @include mx.h3;\n  }\n\n  .n-text-md {\n    @include mx.h4;\n  }\n\n  .n-text,\n  .n-text-normal {\n    @include mx.p;\n  }\n\n  .n-text-sm,\n  .n-text-small {\n    @include mx.text-small;\n  }\n\n  .n-text-xs {\n    @include mx.text-xs;\n  }\n\n  // Image\n  .n-img-landscape {\n    aspect-ratio: var(--nano-image-ratio-landscape);\n    object-fit: cover;\n  }\n\n  .n-img-4x3 {\n    aspect-ratio: 4 / 3;\n    object-fit: cover;\n  }\n\n  .n-img-square {\n    aspect-ratio: var(--nano-image-ratio-square);\n    object-fit: cover;\n  }\n\n  .n-img-portrait {\n    aspect-ratio: var(--nano-image-ratio-portrait);\n    object-fit: cover;\n  }\n\n  .n-img-avatar {\n    aspect-ratio: var(--nano-image-ratio-square);\n    object-fit: cover;\n    border-radius: var(--nano-border-radius-circle);\n  }\n\n  .n-loader-skeleton *:not(:has(*:not(img)), nano-spinner, nano-progress-bar) {\n    color: transparent;\n    box-decoration-break: clone;\n    background-color: transparent;\n    background-image: linear-gradient(\n      to right,\n      var(--nano-color-neutral-300) 33%,\n      var(--nano-color-neutral-50),\n      var(--nano-color-neutral-300) 66%\n    );\n    background-size: 300% 0.7em;\n    animation: skeleton-shimmer 2s infinite ease-in-out;\n    user-select: none;\n    pointer-events: none;\n    inline-size: fit-content;\n\n    img {\n      opacity: 0;\n    }\n\n    &:is(h1, h2, h3, h4, h5, h6, p, span, a) {\n      display: inline;\n      border-radius: 4px;\n\n      &::before {\n        content: \"\";\n        display: block;\n        margin-block-start: inherit;\n        padding-block-start: inherit;\n      }\n\n      &::after {\n        content: \"\";\n        display: block;\n        margin-block-end: inherit;\n        padding-block-end: inherit;\n      }\n    }\n  }\n\n  .n-loader-skeleton * {\n    text-decoration: none !important;\n  }\n\n  @keyframes skeleton-shimmer {\n    from {\n      background-position: 100%;\n    }\n\n    to {\n      background-position: 0%;\n    }\n  }\n\n  // surface\n  .n-surface-sunken {\n    @include mx.surface-sunken;\n  }\n\n  .n-surface-raised {\n    @include mx.surface-raised;\n  }\n\n  .n-surface-overlay {\n    @include mx.surface-overlay;\n  }\n\n  .n-surface-lightbox {\n    @include mx.surface-lightbox;\n  }\n\n  // hr\n  .n-content-divider {\n    block-size: 4px;\n    background-color: var(--nano-color-neutral-200);\n  }\n\n  // Tools\n  .n-visually-hidden:not(:focus, :active, :focus-within),\n  .visually-hidden:not(:focus, :active, :focus-within) {\n    clip-path: inset(50%);\n    block-size: 1px;\n    overflow: hidden;\n    position: absolute;\n    white-space: nowrap;\n    inline-size: 1px;\n  }\n}\n","/** Typography */\n\n@mixin hero {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-3xl);\n  line-height: var(--nano-line-height-denser);\n  text-wrap: balance;\n}\n\n@mixin h1 {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-2xl);\n  line-height: var(--nano-line-height-denser);\n  text-wrap: balance;\n}\n\n@mixin h2 {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-xl);\n  line-height: var(--nano-line-height-denser);\n  text-wrap: balance;\n}\n\n@mixin h3 {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-lg);\n  line-height: var(--nano-line-height-dense);\n  text-wrap: balance;\n}\n\n@mixin h4 {\n  font-weight: var(--nano-font-weight-normal);\n  font-size: var(--nano-font-size-md);\n  line-height: var(--nano-line-height-dense);\n  text-wrap: balance;\n}\n\n@mixin h5 {\n  font-size: var(--nano-font-size-sm);\n  line-height: var(--nano-line-height-normal);\n  font-weight: var(--nano-font-weight-bold);\n}\n\n@mixin p {\n  font-size: var(--nano-font-size-sm);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n}\n\n@mixin quote {\n  font-size: var(--nano-font-size-lg);\n  line-height: var(--nano-line-height-dense);\n  letter-spacing: var(--nano-letter-spacing-looser);\n  margin-block-end: var(--nano-spacing-md);\n  font-weight: var(--nano-font-weight-light);\n}\n\n@mixin text-small {\n  font-size: var(--nano-font-size-xs);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n}\n\n@mixin text-xs {\n  font-size: var(--nano-font-size-2xs);\n  line-height: var(--nano-line-height-normal);\n  letter-spacing: var(--nano-letter-spacing-loose);\n}\n\n@mixin surface-sunken {\n  background-color: var(--nano-color-surface-50);\n  box-shadow: var(--nano-shadow-ls);\n}\n\n@mixin surface-raised {\n  background-color: var(--nano-color-surface-100);\n  box-shadow: var(--nano-shadow-l1);\n}\n\n@mixin surface-overlay {\n  background-color: var(--nano-color-surface-200);\n  box-shadow: var(--nano-shadow-l2);\n}\n\n@mixin surface-lightbox {\n  background-color: var(--nano-color-surface-300);\n  box-shadow: var(--nano-shadow-l3);\n}\n"]}