{"version":3,"file":"iframe_styles.min.css","mappings":"AAEA,MACE,gBAGF,KACE,kBAGF,wDAME,sCAGF,qCAEE,6IACE,CAcJ,mBACE,gIACE,CAEF,oBAGF,oBACE,eAGF,iBACE,mBACA,gBAGF,wBACE,WAGF,oBACE,qCACA,yCACA,4CAGF,oCAEE,oCACA,qBACA,mBAEA,0EACE,8DCnEJ,2BACE,6BAEA,aACA,eACA,uBAEA,wBAPF,2BAQI,aAEA,WADA,oBAEA,wDAIA,mBAIJ,uBACE,oBACA,aACA,cACA,sBACA,gBACA,aAEA,wBARF,uBASI,UAIJ,0BACE,mBACA,aACA,eACA,8BAGF,yBACE,cACA,mBAEA,8BACE,cAIJ,sBACE,cACA,iBACA,qBCnDF,4BACE,eACA,gBAGF,8BACE,0BACA,4BACA,6BAGF,kBACE,6EAKA,kDACE,qBAAsB,CACtB,yBAA0B,CAI9B,0BACE,wBAAyB,CACzB,uBAAwB,CACxB,6BAGF,uBACE,gDACA,sQAiCA,2BACA,2BACA,0CACE,CAGF,sBACA,cACA,iBAGF,0BACE,0BACA,4BAA6B,CAE7B,gDACA,mBC1EF,6BACE,SAGF,4BACE,aACA,eACA,cAEA,wBALF,4BAMI,aAEA,WADA,oBAEA,wDAIA,UAIJ,4BACE,oBACA,aACA,cACA,sBACA,gBACA,aAEA,wBARF,4BASI,UAOJ,2BACE,yBACA,cACA,iBACA,kBAGF,4DAEE,QACA,kBAGF,gCACE,uOAEA,0BACA,SAMF,mDAEE,cACA,eAGF,0BACE,kCAGF,gCACE,qBAGF,0BACE,yBACA,sBACA,iDACA,cACA,gBACA,mBACA","sources":["webpack:///../../scss/iframes/_base.scss","webpack:///../../scss/iframes/_font.scss","webpack:///../../scss/iframes/_size.scss","webpack:///../../scss/iframes/_color.scss"],"sourcesContent":["@use 'pkg:accoutrement' as tools;\n\n:root {\n  line-height: tools.ratio('line-height');\n}\n\nbody {\n  overflow-x: hidden;\n}\n\n[data-herman-label],\n[data-herman-th],\n[data-herman-code] {\n  // These items are purposely sized without root-based\n  // units in order to make them appear similar in size\n  // no matter what the default root size is in a project.\n  font-size: clamp(14px, calc(60% + 0.8vw), 18px);\n}\n\n[data-herman-label],\n[data-herman-th] {\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    'Fira Sans',\n    'Droid Sans',\n    'Helvetica Neue',\n    sans-serif;\n}\n\n[data-herman-code] {\n  font-family:\n    Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono',\n    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;\n  font-weight: inherit;\n}\n\n[data-herman-table] {\n  max-width: 100%;\n}\n\n[data-herman-th] {\n  padding-bottom: 1em;\n  text-align: left;\n}\n\n[data-herman-th='spacer'] {\n  width: 100%;\n}\n\n[data-herman-label] {\n  background: var(--herman-label-color);\n  margin: var(--herman-label-margin, 0.5em 0);\n  padding: var(--herman-label-padding, 0.25em 0);\n}\n\n[data-herman-th],\n[data-herman-cell] {\n  background: var(--herman-cell-color);\n  padding: 0.25rem 0.5rem;\n  white-space: nowrap;\n\n  &[data-herman-label] {\n    background: var(--herman-label-color, var(--herman-cell-color));\n  }\n}\n","@use 'pkg:accoutrement' as tools;\n\n[data-herman-preview='font'] {\n  --herman-label-color: #{tools.color('slight')};\n\n  display: flex;\n  flex-wrap: wrap;\n  margin: tools.size('gutter') tools.negative('shim') 0;\n\n  @supports (display: grid) {\n    display: grid;\n    grid-auto-rows: auto;\n    gap: tools.size('gutter');\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(tools.size('font-preview'), 1fr)\n    );\n    margin: tools.size('gutter') 0 0;\n  }\n}\n\n[data-herman-fontface] {\n  align-items: stretch;\n  display: flex;\n  flex: 1 0 tools.size('font-preview');\n  flex-direction: column;\n  font-size: tools.size('code');\n  margin: tools.size('shim');\n\n  @supports (display: grid) {\n    margin: 0;\n  }\n}\n\n[data-herman-font='sample'] {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n[data-herman-font='lorem'] {\n  flex: 1 1 auto;\n  padding-left: tools.size('shim');\n\n  span {\n    display: block;\n  }\n}\n\n[data-herman-font='aa'] {\n  flex: 0 1 auto;\n  font-size: tools.size('specimen-aa');\n  padding-left: tools.size('quarter-shim');\n}\n","@use 'pkg:accoutrement' as tools;\n\n[data-herman-size='overflow'] {\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[data-herman-size~='highlight'] {\n  --herman-size-bar: #{tools.color('action')};\n  --herman-cell-color: #{tools.color('callout')};\n  --herman-label-color: #{tools.color('callout')};\n}\n\n[data-herman-viz] {\n  margin: var(--herman-viz-before, 0.25rem) auto\n    var(--herman-viz-after, 0.25rem) 0;\n}\n\n[data-herman-size~='viz-row'] {\n  [data-herman-viz='bar'] {\n    --herman-viz-before: 0;\n    --herman-viz-after: 0.5rem;\n  }\n}\n\n[data-herman-table~='text'] {\n  --herman-viz-before: 1rem;\n  --herman-viz-after: 1rem;\n  --herman-label-color: #{tools.color('callout')};\n}\n\n[data-herman-viz~='bar'] {\n  background-color: var(--herman-size-bar, #{tools.color('border')});\n  background-image: var(\n    --herman-size-bar-image,\n    linear-gradient(\n      to left,\n      tools.color('underline') 1px,\n      transparent 1px,\n      transparent\n    ),\n    linear-gradient(\n      to left,\n      tools.color(\n          'border-light',\n          (\n            'rgba': 0.5,\n          )\n        )\n        1px,\n      transparent 1px,\n      transparent\n    ),\n    linear-gradient(\n      to left,\n      tools.color(\n          'border-light',\n          (\n            'rgba': 0.25,\n          )\n        )\n        1px,\n      transparent 1px,\n      transparent\n    )\n  );\n  background-position: 0 100%;\n  background-repeat: repeat-x;\n  background-size:\n    100px 75%,\n    10px 50%,\n    5px 25%;\n  border-radius: tools.size('quarter-shim');\n  display: block;\n  min-height: 1.5em;\n}\n\n[data-herman-viz~='border'] {\n  --herman-size-bar: #{tools.color('slight')};\n  --herman-size-bar-image: none;\n\n  border-color: var(--herman-border-color, #{tools.color('border')});\n  border-style: solid;\n}\n","// Preview Layouts\n// ===============\n\n@use 'pkg:accoutrement' as tools;\n\n// Color Preview\n// -------------\n\n[data-herman-preview='colors'] {\n  margin: 0;\n}\n\n[data-herman-color-palette] {\n  display: flex;\n  flex-wrap: wrap;\n  margin: tools.negative('shim');\n\n  @supports (display: grid) {\n    display: grid;\n    grid-auto-rows: auto;\n    gap: tools.size('gutter');\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(tools.size('color-preview'), 1fr)\n    );\n    margin: 0;\n  }\n}\n\n[data-herman-color-preview] {\n  align-items: stretch;\n  display: flex;\n  flex: 1 0 tools.size('color-preview');\n  flex-direction: column;\n  font-size: tools.size('code');\n  margin: tools.size('shim');\n\n  @supports (display: grid) {\n    margin: 0;\n  }\n}\n\n// Color Swatch\n// ------------\n\n[data-herman-color-swatch] {\n  border: 1px solid tools.color('border');\n  height: tools.size('color-swatch');\n  min-width: tools.size('color-swatch');\n  position: relative;\n}\n\n[data-herman-transparency-grid],\n[data-herman-color-overlay] {\n  inset: 0;\n  position: absolute;\n}\n\n[data-herman-transparency-grid] {\n  background: url('data:image/svg+xml;utf8,<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 20 20\"><rect width=\"10\" height=\"10\"/><rect x=\"10\" y=\"10\" width=\"10\" height=\"10\"/></svg>')\n    center repeat scroll;\n  background-size: 0.5em 0.5em;\n  left: 50%;\n}\n\n// Color Info\n// ----------\n\n[data-herman-color-name],\n[data-herman-color-value] {\n  display: block;\n  padding: tools.size('half-shim');\n}\n\n[data-herman-label='color'] {\n  --herman-label-margin: #{tools.size('half-shim')} 0 0;\n}\n\n[data-herman-color-name-option] {\n  display: inline-block;\n}\n\n[data-herman-color-value] {\n  background-color: tools.color('slight');\n  border-radius: tools.size('quarter-shim');\n  box-shadow: 0 0 tools.size('quarter-shim') tools.color('code-shadow') inset;\n  color: tools.color('text-light');\n  font-weight: normal;\n  margin-top: tools.size('quarter-shim');\n  white-space: nowrap;\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}