{"version":3,"sourceRoot":"","sources":["../../../src/client/styles/hint.scss","../../../src/client/styles/_svg.scss"],"names":[],"mappings":"AAIA,gBACE,kBACA,8BACA,WACE,qDAGF,aAPF,gBAQI,yBAGF,sCACE,0BAGF,+BACE,8BAGF,sCACE,kBACA,mBACA,gBACA,iBAGF,wIAME,oBACA,kBACA,mBAEA,cAEA,gCAEA,aAdF,wIAeI,sCAGF,4QACE,4BAEA,aAHF,4QAII,wBAGF,4TACE,YAEA,kBACA,qBACA,wBAEA,aACA,cAEA,iBAEA,aAZF,4TAaI,cAKN,oJACE,gBAGF,oJACE,yBAIJ,0BACE,2CACA,wCACA,uCAEA,wDCpDF,iBAD4B,aAG5B,gdACA,kBACA,cACA,sBDoDA,qBACE,sCACA,mCACA,kCAEA,mDC9DF,iBAD4B,aAG5B,6OACA,kBACA,cACA,sBD8DA,qBACE,sCACA,mCACA,kCAEA,mDCxEF,iBAD4B,aAG5B,6OACA,kBACA,cACA,sBDwEA,oBACE,qCACA,kCACA,iCAEA,kDClFF,iBAD4B,aAG5B,2TACA,kBACA,cACA,sBDkFA,wBACE,yCACA,sCACA,qCAEA,sDC5FF,iBAD4B,aAG5B,2vBACA,kBACA,cACA,sBD4FA,wBACE,yCACA,sCACA,qCAEA,sDCtGF,iBAD4B,aAG5B,oeACA,kBACA,cACA,sBDsGA,wBACE,kBAEA,cAEA,oBACA,qBACA,oBAEA,8BAEA,WACE,6DAGF,2BACE,aAKA,+EACE,gBACA,iBAIJ,0BACE,yBAGF,uCACE,gCAGF,gCACE,kBAEA,aACA,kBACA,yBAEA,gBAEA,gCAEA,eAGA,wDACE,aAGF,wCACE,oBACA,YAGF,wCCrKJ,iBAD4B,aAG5B,mLACA,kBACA,cACA,sBDmKM,YAEA,kBACA,wBACA,qBAEA,UACA,WAEA,kBACA,mBAEA,WACE,wDAIF,wBAIJ,sCACE,mBAEA,8CACE","file":"hint.css","sourcesContent":["@use 'sass:color';\n@use 'icons';\n@use 'svg';\n\n.hint-container {\n  position: relative;\n  background: var(--hint-c-soft);\n  transition:\n    background var(--vp-t-color),\n    color var(--vp-t-color);\n\n  @media print {\n    page-break-inside: avoid;\n  }\n\n  > .hint-container-title {\n    color: var(--hint-c-title);\n  }\n\n  :not(pre) > code {\n    background: var(--hint-c-soft);\n  }\n\n  .hint-container-title {\n    position: relative;\n    margin-block: 0.75em;\n    font-weight: 600;\n    line-height: 1.25;\n  }\n\n  &.important,\n  &.info,\n  &.note,\n  &.tip,\n  &.warning,\n  &.caution {\n    margin-block: 0.75rem;\n    padding: 0.25em 1em;\n    border-radius: 0.5em;\n\n    color: inherit;\n\n    font-size: var(--hint-font-size);\n\n    @media print {\n      border: 1px solid var(--hint-c-title);\n    }\n\n    .hint-container-title {\n      padding-inline-start: 1.75em;\n\n      @media print {\n        padding-inline-start: 0;\n      }\n\n      &::before {\n        content: ' ';\n\n        position: absolute;\n        inset-inline-start: 0;\n        top: calc(50% - 0.6125em);\n\n        width: 1.25em;\n        height: 1.25em;\n\n        font-size: 1.25em;\n\n        @media print {\n          display: none;\n        }\n      }\n    }\n\n    p {\n      line-height: 1.5;\n    }\n\n    a {\n      color: var(--vp-c-accent);\n    }\n  }\n\n  &.important {\n    --hint-c-accent: var(--important-c-accent);\n    --hint-c-title: var(--important-c-text);\n    --hint-c-soft: var(--important-c-soft);\n\n    > .hint-container-title::before {\n      @include svg.mask-svg(icons.$important-icon);\n    }\n  }\n\n  &.info {\n    --hint-c-accent: var(--info-c-accent);\n    --hint-c-title: var(--info-c-text);\n    --hint-c-soft: var(--info-c-soft);\n\n    > .hint-container-title::before {\n      @include svg.mask-svg(icons.$info-icon);\n    }\n  }\n\n  &.note {\n    --hint-c-accent: var(--note-c-accent);\n    --hint-c-title: var(--note-c-text);\n    --hint-c-soft: var(--note-c-soft);\n\n    > .hint-container-title::before {\n      @include svg.mask-svg(icons.$note-icon);\n    }\n  }\n\n  &.tip {\n    --hint-c-accent: var(--tip-c-accent);\n    --hint-c-title: var(--tip-c-text);\n    --hint-c-soft: var(--tip-c-soft);\n\n    > .hint-container-title::before {\n      @include svg.mask-svg(icons.$tip-icon);\n    }\n  }\n\n  &.warning {\n    --hint-c-accent: var(--warning-c-accent);\n    --hint-c-title: var(--warning-c-text);\n    --hint-c-soft: var(--warning-c-soft);\n\n    > .hint-container-title::before {\n      @include svg.mask-svg(icons.$warning-icon);\n    }\n  }\n\n  &.caution {\n    --hint-c-accent: var(--caution-c-accent);\n    --hint-c-title: var(--caution-c-text);\n    --hint-c-soft: var(--caution-c-soft);\n\n    > .hint-container-title::before {\n      @include svg.mask-svg(icons.$caution-icon);\n    }\n  }\n\n  &.details {\n    position: relative;\n\n    display: block;\n\n    margin-block: 0.75rem;\n    padding: 1.25rem 1rem;\n    border-radius: 0.5rem;\n\n    background: var(--detail-c-bg);\n\n    transition:\n      background var(--vp-t-transform),\n      color var(--vp-t-transform);\n\n    h4 {\n      margin-top: 0;\n    }\n\n    figure,\n    p {\n      &:last-child {\n        margin-bottom: 0;\n        padding-bottom: 0;\n      }\n    }\n\n    a {\n      color: var(--vp-c-accent);\n    }\n\n    :not(pre) > code {\n      background: var(--detail-c-soft);\n    }\n\n    summary {\n      position: relative;\n\n      margin: -1rem;\n      padding-block: 1em;\n      padding-inline: 3em 1.5em;\n\n      list-style: none;\n\n      font-size: var(--hint-font-size);\n\n      cursor: pointer;\n\n      // compatible with safari\n      &::-webkit-details-marker {\n        display: none;\n      }\n\n      &::marker {\n        color: transparent;\n        font-size: 0;\n      }\n\n      &::before {\n        @include svg.mask-svg(icons.$detail-icon);\n\n        content: ' ';\n\n        position: absolute;\n        inset-inline-start: 0.8em;\n        top: calc(50% - 0.5em);\n\n        width: 1em;\n        height: 1em;\n\n        font-size: 1.25rem;\n        line-height: normal;\n\n        transition:\n          color,\n          var(--vp-t-color),\n          transform var(--vp-t-transform);\n\n        transform: rotate(90deg);\n      }\n    }\n\n    &[open] > summary {\n      margin-bottom: 0.5em;\n\n      &::before {\n        transform: rotate(180deg);\n      }\n    }\n  }\n}\n","// stylelint-disable scss/operator-no-newline-after\n@use 'sass:math';\n@use 'sass:string';\n\n@function encode-svg($svg) {\n  $encoded: '';\n  $slice: 2000;\n  $index: 0;\n  $loops: math.ceil(math.div(string.length($svg), $slice));\n\n  @if not string.index($svg, xmlns) {\n    $svg: str-replace($svg, '<svg', '<svg xmlns=\"http://www.w3.org/2000/svg\"');\n  }\n\n  @for $i from 1 through $loops {\n    $chunk: string.slice($svg, $index, $index + $slice - 1);\n    $chunk: str-replace($chunk, '\"', \"'\");\n    $chunk: str-replace($chunk, '%', '%25');\n    $chunk: str-replace($chunk, '#', '%23');\n    $chunk: str-replace($chunk, '{', '%7B');\n    $chunk: str-replace($chunk, '}', '%7D');\n    $chunk: str-replace($chunk, '<', '%3C');\n    $chunk: str-replace($chunk, '>', '%3E');\n    $encoded: #{$encoded}#{$chunk};\n    $index: $index + $slice;\n  }\n\n  @return url('data:image/svg+xml;utf8,#{$encoded}');\n}\n\n@mixin background-svg($svg) {\n  background-image: encode-svg($svg);\n}\n\n@mixin mask-svg($svg, $color: currentColor) {\n  background-color: $color;\n\n  mask-image: encode-svg($svg);\n  mask-position: 50%;\n  mask-size: 1em;\n  mask-repeat: no-repeat;\n}\n\n@function str-replace($string, $search, $replace: '') {\n  $index: string.index($string, $search);\n\n  @return if(\n    $index,\n    string.slice($string, 1, $index - 1) + $replace +\n      str-replace(\n        string.slice($string, $index + string.length($search)),\n        $search,\n        $replace\n      ),\n    $string\n  );\n}\n"]}