dna-icon{display:inline-flex;width:1em;height:1em;line-height:1}dna-icon svg{width:100%;height:100%;overflow:visible;fill:currentcolor}dna-icon[\:missing]{background:red}/** * @module @chialab/dna-icons * @author Chialab srl (https://www.chialab.it) * @copyright Chialab srl 2020 * @license GPL-3.0-or-later */[\:tooltip]{--tooltip-origin-x: center;--tooltip-origin-y: center;--tooltip-animation: tooltipAnimation;position:absolute;z-index:999;display:flex;width:auto;max-width:var(--floating-max-width, none);animation-name:var(--tooltip-animation);animation-duration:var(--easing-time, .25s);animation-timing-function:var(--easing, ease-out);transform-origin:var(--tooltip-origin-x) var(--tooltip-origin-y);will-change:filter,opacity,transform}@media(prefers-reduced-motion){[\:tooltip]{animation-duration:0}}[\:tooltip]:not([\:open]){animation-direction:reverse}[\:tooltip][\:direction=south]{--tooltip-origin-x: center;--tooltip-origin-y: top}[\:tooltip][\:direction=south-east],[\:tooltip][\:direction=east-south]{--tooltip-origin-x: left;--tooltip-origin-y: top}[\:tooltip][\:direction=south-west],[\:tooltip][\:direction=west-south]{--tooltip-origin-x: right;--tooltip-origin-y: top}[\:tooltip][\:direction=north]{--tooltip-origin-x: center;--tooltip-origin-y: bottom}[\:tooltip][\:direction=north-east],[\:tooltip][\:direction=east-north]{--tooltip-origin-x: left;--tooltip-origin-y: bottom}[\:tooltip][\:direction=north-west],[\:tooltip][\:direction=west-north]{--tooltip-origin-x: right;--tooltip-origin-y: bottom}[\:tooltip] .tooltip__arrow{position:absolute;display:block}dna-tooltip{--floating-max-width: 30ch;min-height:calc(var(--spacing, 1rem) + 1.5em);margin:var(--spacing, 1rem);padding:calc(var(--spacing, 1rem) * .5) 0;background:var(--color-surface, #fff);border-radius:var(--radius, .25rem);filter:drop-shadow(var(--shadow-filter, 0 0 2px rgba(0, 0, 0, .5)))}@supports (height: 1lh){dna-tooltip{min-height:calc(var(--spacing, 1rem) + 1lh)}}dna-tooltip .tooltip__content{display:block;flex:1 auto;padding:0 calc(var(--spacing, 1rem) * .5);overflow:auto;overscroll-behavior:none;scrollbar-color:var(--scrollbar-thumb-color, #000) transparent;scrollbar-width:var(--scrollbar-width, 8px);-webkit-overflow-scrolling:touch}dna-tooltip .tooltip__content::-webkit-scrollbar{width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}dna-tooltip .tooltip__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color, #000);border-radius:var(--scrollbar-radius, 12px)}dna-tooltip .tooltip__content::-webkit-scrollbar-track{background:transparent;border-radius:var(--scrollbar-radius, 12px)}dna-tooltip .tooltip__content>p:first-child{margin-top:0}dna-tooltip .tooltip__content>p:last-child{margin-bottom:0}dna-tooltip[\:direction^=north] .tooltip__arrow{border-top:solid calc(var(--spacing, 1rem) * .5) var(--color-surface, #fff);border-right:solid calc(var(--spacing, 1rem) * .5) transparent;border-left:solid calc(var(--spacing, 1rem) * .5) transparent}dna-tooltip[\:direction^=south] .tooltip__arrow{border-right:solid calc(var(--spacing, 1rem) * .5) transparent;border-bottom:solid calc(var(--spacing, 1rem) * .5) var(--color-surface, #fff);border-left:solid calc(var(--spacing, 1rem) * .5) transparent}dna-tooltip[\:direction^=east] .tooltip__arrow{border-top:solid calc(var(--spacing, 1rem) * .5) transparent;border-right:solid calc(var(--spacing, 1rem) * .5) var(--color-surface, #fff);border-bottom:solid calc(var(--spacing, 1rem) * .5) transparent}dna-tooltip[\:direction^=west] .tooltip__arrow{border-top:solid calc(var(--spacing, 1rem) * .5) transparent;border-bottom:solid calc(var(--spacing, 1rem) * .5) transparent;border-left:solid calc(var(--spacing, 1rem) * .5) var(--color-surface, #fff)}@keyframes tooltipAnimation{0%{transform:scale(.75);opacity:0}to{transform:none;opacity:1}}/** * @module @chialab/dna-tooltip * @author Chialab srl (https://www.chialab.it) * @copyright Chialab srl 2020 * @license GPL-3.0-or-later */[\:button]{--button-focus-color: currentcolor;--button-focus-opacity: 0;position:relative;z-index:1;display:inline-flex;flex:none;justify-content:flex-start;align-items:center;gap:calc(var(--spacing, 1rem) * .5);margin:0;padding:calc(var(--spacing, 1rem) * .5 - var(--private-button-border-size, 0px));color:currentcolor;font-family:inherit;font-size:inherit;line-height:1;text-decoration:none;background:transparent;border-width:var(--private-button-border-size, 0);border-style:solid;border-color:currentcolor;border-radius:var(--radius, .25rem);outline:0;transform:translateZ(0);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}[\:button]>*{pointer-events:none}[\:button]:focus-visible:focus{outline:var(--outline, auto 2px #0077ff);outline-color:var(--outline-color, #0077ff);outline-offset:var(--outline-offset, .25rem)}[\:button]:after{position:absolute;top:calc(var(--private-button-border-size, 0px) * -1);left:calc(var(--private-button-border-size, 0px) * -1);z-index:-1;display:block;width:calc(100% + var(--private-button-border-size, 0px) * 2);height:calc(100% + var(--private-button-border-size, 0px) * 2);background:var(--button-focus-color, currentcolor);border-radius:inherit;opacity:var(--button-focus-opacity, 0);transition-timing-function:var(--easing, ease-out);transition-duration:var(--easing-time, .25s);transition-property:var(--button-focus-property, none);will-change:opacity;content:""}[\:button]:focus:focus-visible:after{--button-focus-opacity: .1}@media(hover:hover){[\:button]:not(:disabled):not([aria-disabled=true]):hover:after{--button-focus-opacity: .1}}[\:button][\:active]:not(:disabled):not([aria-disabled=true]):after{--button-focus-opacity: .2}[\:button] .button__icon{display:block;order:-1;width:1em;height:1em;overflow:visible;line-height:1;fill:currentcolor}[\:button][variant^=action] .button__contents:empty{display:none}[\:button][variant^=action] .button__contents:empty+.button__icon{width:1.5em;height:1.5em}[\:button][disabled],[\:button][aria-disabled=true]{opacity:.8}[\:button][variant^=action][disabled],[\:button][variant^=action][aria-disabled=true]{opacity:.5}[\:button]:not(:disabled):not([aria-disabled=true]){cursor:pointer}[\:button][variant^=action]{border-radius:calc(var(--spacing, 1rem) + 1em)}[\:button][variant=primary],[\:button][variant="action:primary"]{color:var(--color-primary--text, #fff);background:var(--color-primary, #000)}[\:button][variant=accent],[\:button][variant="action:accent"]{color:var(--color-accent--text, #fff);background:var(--color-accent, #005fcc)}[\:button][variant=secondary],[\:button][variant="action:secondary"]{--private-button-border-size: 1px;color:var(--color-primary, #000);background:var(--color-surface, #fff)}/** * @module @chialab/dna-button * @author Chialab srl (https://www.chialab.it) * @copyright Chialab srl 2020 * @license GPL-3.0-or-later */dna-backdrop{position:fixed;top:0;left:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;overflow:auto;overscroll-behavior:none;color:var(--color-overlay--text, #fff);background:var(--color-overlay, rgba(0, 0, 0, .8));outline:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation-name:backdropAnimation;animation-duration:var(--easing-time, .25s);animation-timing-function:var(--easing, ease-out);will-change:opacity}dna-backdrop:not([\:defined]){display:none}dna-backdrop:not([\:open]){animation-direction:reverse}dna-backdrop:focus:focus-visible{outline:var(--outline, auto 2px #0077ff);outline-color:var(--outline-color, #0077ff);outline-offset:calc(-1 * var(--outline-offset, .25rem))}dna-backdrop [is=dna-button].backdrop__close{position:absolute;top:var(--spacing, 1rem);right:var(--spacing, 1rem);display:block;margin:0;color:var(--color-overlay--text, #fff);mix-blend-mode:exclusion}dna-backdrop .backdrop__container{display:contents}@keyframes backdropAnimation{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion){dna-backdrop{animation-duration:0}}/** * @module @chialab/dna-backdrop * @author Chialab srl (https://www.chialab.it) * @copyright Chialab srl 2020 * @license GPL-3.0-or-later */dna-dialog{position:fixed;top:0;left:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;overflow:auto;overscroll-behavior:none;color:var(--color-overlay--text, #fff);background:var(--color-overlay, rgba(0, 0, 0, .8));outline:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation-name:dialogAnimation;animation-duration:var(--easing-time, .25s);animation-timing-function:var(--easing, ease-out);will-change:opacity}dna-dialog:not([\:defined]){display:none}dna-dialog:not([\:open]){animation-direction:reverse}dna-dialog:focus:focus-visible{outline:var(--outline, auto 2px #0077ff);outline-color:var(--outline-color, #0077ff);outline-offset:calc(-1 * var(--outline-offset, .25rem))}dna-dialog .dialog__container{position:relative;z-index:2;display:flex;flex-direction:column;width:50ch;max-width:calc(100% - var(--spacing, 1rem) * 2);max-height:calc(100% - var(--spacing, 1rem) * 2);margin:0 auto;overflow:hidden;color:var(--color-primary, #000);background:var(--color-surface, #fff);border-radius:var(--radius, .25rem);animation-name:showDialogContentAnimation;animation-duration:inherit;animation-timing-function:var(--easing, ease-out);will-change:transform,opacity}dna-dialog:not([\:open]) .dialog__container{animation-name:hideDialogContentAnimation}dna-dialog .dialog__content{flex:1 auto;padding:var(--spacing, 1rem);overflow:auto;overscroll-behavior:none;scrollbar-color:var(--scrollbar-thumb-color, #000) transparent;scrollbar-width:var(--scrollbar-width, 8px);-webkit-overflow-scrolling:touch;outline:0}dna-dialog .dialog__content::-webkit-scrollbar{width:var(--scrollbar-width, 8px);height:var(--scrollbar-width, 8px)}dna-dialog .dialog__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color, #000);border-radius:var(--scrollbar-radius, 12px)}dna-dialog .dialog__content::-webkit-scrollbar-track{background:transparent;border-radius:var(--scrollbar-radius, 12px)}dna-dialog .dialog__content:focus:focus-visible{outline:var(--outline, auto 2px #0077ff);outline-color:var(--outline-color, #0077ff);outline-offset:calc(-1 * var(--outline-offset, .25rem))}dna-dialog .dialog__title>*:first-child,dna-dialog .dialog__content>*:first-child{margin-top:0}dna-dialog .dialog__title>*:last-child,dna-dialog .dialog__content>*:last-child{margin-bottom:0}dna-dialog .dialog__commands{flex:none;padding:calc(var(--spacing, 1rem) * .5)}dna-dialog .dialog__commands:empty{display:none}dna-dialog .dialog__commands>*+*{margin-left:calc(var(--spacing, 1rem) * .5)}@keyframes dialogAnimation{0%{opacity:0}to{opacity:1}}@keyframes showDialogContentAnimation{0%{transform:scale(.95)}to{transform:none}}@keyframes hideDialogContentAnimation{0%{transform:none}to{transform:scale(.95)}}@media(prefers-reduced-motion){dna-dialog,dna-dialog .dialog__container{animation-duration:0}}/** * @module @chialab/dna-dialog * @author Chialab srl (https://www.chialab.it) * @copyright Chialab srl 2020 * @license GPL-3.0-or-later */