polpo 0.1.22 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.css +1 -1
- package/package.json +1 -1
package/dist/components.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components{.polpo-custom-line{--color: attr(data-color, "currentColor");--size: attr(data-size, 1px);--spacing: attr(data-spacing, 1px);--dashSize: attr(data-dash-size, 1px);&.horizontal,&.vertical{background:var(--color);display:inline-block;border-radius:100px}&.horizontal{width:100%;height:var(--size);&.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / calc(var(--spacing) + var(--size)) 100%}&.dashed{background:repeating-linear-gradient(90deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}&.vertical{height:100%;width:var(--size);&.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / 100% calc(var(--spacing) + var(--size))}&.dashed{background:repeating-linear-gradient(0deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}}}@layer components{.polpo-accordion{display:grid}.polpo-accordion-item{display:grid;position:relative;.polpo-accordion-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;cursor:pointer;position:sticky;top:0;padding:20px 0;&.has-start-content{grid-template-columns:auto 1fr auto}}.polpo-accordion-header-content{display:grid}.polpo-accordion-toggle-icon{transition:all .3s ease;&.is-open{transform:rotate(-90deg)}}.polpo-accordion-body{padding:10px 0 20px}}}@layer components{.polpo-flip-card{--cardZIndex: attr(data-zIndex);--flipSpeed: attr(data-flipSpeed, .5s);--frontRotate: attr(data-frontRotate);--backRotate: attr(data-backRotate);perspective:1000px;z-index:var(--cardZIndex);.polpo-flipper{height:100%;position:relative;width:100%;transform-style:preserve-3d}.front,.back{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;transition:var(--flipSpeed);height:100%;left:0;top:0;width:100%}.front{position:relative;transform:var(--frontRotate);z-index:2}.back{position:absolute;transform:var(--backRotate)}.is-flipped{.front{position:absolute}.back{position:relative}}}}@layer components{.polpo-hover-card{display:inline-block;transition:all .3s ease;.polpo-hover-card-layer{transition:all .1s ease;width:100%;height:100%;display:grid}}}@layer components{.polpo-typography{margin:0;padding:.5em 0 .4em;&.primary{color:var(--color-primary-500)}&.secondary{color:var(--color-secondary-500)}&.tertiary{color:var(--color-tertiary-500)}&.active{color:var(--color-active-500)}&.alert{color:var(--color-alert-500)}&.warning{color:var(--color-warning-500)}&.info{color:var(--color-info-500)}&.recommended-width{max-width:70ch}&.code-family{font-family:monospace}&.no-padding{padding:0}&.nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.nowrap-max-lines{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}&.nowrap-max-lines-2{-webkit-line-clamp:2;line-clamp:2}&.nowrap-max-lines-3{-webkit-line-clamp:3;line-clamp:3}&.nowrap-max-lines-4{-webkit-line-clamp:4;line-clamp:4}&.nowrap-max-lines-5{-webkit-line-clamp:5;line-clamp:5}&.hero{font-size:var(--text-hero, clamp(4rem, 10vw, 5.5rem));line-height:var(--tw-leading, var(--text-hero--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-hero--letter-spacing, -4px));font-weight:var(--tw-font-weight, var(--text-hero--font-weight, bolder))}&.header1{font-size:var(--text-header1, clamp(3rem, 8vw, 4rem));line-height:var(--tw-leading, var(--text-header1--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header1--letter-spacing, -3px));font-weight:var(--tw-font-weight, var(--text-header1--font-weight, bold))}&.header2{font-size:var(--text-header2, clamp(2rem, 6vw, 3rem));line-height:var(--tw-leading, var(--text-header2--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header2--letter-spacing, -2px));font-weight:var(--tw-font-weight, var(--text-header2--font-weight, bold))}&.header3{font-size:var(--text-header3, clamp(1.5rem, 4vw, 2rem));line-height:var(--tw-leading, var(--text-header3--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header3--letter-spacing, -1px));font-weight:var(--tw-font-weight, var(--text-header3--font-weight, bold))}&.header4{font-size:var(--text-header4, clamp(1.2rem, 3vw, 1.5rem));line-height:var(--tw-leading, var(--text-header4--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header4--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-header4--font-weight, bold))}&.body{font-size:var(--text-body, 1rem);line-height:var(--tw-leading, var(--text-body--line-height, 1.6));letter-spacing:var(--tw-tracking, var(--text-body--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-body--font-weight, regular))}&.label{font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6))}&.small{font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular))}&.bold{font-weight:700}&.regular{font-weight:400}&.light{font-weight:300}}}@layer components{.polpo-badge{--background: attr(data-background, var(--color-primary-500));--text: attr(data-text, var(--color-primary-50));--background-selected: attr(data-background-selected, var(--color-primary-700));--text-selected: attr(data-text-selected, var(--color-primary-50));padding:.4em .8em;border-radius:.3em;border:1px solid;background:var(--background);color:var(--text);transition:all .3s ease;display:inline-block;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));user-select:none;&.no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&.rounded-none{border-radius:0}&.rounded-small{border-radius:.25em}&.rounded-medium{border-radius:.5em}&.rounded-large{border-radius:1em}&.rounded-full{border-radius:100rem}&:hover,&.is-selected{background:var(--background-selected);color:var(--text-selected)}}}@layer components{.polpo-ripple{position:absolute;display:block;inset:0;overflow:hidden;border-radius:inherit;z-index:1;.ripple-effect{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:0;height:0;pointer-events:none;animation:ripple-effect infinite;opacity:.4}}@keyframes ripple-effect{to{width:300px;height:300px;opacity:0;filter:blur(5px)}}}@layer components{.polpo-button{--button-blur: 2px;--color: var(--color-gray-800);--solid-background: var(--color-gray-800);--solid-text: var(--color-gray-50);--solid-hover-background: var(--color-gray-700);--solid-active-background: var(--color-gray-900);--flat-text: var(--color-gray-700);--flat-background: hsl(from var(--color-gray-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-gray-300) h s l / 50%);--flat-active-background: hsl(from var(--color-gray-300) h s l / 80%);--outlined-text: var(--color-gray-600);--outlined-hover-background: hsl(from var(--color-gray-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-gray-500) h s l / 30%);--text-hover-background: hsl(from var(--color-gray-300) h s l / 20%);--text-active-background: hsl(from var(--color-gray-400) h s l / 30%);--shadow-color: hsl(from var(--color-gray-800) h s l / 20%);--focus-background: hsl(from var(--color-gray-100) h s l / 20%);display:flex;position:relative;flex-direction:row;justify-content:center;align-items:center;padding:.625em 2.1875em;gap:.625em;width:auto;border-radius:.5em;font-weight:700;font-size:var(--text-label);cursor:pointer;outline:none;transition:all .15s ease;user-select:none;white-space:nowrap;&.icon{padding:.625em}&.full{width:100%}&.no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&.size-small{font-size:var(--text-small)}&.size-regular{font-size:var(--text-label)}&.size-large{font-size:var(--text-body)}&.radius-none{border-radius:0}&.radius-small{border-radius:.25em}&.radius-medium{border-radius:.5em}&.radius-large{border-radius:1em}&.radius-full{border-radius:100rem}&.is-loading{cursor:progress}&:not(:disabled):not(.is-loading){&:hover,&:active,&:focus-visible{backdrop-filter:blur(var(--button-blur))}&:hover{transform:scale(1.01);&:not(.text){box-shadow:0 1.4em .5em -1em hsl(from var(--color-black) h s l / 20%),0 .7em 1em -.5em hsl(from var(--color-black) h s l / 20%)}}&:active{transform:scale(.98);&:not(.text){box-shadow:0 .3em .4em -.2em hsl(from var(--color-black) h s l / 20%),0 .2em .8em -.1em hsl(from var(--color-black) h s l / 20%)}}}color:var(--color);.ripple-effect{background:var(--color)}&.solid{background:var(--solid-background);color:var(--solid-text);backdrop-filter:blur(var(--button-blur));.ripple-effect{background:var(--solid-text)}&:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--solid-hover-background)}&:hover{background:var(--solid-hover-background)}&:active{background:var(--solid-active-background)}}&.flat{background:var(--flat-background);backdrop-filter:blur(var(--button-blur));color:var(--flat-text);&:hover{background:var(--flat-hover-background)}&:active{background:var(--flat-active-background)}}&.outlined{background:transparent;border:1px solid;color:var(--outlined-text);&:hover{background:var(--outlined-hover-background)}&:active{background:var(--outlined-active-background)}}&.text{background:transparent;&:hover{background:var(--text-hover-background)}&:active{background:var(--text-active-background)}}&:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--focus-background)}&.primary{--color: var(--color-primary-500);--solid-background: var(--color-primary-400);--solid-text: var(--color-primary-foreground);--solid-hover-background: var(--color-primary-300);--solid-active-background: var(--color-primary-500);--flat-text: var(--color-primary-700);--flat-background: hsl(from var(--color-primary-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-primary-300) h s l / 50%);--flat-active-background: hsl(from var(--color-primary-300) h s l / 80%);--outlined-text: var(--color-primary-600);--outlined-hover-background: hsl(from var(--color-primary-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-primary-500) h s l / 30%);--text-hover-background: hsl(from var(--color-primary-300) h s l / 20%);--text-active-background: hsl(from var(--color-primary-400) h s l / 30%);--shadow-color: hsl(from var(--color-primary-500) h s l / 20%);--focus-background: hsl(from var(--color-primary-200) h s l / 20%)}&.secondary{--color: var(--color-secondary-500);--solid-background: var(--color-secondary-400);--solid-text: var(--color-secondary-foreground);--solid-hover-background: var(--color-secondary-300);--solid-active-background: var(--color-secondary-500);--flat-text: var(--color-secondary-700);--flat-background: hsl(from var(--color-secondary-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-secondary-300) h s l / 50%);--flat-active-background: hsl(from var(--color-secondary-300) h s l / 80%);--outlined-text: var(--color-secondary-600);--outlined-hover-background: hsl(from var(--color-secondary-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-secondary-500) h s l / 30%);--text-hover-background: hsl(from var(--color-secondary-300) h s l / 20%);--text-active-background: hsl(from var(--color-secondary-400) h s l / 30%);--shadow-color: hsl(from var(--color-secondary-500) h s l / 20%);--focus-background: hsl(from var(--color-secondary-100) h s l / 20%)}&.tertiary{--color: var(--color-tertiary-500);--solid-background: var(--color-tertiary-400);--solid-text: var(--color-tertiary-foreground);--solid-hover-background: var(--color-tertiary-300);--solid-active-background: var(--color-tertiary-500);--flat-text: var(--color-tertiary-700);--flat-background: hsl(from var(--color-tertiary-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-tertiary-300) h s l / 50%);--flat-active-background: hsl(from var(--color-tertiary-300) h s l / 80%);--outlined-text: var(--color-tertiary-600);--outlined-hover-background: hsl(from var(--color-tertiary-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-tertiary-500) h s l / 30%);--text-hover-background: hsl(from var(--color-tertiary-300) h s l / 20%);--text-active-background: hsl(from var(--color-tertiary-400) h s l / 30%);--shadow-color: hsl(from var(--color-tertiary-500) h s l / 20%);--focus-background: hsl(from var(--color-tertiary-100) h s l / 20%)}&.active{--color: var(--color-active-500);--solid-background: var(--color-active-400);--solid-text: var(--color-active-foreground);--solid-hover-background: var(--color-active-300);--solid-active-background: var(--color-active-500);--flat-text: var(--color-active-700);--flat-background: hsl(from var(--color-active-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-active-300) h s l / 50%);--flat-active-background: hsl(from var(--color-active-300) h s l / 80%);--outlined-text: var(--color-active-600);--outlined-hover-background: hsl(from var(--color-active-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-active-500) h s l / 30%);--text-hover-background: hsl(from var(--color-active-300) h s l / 20%);--text-active-background: hsl(from var(--color-active-400) h s l / 30%);--shadow-color: hsl(from var(--color-active-500) h s l / 20%);--focus-background: hsl(from var(--color-active-100) h s l / 20%)}&.warning{--color: var(--color-warning-500);--solid-background: var(--color-warning-400);--solid-text: var(--color-warning-foreground);--solid-hover-background: var(--color-warning-300);--solid-active-background: var(--color-warning-500);--flat-text: var(--color-warning-700);--flat-background: hsl(from var(--color-warning-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-warning-300) h s l / 50%);--flat-active-background: hsl(from var(--color-warning-300) h s l / 80%);--outlined-text: var(--color-warning-600);--outlined-hover-background: hsl(from var(--color-warning-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-warning-500) h s l / 30%);--text-hover-background: hsl(from var(--color-warning-300) h s l / 20%);--text-active-background: hsl(from var(--color-warning-400) h s l / 30%);--shadow-color: hsl(from var(--color-warning-500) h s l / 20%);--focus-background: hsl(from var(--color-warning-100) h s l / 20%)}&.alert{--color: var(--color-alert-500);--solid-background: var(--color-alert-400);--solid-text: var(--color-alert-foreground);--solid-hover-background: var(--color-alert-300);--solid-active-background: var(--color-alert-500);--flat-text: var(--color-alert-700);--flat-background: hsl(from var(--color-alert-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-alert-300) h s l / 50%);--flat-active-background: hsl(from var(--color-alert-300) h s l / 80%);--outlined-text: var(--color-alert-600);--outlined-hover-background: hsl(from var(--color-alert-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-alert-500) h s l / 30%);--text-hover-background: hsl(from var(--color-alert-300) h s l / 20%);--text-active-background: hsl(from var(--color-alert-400) h s l / 30%);--shadow-color: hsl(from var(--color-alert-500) h s l / 20%);--focus-background: hsl(from var(--color-alert-100) h s l / 20%)}&.info{--color: var(--color-info-500);--solid-background: var(--color-info-400);--solid-text: var(--color-info-foreground);--solid-hover-background: var(--color-info-300);--solid-active-background: var(--color-info-500);--flat-text: var(--color-info-700);--flat-background: hsl(from var(--color-info-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-info-300) h s l / 50%);--flat-active-background: hsl(from var(--color-info-300) h s l / 80%);--outlined-text: var(--color-info-600);--outlined-hover-background: hsl(from var(--color-info-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-info-500) h s l / 30%);--text-hover-background: hsl(from var(--color-info-300) h s l / 20%);--text-active-background: hsl(from var(--color-info-400) h s l / 30%);--shadow-color: hsl(from var(--color-info-500) h s l / 20%);--focus-background: hsl(from var(--color-info-100) h s l / 20%)}&.accent{--color: var(--color-accent-500);--solid-background: var(--color-accent-400);--solid-text: var(--color-accent-foreground);--solid-hover-background: var(--color-accent-300);--solid-active-background: var(--color-accent-500);--flat-text: var(--color-accent-700);--flat-background: hsl(from var(--color-accent-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-accent-300) h s l / 50%);--flat-active-background: hsl(from var(--color-accent-300) h s l / 80%);--outlined-text: var(--color-accent-600);--outlined-hover-background: hsl(from var(--color-accent-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-accent-500) h s l / 30%);--text-hover-background: hsl(from var(--color-accent-300) h s l / 20%);--text-active-background: hsl(from var(--color-accent-400) h s l / 30%);--shadow-color: hsl(from var(--color-accent-500) h s l / 20%);--focus-background: hsl(from var(--color-accent-100) h s l / 20%)}&.highlight{--color: var(--color-highlight-500);--solid-background: var(--color-highlight-400);--solid-text: var(--color-highlight-foreground);--solid-hover-background: var(--color-highlight-300);--solid-active-background: var(--color-highlight-500);--flat-text: var(--color-highlight-700);--flat-background: hsl(from var(--color-highlight-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-highlight-300) h s l / 50%);--flat-active-background: hsl(from var(--color-highlight-300) h s l / 80%);--outlined-text: var(--color-highlight-600);--outlined-hover-background: hsl(from var(--color-highlight-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-highlight-500) h s l / 30%);--text-hover-background: hsl(from var(--color-highlight-300) h s l / 20%);--text-active-background: hsl(from var(--color-highlight-400) h s l / 30%);--shadow-color: hsl(from var(--color-highlight-500) h s l / 20%);--focus-background: hsl(from var(--color-highlight-100) h s l / 20%)}&:disabled{color:var(--color-gray-300);pointer-events:none}&.solid:disabled{background:var(--color-gray-300);color:var(--color-gray-100)}&.flat:disabled{background:hsl(from var(--color-gray-100) h s l / 80%)}&.outlined:disabled,&.text:disabled{background:transparent}}}@layer components{.polpo-cursor-overlay{position:fixed;top:0;left:0;width:100%;height:100%;cursor:none;pointer-events:none}.polpo-cursor{position:fixed;border-radius:50%;z-index:99999999;pointer-events:none;transform:translateZ(0);@media(any-pointer:coarse){display:none}&.outer-circle{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid var(--color-primary-500);box-sizing:border-box;z-index:99999999;opacity:.5;transition:all .08s ease-out,width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;&.cursor-hover{margin-left:-40px;margin-top:-40px;width:80px;height:80px;background-color:var(--color-primary-500);opacity:.3}&.cursor-text{margin-left:-2px;margin-top:-40px;width:4px;height:80px;background-color:var(--color-primary-500);opacity:.3}}&.inner-circle{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:99999999;background-color:var(--color-primary-500);transition:opacity .3s ease-in-out;opacity:1;&.cursor-hover{opacity:0}}}}@layer components{.checkbox{border-radius:40%;background:var(--color-background-paper);transition:all .3s ease;width:1em;height:1em;margin:2px;outline:1px solid;display:flex;position:relative;.checkbox-input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:2}&.size-small{font-size:1em}&.size-regular{font-size:1.2em}&.size-large{font-size:1.4em}}.checkbox-fill{transition:all .2s ease-out;border-radius:inherit;margin:auto;width:0;height:0;overflow:hidden;position:relative;display:grid;place-content:center;place-items:center;.checkbox-icon{font-size:.7em;z-index:1;opacity:0;transition:opacity .3s ease}}.checkbox-container{--color: var(--color-gray-800);--color-icon: var(--color-gray-50);--color-hover: hsl(from var(--color-gray-800) h s l / 50%);display:grid;grid-auto-flow:column;grid-auto-columns:auto 1fr;align-items:center;gap:.5em;width:fit-content;.checkbox-label{cursor:pointer;user-select:none;width:100%}.checkbox{color:var(--color);&.is-checked{.checkbox-fill{width:100%;height:100%;background:var(--color);color:var(--color-icon)}.checkbox-icon{opacity:1}}}.checkbox:hover,&:has(.checkbox-label:hover) .checkbox{box-shadow:0 0 0 .3em var(--color-hover);.checkbox-fill{width:20%;height:20%;border-radius:20%;background:var(--color-hover);color:var(--color-icon)}&:is(.is-checked){.checkbox-fill{width:100%;height:100%;border-radius:inherit;background:var(--color)}}}.checkbox:focus,&:has(.checkbox-input:focus) .checkbox,&:has(.checkbox-label:focus) .checkbox{box-shadow:0 0 0 .3em var(--color-hover)}&.color-primary{--color: var(--color-primary-500);--color-icon: var(--color-primary-50);--color-hover: hsl(from var(--color-primary-500) h s l / 50%)}&.color-secondary{--color: var(--color-secondary-500);--color-icon: var(--color-secondary-50);--color-hover: hsl(from var(--color-secondary-500) h s l / 50%)}&.color-tertiary{--color: var(--color-tertiary-500);--color-icon: var(--color-tertiary-50);--color-hover: hsl(from var(--color-tertiary-500) h s l / 50%)}&.color-active{--color: var(--color-active-500);--color-icon: var(--color-active-50);--color-hover: hsl(from var(--color-active-500) h s l / 50%)}&.color-warning{--color: var(--color-warning-500);--color-icon: var(--color-warning-50);--color-hover: hsl(from var(--color-warning-500) h s l / 50%)}&.color-alert{--color: var(--color-alert-500);--color-icon: var(--color-alert-50);--color-hover: hsl(from var(--color-alert-500) h s l / 50%)}&.color-info{--color: var(--color-info-500);--color-icon: var(--color-info-50);--color-hover: hsl(from var(--color-info-500) h s l / 50%)}}}@layer components{.form-field{display:grid;grid-auto-columns:auto;gap:.5em;transition:all .2s ease;.field-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.field-left-icon,.field-right-icon{font-size:1em}.field-left-icon{margin-right:1em}.field-right-icon{margin-left:1em}.field-message{display:grid;grid-auto-flow:column;gap:5px;align-items:center;justify-content:start}&.variant-content-border{.field-content{border:1px solid var(--color-border);border-radius:4px;padding:1em;background:var(--color-background)}}&.variant-content-line{.field-content{border-bottom:1px solid;padding:.5em 0}}&.variant-full-border{border:1px solid var(--color-border);border-radius:4px;padding:.5em 0;background:var(--color-background);.field-label,.field-content,.field-message{padding:0 1em}}&.variant-inline{grid-auto-flow:column;padding:.5em 0;align-items:center;.field-label{width:auto}}&.error{color:var(--color-alert-500);border-color:var(--color-alert-500)}&.focus{color:var(--color-info-500);border-color:var(--color-info-500)}&.error,&.focus{.field-left-icon,.field-right-icon,.field-children{color:var(--color-foreground);border-color:var(--color-foreground)}}.field-children>*{width:100%}}}@layer components{.polpo-modal{position:fixed;z-index:1001;pointer-events:none}.polpo-modal-content{background:var(--color-background-paper);pointer-events:initial;&.animation-fade-down{animation:fadeInDown .2s ease;&.modal-close{animation:fadeOutUp .2s ease;transform:translateY(-10px);opacity:0}}&.animation-bounce{animation:bounceIn .5s ease;&.modal-close{animation:bounceOut .5s ease;transform:scale3d(.3,.3,.3);opacity:0}}}.polpo-modal-backdrop{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;animation:backdropOpen .5s cubic-bezier(.215,.61,.355,1);&.backdrop-close{animation:backdropClose .5s cubic-bezier(.215,.61,.355,1);opacity:0;transform:translateY(-10px)}}@keyframes backdropOpen{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes backdropClose{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}}@layer components{.polpo-action-modal{background:transparent;.polpo-modal-content{&.shake-animation{animation:headShake .6s linear}}}.polpo-action-modal-content{position:relative;.polpo-action-modal-body{box-shadow:0 0 10px -5px;border-radius:10px;overflow:hidden;display:grid}.polpo-action-modal-content{background:var(--color-background);padding:3em 4em 2em;display:grid;gap:1em}&.no-padding .polpo-action-modal-content{padding:2em 0 0}&:has(.action-modal-icon) .polpo-action-modal-content{padding-top:4em}&.back-card{&:before{content:"";position:absolute;width:90%;height:100%;top:8px;left:50%;transform:translate(-50%);z-index:-1;background:var(--color-primary-500);border-radius:10px;display:block;transition:top .3s cubic-bezier(.81,-.52,.42,2.5)}}.action-modal-icon{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--color-primary-500);color:var(--color-primary-50);padding:0;border-radius:50%;width:2em;height:2em;display:grid;place-content:center;transition:box-shadow .3s cubic-bezier(.81,-.52,.42,2.5);z-index:1;box-shadow:0 0 hsl(from var(--color-primary-500) h s l / 53%),0 0 hsl(from var(--color-primary-500) h s l / 40%),0 0 hsl(from var(--color-primary-500) h s l / 27%),0 0 hsl(from var(--color-primary-500) h s l / 14%)}.close-modal-button{width:1em;height:1em;border-radius:50%;cursor:pointer;background:var(--color-background);position:absolute;top:10px;right:5px;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));opacity:0;transition:opacity .3s ease;z-index:1}&.line-on-top{.polpo-action-modal-content{border-top:5px solid var(--color-primary-500)}}&:hover{.action-modal-icon{box-shadow:0 0 0 7px hsl(from var(--color-primary-500) h s l / 53%),0 0 0 14px hsl(from var(--color-primary-500) h s l / 40%),0 0 0 21px hsl(from var(--color-primary-500) h s l / 27%),0 0 0 28px hsl(from var(--color-primary-500) h s l / 14%)}.close-modal-button{opacity:1}&:before{top:15px}}}}@layer components{.polpo-aside-modal{color:var(--color-foreground);overflow:auto;height:100%;.polpo-aside-modal-content{padding:2em}.close-modal-button{border-radius:50%;cursor:pointer;display:grid;place-content:center;background:var(--color-background);border:4px solid var(--color-primary-500);position:absolute;padding:.5em}&.left{border-right:4px solid var(--color-primary-500);animation:slideIn-left .3s ease;&.modal-close{animation:slideOut-left .3s ease;transform:translate(-100%)}.close-modal-button{top:2em;left:100%;transform:translate(calc(-50% + 2px))}}&.right{border-left:4px solid var(--color-primary-500);animation:slideIn-right .3s ease;&.modal-close{animation:slideOut-right .3s ease;transform:translate(100%)}.close-modal-button{top:2em;right:100%;transform:translate(calc(50% - 2px))}}&.top{border-bottom:4px solid var(--color-primary-500);animation:slideIn-top .3s ease;&.modal-close{animation:slideOut-top .3s ease;transform:translateY(-100%)}.close-modal-button{bottom:0;right:2em;transform:translateY(calc(50% - 2px))}}&.bottom{border-top:4px solid var(--color-primary-500);animation:slideIn-bottom .3s ease;&.modal-close{animation:slideOut-bottom .3s ease;transform:translateY(100%)}.close-modal-button{top:0;right:2em;transform:translateY(calc(-50% + 2px))}}}}@layer components{.polpo-confirmation-modal{display:grid;max-width:450px;gap:1em;place-content:center;justify-items:center;text-align:center;.polpo-confirmation-modal-actions{display:grid;grid-auto-flow:column;justify-content:center;gap:1em}}}@layer components{.polpo-menu-modal{border-radius:.5em;border:1px solid var(--color-border);background:var(--color-background);box-shadow:0 0 25px var(--color-background-paper);user-select:none;position:relative;overflow-y:auto;.polpo-menu-content{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;height:100%;position:relative;overflow-y:auto}.divider{margin:.4em 0;color:var(--color-border)}}.polpo-menu-label{background:var(--color-background);color:var(--color-foreground);font-weight:lighter;padding:.5em 1.2em;position:sticky;top:0;z-index:10;pointer-events:none}.polpo-menu-option{padding:.2em 1em;border-radius:.3em;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;outline:0;margin:0 .2em;position:relative;.ripple-effect{background:hsl(from var(--color-foreground) h s l / 31%)}&:first-child{margin-top:5px}.option-icon{margin-right:.5em}.menu-checkbox{width:100%}&.is-disabled{opacity:.4;pointer-events:none;cursor:default}&:focus,&:hover{background:hsl(from var(--color-background-paper) h s l / 25%)}&.is-selected{background:var(--color-background-paper);&:focus,&:hover{background:hsl(from var(--color-background-paper) h s l / 75%)}}}.polpo-menu-group{position:relative;.polpo-menu-group-content{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;position:relative}}}@layer components{.input-color{display:grid;grid-auto-flow:column;align-items:center;justify-content:start;gap:.5em;.input-color-value{margin-left:10px}.color-input{padding-right:1em;border-radius:inherit;width:100%;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));font-family:var(--font-main) sans-serif}}.input-color-box{background:#fff;border-radius:5px;border:2px solid;width:25px;height:25px;position:relative;cursor:pointer;&:before{content:"";position:absolute;border-radius:inherit;top:0;left:0;width:100%;height:100%;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50% / 8px 8px;z-index:-1}}.input-color-selector{display:grid;gap:10px;background:var(--color-background);color:var(--color-foreground);padding:10px;border-radius:0 18px 18px;border:1px solid;box-shadow:0 5px 30px -5px var(--color-gray-900);.react-colorful__pointer{width:1em;height:1em;border-radius:50%}.react-colorful__hue-pointer,.react-colorful__alpha-pointer{width:8px;height:100%;border-radius:4px;border-width:2px}.color-input-container{display:grid;grid-template-columns:16px 1fr 16px;align-items:center;gap:10px;border:1px solid;border-radius:8px;padding:.5em;width:100%;max-width:200px}.color-input{padding:0;border-radius:inherit;background:var(--color-background);color:var(--color-foreground);width:100%;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));font-family:var(--font-main) sans-serif;letter-spacing:2px;text-align:center}}}@layer components{.input-file-container{display:grid;gap:10px;.input-file--box{border:1px solid;border-radius:5px;position:relative;transition:all .3s ease;display:grid;grid-template-columns:32px 1fr;padding:10px;gap:10px;background:var(--color-secondary-500);color:var(--color-secondary-50);align-items:center;.input-file--box--icon{width:32px;height:32px;border-radius:5px;background:var(--color-primary-50);color:var(--color-primary-500);display:grid;place-content:center}input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:copy;opacity:0}&:hover{background:var(--color-primary-50);color:var(--color-primary-500);.input-file--box--icon{background:var(--color-primary-500);color:var(--color-primary-50)}}}.input-file--files{max-height:280px;overflow-y:auto;border:1px solid;border-radius:5px;.input-file--files--content{display:grid}}.error{color:tomato}.total-info{font-size:1em;display:grid;grid-auto-flow:column;justify-content:end;align-items:center;gap:.5em;.total-info--delete{display:grid;place-content:center;height:100%;background:transparent;cursor:pointer;transition:all .3s ease;aspect-ratio:1 / 1;border-radius:50%;width:2em;font-size:.8em;&:hover{background:var(--color-primary-500);color:var(--color-primary-50)}}}}.input-file-card{display:grid;grid-template-columns:35px 1fr 35px;gap:1em;align-items:center;padding:10px;background:var(--color-background);&:not(:last-child){border-bottom:1px dashed}&:hover{.file-card--delete{color:var(--color-primary-500)}}.file-card--image{background:var(--color-primary-500);color:var(--color-primary-50);width:32px;height:32px;border-radius:5px;display:grid;place-content:center;border:1px solid}.file-card--data{display:grid;font-size:.7em;justify-content:start}.file-card--delete{border-radius:5px;display:grid;place-content:center;width:32px;height:32px;cursor:pointer;transition:all .3s ease;&:hover{background:var(--color-primary-500);color:var(--color-primary-50)}}}}@layer components{.polpo-radio{border-radius:50%;background:var(--color-background-paper);transition:all .3s ease;width:1em;height:1em;outline:2px solid;display:flex;position:relative;padding:2px;.polpo-radio-input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:1}&.size-small{font-size:1em}&.size-regular{font-size:1.2em}&.size-large{font-size:1.4em}}.polpo-radio-fill{transition:all .2s ease-out;border-radius:inherit;margin:auto;width:0;height:0}.polpo-radio-container{--color: var(--color-gray-800);display:flex;align-items:center;gap:1em;width:fit-content;.polpo-radio-label{cursor:pointer;user-select:none}.polpo-radio{color:var(--color);&.is-checked{.polpo-radio-fill{width:100%;height:100%;background:var(--color)}}}.polpo-radio:hover,&:has(.polpo-radio-label:hover) .polpo-radio{box-shadow:0 0 0 .4em hsl(from var(--color) h s l / 50%);.polpo-radio-fill{width:20%;height:20%;background:hsl(from var(--color) h s l / 50%)}&:is(.is-checked){.polpo-radio-fill{width:80%;height:80%;background:var(--color)}}}&.color-primary{--color: var(--color-primary-500)}&.color-secondary{--color: var(--color-secondary-500)}&.color-tertiary{--color: var(--color-tertiary-500)}&.color-active{--color: var(--color-active-500)}&.color-warning{--color: var(--color-warning-500)}&.color-alert{--color: var(--color-alert-500)}&.color-info{--color: var(--color-info-500)}}}@layer components{.polpo-infinity-scroll{display:grid;place-content:start center;place-items:start center;.loading{width:100%;height:30px;display:grid;place-content:center;.loading--icon{animation:spin .5s linear infinite;font-size:20px}}.empty-message{font-size:.8em;text-align:center;color:#a6a6a6}}}@keyframes spin{to{transform:rotate(360deg)}}@layer components{.select{cursor:pointer;.icon-close{display:grid;place-content:center;align-self:center;border-radius:100%;cursor:pointer;font-size:.6em;padding:.5em;&:hover{background:hsl(from var(--color-foreground) h s l / 33%)}}.select-container{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;grid-auto-rows:auto;position:relative;cursor:pointer;user-select:none;&.three-columns{grid-template-columns:1fr auto auto}}.input-button{appearance:none;-webkit-appearance:none;-moz-appearance:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:grid;min-width:0;width:100%;border:0;margin:0;border-radius:0;background:transparent;color:currentColor;text-align:left;-webkit-tap-highlight-color:transparent;padding:0;grid-template-columns:1fr auto;&.placeholder{color:#919191}}.select-caret-icon{transition:transform .2s ease;&.is-select-open{transform:rotate(180deg)}}}.select-options-menu{.select-menu-content{gap:0;display:block;height:auto;overflow:initial}}.select-options{gap:0;display:grid;grid-template-rows:1fr;height:100%;overflow:auto;&.with-search-query{grid-template-rows:auto 1fr}.select-options-list-container{height:100%;overflow:auto}.select-options-list{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start}}.select-options-header{background:var(--color-background);padding:2px 5px;border-bottom:1px solid var(--color-border);.input-search{outline:none;padding:.8em 5px;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));width:100%}}}@layer components{.polpo-input-slider{display:grid;grid-template-columns:1fr 50px;align-items:center;gap:10px;.polpo-slider{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:grid;align-items:center;&:focus{outline:none}&::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:1em;background:var(--color-primary-500);box-shadow:0 0 0 0 var(--color-gray-500);margin-top:-8px;transition:all .3s ease;cursor:pointer}&::-webkit-slider-runnable-track{height:4px;border-radius:1em;background:hsl(from var(--color-primary-200) h s l / 50%);transition:all .3s ease}&:focus,&:hover{&::-webkit-slider-thumb{background:var(--color-primary-500);box-shadow:0 0 0 6px hsl(from var(--color-primary-500) h s l / 50%);cursor:grab}}&:active{&::-webkit-slider-thumb{box-shadow:0 0 0 12px hsl(from var(--color-primary-500) h s l / 31%);cursor:grabbing}}&:focus{&::-webkit-slider-runnable-track{background:var(--color-primary-300)}}}&:has(.slider-number:focus) .slider::-webkit-slider-thumb,&:has(.slider-number:hover) .slider::-webkit-slider-thumb{background:var(--color-primary-500);box-shadow:0 0 0 6px hsl(from var(--color-primary-500) h s l / 31%)}.polpo-slider-number{transition:all .3s ease;border:1px solid;border-radius:5px;text-align:center;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;padding:4px 8px;font-weight:700;color:inherit;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}}&.is-focus{.slider-number{color:var(--color-primary-500)}}}}@layer components{.polpo-textarea{border:0;outline:0;field-sizing:content}}@layer components{.polpo-tooltip{color:var(--color-foreground);font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular));line-height:1em;border-radius:5px;padding:.5em 1em;display:block;border:1px solid;pointer-events:none;&:before{content:"";display:block;background:var(--color-background-paper);position:absolute;z-index:1;width:10px;height:10px;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid var(--color-foreground);border-bottom:1px solid var(--color-foreground);border-radius:0 0 3px}&.left{animation:fadeInRight .25s ease-out;&.close-animation{animation:fadeOutLeft .25s ease-out;transform:translate(-10px);opacity:0}&:before{top:50%;left:100%;transform:translate(-50%,-50%) rotate(-45deg)}}&.right{animation:fadeInLeft .25s ease-out;&.close-animation{animation:fadeOutRight .25s ease-out;transform:translate(10px);opacity:0}&:before{top:50%;right:100%;transform:translate(50%,-50%) rotate(135deg)}}&.top{animation:fadeInDown .25s ease-out;&.close-animation{animation:fadeOutUp .25s ease-out;transform:translateY(-10px);opacity:0}&:before{top:100%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}}&.bottom{animation:fadeInUp .25s ease-out;&.close-animation{animation:fadeOutDown .25s ease-out;transform:translateY(10px);opacity:0}&:before{left:50%;bottom:100%;transform:translate(-50%,50%) rotate(-135deg)}}}}@layer components{.polpo-switch-container{--width: attr(data-width);--dot-size: attr(data-dot-size);--dot-hover-size: attr(data-dot-hover-size);--padding: attr(data-padding);--color: var(--color-gray-500);--color-dark: var(--color-gray-800);--color-contrast: var(--color-gray-50);display:flex;align-items:center;gap:.5em;width:fit-content;.polpo-switch{width:calc(var(--width) + var(--padding) * 2);border-radius:100em;background:var(--color-background-paper);padding:var(--padding);transition:all .3s ease;position:relative;.polpo-switch-dot{width:var(--dot-size);height:var(--dot-size);border-radius:100em;background:var(--color);display:block;transition:all .3s ease;margin-left:0;position:relative;z-index:1}.polpo-switch-icon{cursor:pointer;display:block}.switch-internal-left-icon,.switch-internal-right-icon{width:var(--dot-size);height:var(--dot-size);position:absolute;top:var(--padding);display:grid;place-content:center;color:var(--color-contrast);transition:all .3s ease}.switch-internal-left-icon{left:var(--padding)}.switch-internal-right-icon{right:var(--padding)}&.is-checked{background:var(--color);.polpo-switch-dot{margin-left:calc(var(--width) - var(--dot-size));background:var(--color);@supports (color: color-mix(in lab,red,red)){background:color-mix(in hsl,var(--color),var(--color-contrast) 75%)}}}&:not(.is-readonly):has(input:disabled){background:var(--color-background-disabled);.polpo-switch-dot{background:var(--color-foreground-disabled)}.switch-internal-left-icon,.switch-internal-right-icon{color:var(--color-foreground-disabled)}&.is-checked{background:var(--color-dark)}}.polpo-switch-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:3}}.polpo-switch-label{cursor:pointer;user-select:none;padding:0 .5em}.polpo-switch:not(:has(.is-readonly,input:disabled)):hover .polpo-switch-dot,&:has(.polpo-switch-icon:hover) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot,&:has(.polpo-switch-label:hover) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot{box-shadow:0 0 0 calc(.3 * var(--dot-size)) var(--color);@supports (color: color-mix(in lab,red,red)){box-shadow:0 0 0 calc(.3 * var(--dot-size)) color-mix(in hsl,var(--color) 50%,var(--color-contrast))}}.polpo-switch:not(:has(.is-readonly,input:disabled)):active .polpo-switch-dot,&:has(.polpo-switch-icon:active) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot,&:has(.polpo-switch-label:active) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot{width:var(--dot-hover-size)}.polpo-switch:not(:has(.is-readonly,input:disabled)).is-checked:active .polpo-switch-dot,&:has(.polpo-switch-icon:active) .polpo-switch:not(:has(.is-readonly,input:disabled)).is-checked .polpo-switch-dot,&:has(.polpo-switch-label:active) .polpo-switch:not(:has(.is-readonly,input:disabled)).is-checked .polpo-switch-dot{margin-left:calc(var(--width) - var(--dot-hover-size))}&.color-primary{--color: var(--color-primary-500);--color-dark: var(--color-primary-700);--color-contrast: var(--color-primary-50)}&.color-secondary{--color: var(--color-secondary-500);--color-dark: var(--color-secondary-700);--color-contrast: var(--color-secondary-50)}&.color-tertiary{--color: var(--color-tertiary-500);--color-dark: var(--color-tertiary-700);--color-contrast: var(--color-tertiary-50)}&.color-active{--color: var(--color-active-500);--color-dark: var(--color-active-700);--color-contrast: var(--color-active-50)}&.color-warning{--color: var(--color-warning-500);--color-dark: var(--color-warning-700);--color-contrast: var(--color-warning-50)}&.color-alert{--color: var(--color-alert-500);--color-dark: var(--color-alert-700);--color-contrast: var(--color-alert-50)}&.color-info{--color: var(--color-info-500);--color-dark: var(--color-info-700);--color-contrast: var(--color-info-50)}}}@layer components{.polpo-smart-table-container{border:0 solid var(--color-primary-500);border-radius:5px;overflow:auto;height:100%;width:100%;margin:auto}.polpo-smart-table{border-collapse:collapse;position:relative;width:100%;&.layout-fixed{table-layout:fixed}&.layout-scrollable{table-layout:auto}thead{position:sticky;z-index:10;top:0;box-shadow:0 3px 5px #0003,0 1px 10px #0000001f;tr{background:var(--color-primary-500);color:var(--color-primary-50);transition:all .3s ease}}tbody{tr{box-shadow:inset 0 0 0 0 var(--color-primary-500);transition:box-shadow .3s ease;&.row-selected,&:hover{background:var(--color-background-paper)}&.row-selected{box-shadow:inset 10px 0 0 -5px var(--color-primary-500)}&:not(:last-child){border-bottom:1px solid var(--color-border)}}}th{padding:.8em 1.2em;user-select:none;&.sort-on-click{cursor:pointer}.sort-icon{width:1em;display:block}svg{animation:fadeIn .3s ease}path{transition:all .3s ease}&:first-child{padding-left:2em}&:last-child{padding-right:2em}}td{transition:all .3s ease;padding:.6em 1em;&:first-child{padding-left:2em}&:last-child{padding-right:2em}}}}@layer components{.polpo-tab{cursor:pointer;user-select:none;transition:all .3s ease}.polpo-tab-list{--color: var(--color-gray-900);--color-contrast: var(--color-gray-50);--inner-radius: 0;--outer-radius: 0;display:grid;grid-auto-flow:column;gap:1em;align-items:center;position:relative;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));border-radius:var(--outer-radius);.tab,.polpo-tabs-selector{border-radius:var(--inner-radius)}&.size-small{font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular))}&.size-medium{font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6))}&.size-large{font-size:var(--text-body, 1rem);line-height:var(--tw-leading, var(--text-body--line-height, 1.6));letter-spacing:var(--tw-tracking, var(--text-body--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-body--font-weight, regular))}.polpo-tabs-selector{position:absolute;background:var(--color);color:var(--color-contrast);border-radius:1.5em;&.active{transition:all .3s ease}}.polpo-tab{border-radius:1.5em;padding:.5em 1em;z-index:1;text-align:center;&.is-open{color:var(--color-contrast)}&:not(.is-open):hover{color:var(--color-gray-900)}}&.radius-none{--outer-radius: 0;--inner-radius: 0}&.radius-small{--outer-radius: .5em;--inner-radius: .5em}&.radius-medium{--outer-radius: 1em;--inner-radius: .8em}&.radius-large{--outer-radius: 1.5em;--inner-radius: 1.3em}&.radius-full{--outer-radius: 1.8em;--inner-radius: 1.6em}&.vertical-direction{grid-auto-flow:row;align-items:unset;align-content:start}&.variant-solid{background:var(--color-background-paper);color:var(--color-foreground);padding:.5em}&.variant-ghost{border:1px solid var(--color);padding:.5em}&.variant-line{border-radius:0;&:not(.vertical-direction){border-bottom:2px solid var(--color-border)}.polpo-tabs-selector{border-radius:0}.polpo-tab{border-radius:0;&.is-open{color:var(--color)}}}&.color-primary{--color: var(--color-primary-500);--color-contrast: var(--color-primary-50)}&.color-secondary{--color: var(--color-secondary-500);--color-contrast: var(--color-secondary-50)}&.color-tertiary{--color: var(--color-tertiary-500);--color-contrast: var(--color-tertiary-50)}&.color-active{--color: var(--color-active-500);--color-contrast: var(--color-active-50)}&.color-warning{--color: var(--color-warning-500);--color-contrast: var(--color-warning-50)}&.color-alert{--color: var(--color-alert-500);--color-contrast: var(--color-alert-50)}&.color-info{--color: var(--color-info-500);--color-contrast: var(--color-info-50)}}}
|
|
1
|
+
@layer components{.polpo-custom-line{--color: attr(data-color, "currentColor");--size: attr(data-size, 1px);--spacing: attr(data-spacing, 1px);--dashSize: attr(data-dash-size, 1px);&.horizontal,&.vertical{background:var(--color);display:inline-block;border-radius:100px}&.horizontal{width:100%;height:var(--size);&.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / calc(var(--spacing) + var(--size)) 100%}&.dashed{background:repeating-linear-gradient(90deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}&.vertical{height:100%;width:var(--size);&.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / 100% calc(var(--spacing) + var(--size))}&.dashed{background:repeating-linear-gradient(0deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}}}@layer components{.polpo-accordion{display:grid}.polpo-accordion-item{display:grid;position:relative;.polpo-accordion-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;cursor:pointer;position:sticky;top:0;padding:20px 0;&.has-start-content{grid-template-columns:auto 1fr auto}}.polpo-accordion-header-content{display:grid}.polpo-accordion-toggle-icon{transition:all .3s ease;&.is-open{transform:rotate(-90deg)}}.polpo-accordion-body{padding:10px 0 20px}}}@layer components{.polpo-flip-card{--cardZIndex: attr(data-zIndex);--flipSpeed: attr(data-flipSpeed, .5s);--frontRotate: attr(data-frontRotate);--backRotate: attr(data-backRotate);perspective:1000px;z-index:var(--cardZIndex);.polpo-flipper{height:100%;position:relative;width:100%;transform-style:preserve-3d}.front,.back{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;transition:var(--flipSpeed);height:100%;left:0;top:0;width:100%}.front{position:relative;transform:var(--frontRotate);z-index:2}.back{position:absolute;transform:var(--backRotate)}.is-flipped{.front{position:absolute}.back{position:relative}}}}@layer components{.polpo-hover-card{display:inline-block;transition:all .3s ease;.polpo-hover-card-layer{transition:all .1s ease;width:100%;height:100%;display:grid}}}@layer components{.polpo-typography{margin:0;padding:.5em 0 .4em;&.primary{color:var(--color-primary-500)}&.secondary{color:var(--color-secondary-500)}&.tertiary{color:var(--color-tertiary-500)}&.active{color:var(--color-active-500)}&.alert{color:var(--color-alert-500)}&.warning{color:var(--color-warning-500)}&.info{color:var(--color-info-500)}&.recommended-width{max-width:70ch}&.code-family{font-family:monospace}&.no-padding{padding:0}&.nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.nowrap-max-lines{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}&.nowrap-max-lines-2{-webkit-line-clamp:2;line-clamp:2}&.nowrap-max-lines-3{-webkit-line-clamp:3;line-clamp:3}&.nowrap-max-lines-4{-webkit-line-clamp:4;line-clamp:4}&.nowrap-max-lines-5{-webkit-line-clamp:5;line-clamp:5}&.hero{font-size:var(--text-hero, clamp(4rem, 10vw, 5.5rem));line-height:var(--tw-leading, var(--text-hero--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-hero--letter-spacing, -4px));font-weight:var(--tw-font-weight, var(--text-hero--font-weight, bolder))}&.header1{font-size:var(--text-header1, clamp(3rem, 8vw, 4rem));line-height:var(--tw-leading, var(--text-header1--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header1--letter-spacing, -3px));font-weight:var(--tw-font-weight, var(--text-header1--font-weight, bold))}&.header2{font-size:var(--text-header2, clamp(2rem, 6vw, 3rem));line-height:var(--tw-leading, var(--text-header2--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header2--letter-spacing, -2px));font-weight:var(--tw-font-weight, var(--text-header2--font-weight, bold))}&.header3{font-size:var(--text-header3, clamp(1.5rem, 4vw, 2rem));line-height:var(--tw-leading, var(--text-header3--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header3--letter-spacing, -1px));font-weight:var(--tw-font-weight, var(--text-header3--font-weight, bold))}&.header4{font-size:var(--text-header4, clamp(1.2rem, 3vw, 1.5rem));line-height:var(--tw-leading, var(--text-header4--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header4--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-header4--font-weight, bold))}&.body{font-size:var(--text-body, 1rem);line-height:var(--tw-leading, var(--text-body--line-height, 1.6));letter-spacing:var(--tw-tracking, var(--text-body--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-body--font-weight, regular))}&.label{font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6))}&.small{font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular))}&.bold{font-weight:700}&.regular{font-weight:400}&.light{font-weight:300}}}@layer components{.polpo-badge{--background: attr(data-background, var(--color-primary-500));--text: attr(data-text, var(--color-primary-50));--background-selected: attr(data-background-selected, var(--color-primary-700));--text-selected: attr(data-text-selected, var(--color-primary-50));padding:.4em .8em;border-radius:.3em;border:1px solid;background:var(--background);color:var(--text);transition:all .3s ease;display:inline-block;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));user-select:none;&.no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&.rounded-none{border-radius:0}&.rounded-small{border-radius:.25em}&.rounded-medium{border-radius:.5em}&.rounded-large{border-radius:1em}&.rounded-full{border-radius:100rem}&:hover,&.is-selected{background:var(--background-selected);color:var(--text-selected)}}}@layer components{.polpo-ripple{position:absolute;display:block;inset:0;overflow:hidden;border-radius:inherit;z-index:1;.ripple-effect{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:0;height:0;pointer-events:none;animation:ripple-effect infinite;opacity:.4}}@keyframes ripple-effect{to{width:300px;height:300px;opacity:0;filter:blur(5px)}}}@layer components{.polpo-button{--button-blur: 2px;--color: var(--color-gray-800);--solid-background: var(--color-gray-800);--solid-text: var(--color-gray-50);--solid-hover-background: var(--color-gray-700);--solid-active-background: var(--color-gray-900);--flat-text: var(--color-gray-700);--flat-background: hsl(from var(--color-gray-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-gray-300) h s l / 50%);--flat-active-background: hsl(from var(--color-gray-300) h s l / 80%);--outlined-text: var(--color-gray-600);--outlined-hover-background: hsl(from var(--color-gray-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-gray-500) h s l / 30%);--text-hover-background: hsl(from var(--color-gray-300) h s l / 20%);--text-active-background: hsl(from var(--color-gray-400) h s l / 30%);--shadow-color: hsl(from var(--color-gray-800) h s l / 20%);--focus-background: hsl(from var(--color-gray-100) h s l / 20%);display:flex;position:relative;flex-direction:row;justify-content:center;align-items:center;padding:.625em 2.1875em;gap:.625em;width:auto;border-radius:.5em;font-weight:700;font-size:var(--text-label);cursor:pointer;outline:none;transition:all .15s ease;user-select:none;white-space:nowrap;&.icon{padding:.625em}&.full{width:100%}&.no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&.size-small{font-size:var(--text-small)}&.size-regular{font-size:var(--text-label)}&.size-large{font-size:var(--text-body)}&.radius-none{border-radius:0}&.radius-small{border-radius:.25em}&.radius-medium{border-radius:.5em}&.radius-large{border-radius:1em}&.radius-full{border-radius:100rem}&.is-loading{pointer-events:none;cursor:progress}&:not(:disabled):not(.is-loading){&:hover,&:active,&:focus-visible{backdrop-filter:blur(var(--button-blur))}&:hover{transform:scale(1.01);&:not(.text){box-shadow:0 1.4em .5em -1em hsl(from var(--color-black) h s l / 20%),0 .7em 1em -.5em hsl(from var(--color-black) h s l / 20%)}}&:active{transform:scale(.98);&:not(.text){box-shadow:0 .3em .4em -.2em hsl(from var(--color-black) h s l / 20%),0 .2em .8em -.1em hsl(from var(--color-black) h s l / 20%)}}}color:var(--color);.ripple-effect{background:var(--color)}&.solid{background:var(--solid-background);color:var(--solid-text);backdrop-filter:blur(var(--button-blur));.ripple-effect{background:var(--solid-text)}&:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--solid-hover-background)}&:hover{background:var(--solid-hover-background)}&:active{background:var(--solid-active-background)}}&.flat{background:var(--flat-background);backdrop-filter:blur(var(--button-blur));color:var(--flat-text);&:hover{background:var(--flat-hover-background)}&:active{background:var(--flat-active-background)}}&.outlined{background:transparent;border:1px solid;color:var(--outlined-text);&:hover{background:var(--outlined-hover-background)}&:active{background:var(--outlined-active-background)}}&.text{background:transparent;&:hover{background:var(--text-hover-background)}&:active{background:var(--text-active-background)}}&:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--focus-background)}&.primary{--color: var(--color-primary-500);--solid-background: var(--color-primary-400);--solid-text: var(--color-primary-foreground);--solid-hover-background: var(--color-primary-300);--solid-active-background: var(--color-primary-500);--flat-text: var(--color-primary-700);--flat-background: hsl(from var(--color-primary-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-primary-300) h s l / 50%);--flat-active-background: hsl(from var(--color-primary-300) h s l / 80%);--outlined-text: var(--color-primary-600);--outlined-hover-background: hsl(from var(--color-primary-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-primary-500) h s l / 30%);--text-hover-background: hsl(from var(--color-primary-300) h s l / 20%);--text-active-background: hsl(from var(--color-primary-400) h s l / 30%);--shadow-color: hsl(from var(--color-primary-500) h s l / 20%);--focus-background: hsl(from var(--color-primary-200) h s l / 20%)}&.secondary{--color: var(--color-secondary-500);--solid-background: var(--color-secondary-400);--solid-text: var(--color-secondary-foreground);--solid-hover-background: var(--color-secondary-300);--solid-active-background: var(--color-secondary-500);--flat-text: var(--color-secondary-700);--flat-background: hsl(from var(--color-secondary-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-secondary-300) h s l / 50%);--flat-active-background: hsl(from var(--color-secondary-300) h s l / 80%);--outlined-text: var(--color-secondary-600);--outlined-hover-background: hsl(from var(--color-secondary-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-secondary-500) h s l / 30%);--text-hover-background: hsl(from var(--color-secondary-300) h s l / 20%);--text-active-background: hsl(from var(--color-secondary-400) h s l / 30%);--shadow-color: hsl(from var(--color-secondary-500) h s l / 20%);--focus-background: hsl(from var(--color-secondary-100) h s l / 20%)}&.tertiary{--color: var(--color-tertiary-500);--solid-background: var(--color-tertiary-400);--solid-text: var(--color-tertiary-foreground);--solid-hover-background: var(--color-tertiary-300);--solid-active-background: var(--color-tertiary-500);--flat-text: var(--color-tertiary-700);--flat-background: hsl(from var(--color-tertiary-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-tertiary-300) h s l / 50%);--flat-active-background: hsl(from var(--color-tertiary-300) h s l / 80%);--outlined-text: var(--color-tertiary-600);--outlined-hover-background: hsl(from var(--color-tertiary-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-tertiary-500) h s l / 30%);--text-hover-background: hsl(from var(--color-tertiary-300) h s l / 20%);--text-active-background: hsl(from var(--color-tertiary-400) h s l / 30%);--shadow-color: hsl(from var(--color-tertiary-500) h s l / 20%);--focus-background: hsl(from var(--color-tertiary-100) h s l / 20%)}&.active{--color: var(--color-active-500);--solid-background: var(--color-active-400);--solid-text: var(--color-active-foreground);--solid-hover-background: var(--color-active-300);--solid-active-background: var(--color-active-500);--flat-text: var(--color-active-700);--flat-background: hsl(from var(--color-active-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-active-300) h s l / 50%);--flat-active-background: hsl(from var(--color-active-300) h s l / 80%);--outlined-text: var(--color-active-600);--outlined-hover-background: hsl(from var(--color-active-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-active-500) h s l / 30%);--text-hover-background: hsl(from var(--color-active-300) h s l / 20%);--text-active-background: hsl(from var(--color-active-400) h s l / 30%);--shadow-color: hsl(from var(--color-active-500) h s l / 20%);--focus-background: hsl(from var(--color-active-100) h s l / 20%)}&.warning{--color: var(--color-warning-500);--solid-background: var(--color-warning-400);--solid-text: var(--color-warning-foreground);--solid-hover-background: var(--color-warning-300);--solid-active-background: var(--color-warning-500);--flat-text: var(--color-warning-700);--flat-background: hsl(from var(--color-warning-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-warning-300) h s l / 50%);--flat-active-background: hsl(from var(--color-warning-300) h s l / 80%);--outlined-text: var(--color-warning-600);--outlined-hover-background: hsl(from var(--color-warning-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-warning-500) h s l / 30%);--text-hover-background: hsl(from var(--color-warning-300) h s l / 20%);--text-active-background: hsl(from var(--color-warning-400) h s l / 30%);--shadow-color: hsl(from var(--color-warning-500) h s l / 20%);--focus-background: hsl(from var(--color-warning-100) h s l / 20%)}&.alert{--color: var(--color-alert-500);--solid-background: var(--color-alert-400);--solid-text: var(--color-alert-foreground);--solid-hover-background: var(--color-alert-300);--solid-active-background: var(--color-alert-500);--flat-text: var(--color-alert-700);--flat-background: hsl(from var(--color-alert-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-alert-300) h s l / 50%);--flat-active-background: hsl(from var(--color-alert-300) h s l / 80%);--outlined-text: var(--color-alert-600);--outlined-hover-background: hsl(from var(--color-alert-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-alert-500) h s l / 30%);--text-hover-background: hsl(from var(--color-alert-300) h s l / 20%);--text-active-background: hsl(from var(--color-alert-400) h s l / 30%);--shadow-color: hsl(from var(--color-alert-500) h s l / 20%);--focus-background: hsl(from var(--color-alert-100) h s l / 20%)}&.info{--color: var(--color-info-500);--solid-background: var(--color-info-400);--solid-text: var(--color-info-foreground);--solid-hover-background: var(--color-info-300);--solid-active-background: var(--color-info-500);--flat-text: var(--color-info-700);--flat-background: hsl(from var(--color-info-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-info-300) h s l / 50%);--flat-active-background: hsl(from var(--color-info-300) h s l / 80%);--outlined-text: var(--color-info-600);--outlined-hover-background: hsl(from var(--color-info-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-info-500) h s l / 30%);--text-hover-background: hsl(from var(--color-info-300) h s l / 20%);--text-active-background: hsl(from var(--color-info-400) h s l / 30%);--shadow-color: hsl(from var(--color-info-500) h s l / 20%);--focus-background: hsl(from var(--color-info-100) h s l / 20%)}&.accent{--color: var(--color-accent-500);--solid-background: var(--color-accent-400);--solid-text: var(--color-accent-foreground);--solid-hover-background: var(--color-accent-300);--solid-active-background: var(--color-accent-500);--flat-text: var(--color-accent-700);--flat-background: hsl(from var(--color-accent-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-accent-300) h s l / 50%);--flat-active-background: hsl(from var(--color-accent-300) h s l / 80%);--outlined-text: var(--color-accent-600);--outlined-hover-background: hsl(from var(--color-accent-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-accent-500) h s l / 30%);--text-hover-background: hsl(from var(--color-accent-300) h s l / 20%);--text-active-background: hsl(from var(--color-accent-400) h s l / 30%);--shadow-color: hsl(from var(--color-accent-500) h s l / 20%);--focus-background: hsl(from var(--color-accent-100) h s l / 20%)}&.highlight{--color: var(--color-highlight-500);--solid-background: var(--color-highlight-400);--solid-text: var(--color-highlight-foreground);--solid-hover-background: var(--color-highlight-300);--solid-active-background: var(--color-highlight-500);--flat-text: var(--color-highlight-700);--flat-background: hsl(from var(--color-highlight-400) h s l / 50%);--flat-hover-background: hsl(from var(--color-highlight-300) h s l / 50%);--flat-active-background: hsl(from var(--color-highlight-300) h s l / 80%);--outlined-text: var(--color-highlight-600);--outlined-hover-background: hsl(from var(--color-highlight-400) h s l / 20%);--outlined-active-background: hsl(from var(--color-highlight-500) h s l / 30%);--text-hover-background: hsl(from var(--color-highlight-300) h s l / 20%);--text-active-background: hsl(from var(--color-highlight-400) h s l / 30%);--shadow-color: hsl(from var(--color-highlight-500) h s l / 20%);--focus-background: hsl(from var(--color-highlight-100) h s l / 20%)}&:disabled{color:var(--color-gray-300);pointer-events:none}&.solid:disabled{background:var(--color-gray-300);color:var(--color-gray-100)}&.flat:disabled{background:hsl(from var(--color-gray-100) h s l / 80%)}&.outlined:disabled,&.text:disabled{background:transparent}}}@layer components{.polpo-cursor-overlay{position:fixed;top:0;left:0;width:100%;height:100%;cursor:none;pointer-events:none}.polpo-cursor{position:fixed;border-radius:50%;z-index:99999999;pointer-events:none;transform:translateZ(0);@media(any-pointer:coarse){display:none}&.outer-circle{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid var(--color-primary-500);box-sizing:border-box;z-index:99999999;opacity:.5;transition:all .08s ease-out,width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;&.cursor-hover{margin-left:-40px;margin-top:-40px;width:80px;height:80px;background-color:var(--color-primary-500);opacity:.3}&.cursor-text{margin-left:-2px;margin-top:-40px;width:4px;height:80px;background-color:var(--color-primary-500);opacity:.3}}&.inner-circle{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:99999999;background-color:var(--color-primary-500);transition:opacity .3s ease-in-out;opacity:1;&.cursor-hover{opacity:0}}}}@layer components{.checkbox{border-radius:40%;background:var(--color-background-paper);transition:all .3s ease;width:1em;height:1em;margin:2px;outline:1px solid;display:flex;position:relative;.checkbox-input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:2}&.size-small{font-size:1em}&.size-regular{font-size:1.2em}&.size-large{font-size:1.4em}}.checkbox-fill{transition:all .2s ease-out;border-radius:inherit;margin:auto;width:0;height:0;overflow:hidden;position:relative;display:grid;place-content:center;place-items:center;.checkbox-icon{font-size:.7em;z-index:1;opacity:0;transition:opacity .3s ease}}.checkbox-container{--color: var(--color-gray-800);--color-icon: var(--color-gray-50);--color-hover: hsl(from var(--color-gray-800) h s l / 50%);display:grid;grid-auto-flow:column;grid-auto-columns:auto 1fr;align-items:center;gap:.5em;width:fit-content;.checkbox-label{cursor:pointer;user-select:none;width:100%}.checkbox{color:var(--color);&.is-checked{.checkbox-fill{width:100%;height:100%;background:var(--color);color:var(--color-icon)}.checkbox-icon{opacity:1}}}.checkbox:hover,&:has(.checkbox-label:hover) .checkbox{box-shadow:0 0 0 .3em var(--color-hover);.checkbox-fill{width:20%;height:20%;border-radius:20%;background:var(--color-hover);color:var(--color-icon)}&:is(.is-checked){.checkbox-fill{width:100%;height:100%;border-radius:inherit;background:var(--color)}}}.checkbox:focus,&:has(.checkbox-input:focus) .checkbox,&:has(.checkbox-label:focus) .checkbox{box-shadow:0 0 0 .3em var(--color-hover)}&.color-primary{--color: var(--color-primary-500);--color-icon: var(--color-primary-50);--color-hover: hsl(from var(--color-primary-500) h s l / 50%)}&.color-secondary{--color: var(--color-secondary-500);--color-icon: var(--color-secondary-50);--color-hover: hsl(from var(--color-secondary-500) h s l / 50%)}&.color-tertiary{--color: var(--color-tertiary-500);--color-icon: var(--color-tertiary-50);--color-hover: hsl(from var(--color-tertiary-500) h s l / 50%)}&.color-active{--color: var(--color-active-500);--color-icon: var(--color-active-50);--color-hover: hsl(from var(--color-active-500) h s l / 50%)}&.color-warning{--color: var(--color-warning-500);--color-icon: var(--color-warning-50);--color-hover: hsl(from var(--color-warning-500) h s l / 50%)}&.color-alert{--color: var(--color-alert-500);--color-icon: var(--color-alert-50);--color-hover: hsl(from var(--color-alert-500) h s l / 50%)}&.color-info{--color: var(--color-info-500);--color-icon: var(--color-info-50);--color-hover: hsl(from var(--color-info-500) h s l / 50%)}}}@layer components{.form-field{display:grid;grid-auto-columns:auto;gap:.5em;transition:all .2s ease;.field-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.field-left-icon,.field-right-icon{font-size:1em}.field-left-icon{margin-right:1em}.field-right-icon{margin-left:1em}.field-message{display:grid;grid-auto-flow:column;gap:5px;align-items:center;justify-content:start}&.variant-content-border{.field-content{border:1px solid var(--color-border);border-radius:4px;padding:1em;background:var(--color-background)}}&.variant-content-line{.field-content{border-bottom:1px solid;padding:.5em 0}}&.variant-full-border{border:1px solid var(--color-border);border-radius:4px;padding:.5em 0;background:var(--color-background);.field-label,.field-content,.field-message{padding:0 1em}}&.variant-inline{grid-auto-flow:column;padding:.5em 0;align-items:center;.field-label{width:auto}}&.error{color:var(--color-alert-500);border-color:var(--color-alert-500)}&.focus{color:var(--color-info-500);border-color:var(--color-info-500)}&.error,&.focus{.field-left-icon,.field-right-icon,.field-children{color:var(--color-foreground);border-color:var(--color-foreground)}}.field-children>*{width:100%}}}@layer components{.polpo-modal{position:fixed;z-index:1001;pointer-events:none}.polpo-modal-content{background:var(--color-background-paper);pointer-events:initial;&.animation-fade-down{animation:fadeInDown .2s ease;&.modal-close{animation:fadeOutUp .2s ease;transform:translateY(-10px);opacity:0}}&.animation-bounce{animation:bounceIn .5s ease;&.modal-close{animation:bounceOut .5s ease;transform:scale3d(.3,.3,.3);opacity:0}}}.polpo-modal-backdrop{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;animation:backdropOpen .5s cubic-bezier(.215,.61,.355,1);&.backdrop-close{animation:backdropClose .5s cubic-bezier(.215,.61,.355,1);opacity:0;transform:translateY(-10px)}}@keyframes backdropOpen{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes backdropClose{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}}@layer components{.polpo-action-modal{background:transparent;.polpo-modal-content{&.shake-animation{animation:headShake .6s linear}}}.polpo-action-modal-content{position:relative;.polpo-action-modal-body{box-shadow:0 0 10px -5px;border-radius:10px;overflow:hidden;display:grid}.polpo-action-modal-content{background:var(--color-background);padding:3em 4em 2em;display:grid;gap:1em}&.no-padding .polpo-action-modal-content{padding:2em 0 0}&:has(.action-modal-icon) .polpo-action-modal-content{padding-top:4em}&.back-card{&:before{content:"";position:absolute;width:90%;height:100%;top:8px;left:50%;transform:translate(-50%);z-index:-1;background:var(--color-primary-500);border-radius:10px;display:block;transition:top .3s cubic-bezier(.81,-.52,.42,2.5)}}.action-modal-icon{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--color-primary-500);color:var(--color-primary-50);padding:0;border-radius:50%;width:2em;height:2em;display:grid;place-content:center;transition:box-shadow .3s cubic-bezier(.81,-.52,.42,2.5);z-index:1;box-shadow:0 0 hsl(from var(--color-primary-500) h s l / 53%),0 0 hsl(from var(--color-primary-500) h s l / 40%),0 0 hsl(from var(--color-primary-500) h s l / 27%),0 0 hsl(from var(--color-primary-500) h s l / 14%)}.close-modal-button{width:1em;height:1em;border-radius:50%;cursor:pointer;background:var(--color-background);position:absolute;top:10px;right:5px;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));opacity:0;transition:opacity .3s ease;z-index:1}&.line-on-top{.polpo-action-modal-content{border-top:5px solid var(--color-primary-500)}}&:hover{.action-modal-icon{box-shadow:0 0 0 7px hsl(from var(--color-primary-500) h s l / 53%),0 0 0 14px hsl(from var(--color-primary-500) h s l / 40%),0 0 0 21px hsl(from var(--color-primary-500) h s l / 27%),0 0 0 28px hsl(from var(--color-primary-500) h s l / 14%)}.close-modal-button{opacity:1}&:before{top:15px}}}}@layer components{.polpo-aside-modal{color:var(--color-foreground);overflow:auto;height:100%;.polpo-aside-modal-content{padding:2em}.close-modal-button{border-radius:50%;cursor:pointer;display:grid;place-content:center;background:var(--color-background);border:4px solid var(--color-primary-500);position:absolute;padding:.5em}&.left{border-right:4px solid var(--color-primary-500);animation:slideIn-left .3s ease;&.modal-close{animation:slideOut-left .3s ease;transform:translate(-100%)}.close-modal-button{top:2em;left:100%;transform:translate(calc(-50% + 2px))}}&.right{border-left:4px solid var(--color-primary-500);animation:slideIn-right .3s ease;&.modal-close{animation:slideOut-right .3s ease;transform:translate(100%)}.close-modal-button{top:2em;right:100%;transform:translate(calc(50% - 2px))}}&.top{border-bottom:4px solid var(--color-primary-500);animation:slideIn-top .3s ease;&.modal-close{animation:slideOut-top .3s ease;transform:translateY(-100%)}.close-modal-button{bottom:0;right:2em;transform:translateY(calc(50% - 2px))}}&.bottom{border-top:4px solid var(--color-primary-500);animation:slideIn-bottom .3s ease;&.modal-close{animation:slideOut-bottom .3s ease;transform:translateY(100%)}.close-modal-button{top:0;right:2em;transform:translateY(calc(-50% + 2px))}}}}@layer components{.polpo-confirmation-modal{display:grid;max-width:450px;gap:1em;place-content:center;justify-items:center;text-align:center;.polpo-confirmation-modal-actions{display:grid;grid-auto-flow:column;justify-content:center;gap:1em}}}@layer components{.polpo-menu-modal{border-radius:.5em;border:1px solid var(--color-border);background:var(--color-background);box-shadow:0 0 25px var(--color-background-paper);user-select:none;position:relative;overflow-y:auto;.polpo-menu-content{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;height:100%;position:relative;overflow-y:auto}.divider{margin:.4em 0;color:var(--color-border)}}.polpo-menu-label{background:var(--color-background);color:var(--color-foreground);font-weight:lighter;padding:.5em 1.2em;position:sticky;top:0;z-index:10;pointer-events:none}.polpo-menu-option{padding:.2em 1em;border-radius:.3em;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;outline:0;margin:0 .2em;position:relative;.ripple-effect{background:hsl(from var(--color-foreground) h s l / 31%)}&:first-child{margin-top:5px}.option-icon{margin-right:.5em}.menu-checkbox{width:100%}&.is-disabled{opacity:.4;pointer-events:none;cursor:default}&:focus,&:hover{background:hsl(from var(--color-background-paper) h s l / 25%)}&.is-selected{background:var(--color-background-paper);&:focus,&:hover{background:hsl(from var(--color-background-paper) h s l / 75%)}}}.polpo-menu-group{position:relative;.polpo-menu-group-content{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;position:relative}}}@layer components{.input-color{display:grid;grid-auto-flow:column;align-items:center;justify-content:start;gap:.5em;.input-color-value{margin-left:10px}.color-input{padding-right:1em;border-radius:inherit;width:100%;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));font-family:var(--font-main) sans-serif}}.input-color-box{background:#fff;border-radius:5px;border:2px solid;width:25px;height:25px;position:relative;cursor:pointer;&:before{content:"";position:absolute;border-radius:inherit;top:0;left:0;width:100%;height:100%;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50% / 8px 8px;z-index:-1}}.input-color-selector{display:grid;gap:10px;background:var(--color-background);color:var(--color-foreground);padding:10px;border-radius:0 18px 18px;border:1px solid;box-shadow:0 5px 30px -5px var(--color-gray-900);.react-colorful__pointer{width:1em;height:1em;border-radius:50%}.react-colorful__hue-pointer,.react-colorful__alpha-pointer{width:8px;height:100%;border-radius:4px;border-width:2px}.color-input-container{display:grid;grid-template-columns:16px 1fr 16px;align-items:center;gap:10px;border:1px solid;border-radius:8px;padding:.5em;width:100%;max-width:200px}.color-input{padding:0;border-radius:inherit;background:var(--color-background);color:var(--color-foreground);width:100%;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));font-family:var(--font-main) sans-serif;letter-spacing:2px;text-align:center}}}@layer components{.input-file-container{display:grid;gap:10px;.input-file--box{border:1px solid;border-radius:5px;position:relative;transition:all .3s ease;display:grid;grid-template-columns:32px 1fr;padding:10px;gap:10px;background:var(--color-secondary-500);color:var(--color-secondary-50);align-items:center;.input-file--box--icon{width:32px;height:32px;border-radius:5px;background:var(--color-primary-50);color:var(--color-primary-500);display:grid;place-content:center}input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:copy;opacity:0}&:hover{background:var(--color-primary-50);color:var(--color-primary-500);.input-file--box--icon{background:var(--color-primary-500);color:var(--color-primary-50)}}}.input-file--files{max-height:280px;overflow-y:auto;border:1px solid;border-radius:5px;.input-file--files--content{display:grid}}.error{color:tomato}.total-info{font-size:1em;display:grid;grid-auto-flow:column;justify-content:end;align-items:center;gap:.5em;.total-info--delete{display:grid;place-content:center;height:100%;background:transparent;cursor:pointer;transition:all .3s ease;aspect-ratio:1 / 1;border-radius:50%;width:2em;font-size:.8em;&:hover{background:var(--color-primary-500);color:var(--color-primary-50)}}}}.input-file-card{display:grid;grid-template-columns:35px 1fr 35px;gap:1em;align-items:center;padding:10px;background:var(--color-background);&:not(:last-child){border-bottom:1px dashed}&:hover{.file-card--delete{color:var(--color-primary-500)}}.file-card--image{background:var(--color-primary-500);color:var(--color-primary-50);width:32px;height:32px;border-radius:5px;display:grid;place-content:center;border:1px solid}.file-card--data{display:grid;font-size:.7em;justify-content:start}.file-card--delete{border-radius:5px;display:grid;place-content:center;width:32px;height:32px;cursor:pointer;transition:all .3s ease;&:hover{background:var(--color-primary-500);color:var(--color-primary-50)}}}}@layer components{.polpo-radio{border-radius:50%;background:var(--color-background-paper);transition:all .3s ease;width:1em;height:1em;outline:2px solid;display:flex;position:relative;padding:2px;.polpo-radio-input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:1}&.size-small{font-size:1em}&.size-regular{font-size:1.2em}&.size-large{font-size:1.4em}}.polpo-radio-fill{transition:all .2s ease-out;border-radius:inherit;margin:auto;width:0;height:0}.polpo-radio-container{--color: var(--color-gray-800);display:flex;align-items:center;gap:1em;width:fit-content;.polpo-radio-label{cursor:pointer;user-select:none}.polpo-radio{color:var(--color);&.is-checked{.polpo-radio-fill{width:100%;height:100%;background:var(--color)}}}.polpo-radio:hover,&:has(.polpo-radio-label:hover) .polpo-radio{box-shadow:0 0 0 .4em hsl(from var(--color) h s l / 50%);.polpo-radio-fill{width:20%;height:20%;background:hsl(from var(--color) h s l / 50%)}&:is(.is-checked){.polpo-radio-fill{width:80%;height:80%;background:var(--color)}}}&.color-primary{--color: var(--color-primary-500)}&.color-secondary{--color: var(--color-secondary-500)}&.color-tertiary{--color: var(--color-tertiary-500)}&.color-active{--color: var(--color-active-500)}&.color-warning{--color: var(--color-warning-500)}&.color-alert{--color: var(--color-alert-500)}&.color-info{--color: var(--color-info-500)}}}@layer components{.polpo-infinity-scroll{display:grid;place-content:start center;place-items:start center;.loading{width:100%;height:30px;display:grid;place-content:center;.loading--icon{animation:spin .5s linear infinite;font-size:20px}}.empty-message{font-size:.8em;text-align:center;color:#a6a6a6}}}@keyframes spin{to{transform:rotate(360deg)}}@layer components{.select{cursor:pointer;.icon-close{display:grid;place-content:center;align-self:center;border-radius:100%;cursor:pointer;font-size:.6em;padding:.5em;&:hover{background:hsl(from var(--color-foreground) h s l / 33%)}}.select-container{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;grid-auto-rows:auto;position:relative;cursor:pointer;user-select:none;&.three-columns{grid-template-columns:1fr auto auto}}.input-button{appearance:none;-webkit-appearance:none;-moz-appearance:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:grid;min-width:0;width:100%;border:0;margin:0;border-radius:0;background:transparent;color:currentColor;text-align:left;-webkit-tap-highlight-color:transparent;padding:0;grid-template-columns:1fr auto;&.placeholder{color:#919191}}.select-caret-icon{transition:transform .2s ease;&.is-select-open{transform:rotate(180deg)}}}.select-options-menu{.select-menu-content{gap:0;display:block;height:auto;overflow:initial}}.select-options{gap:0;display:grid;grid-template-rows:1fr;height:100%;overflow:auto;&.with-search-query{grid-template-rows:auto 1fr}.select-options-list-container{height:100%;overflow:auto}.select-options-list{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start}}.select-options-header{background:var(--color-background);padding:2px 5px;border-bottom:1px solid var(--color-border);.input-search{outline:none;padding:.8em 5px;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));width:100%}}}@layer components{.polpo-input-slider{display:grid;grid-template-columns:1fr 50px;align-items:center;gap:10px;.polpo-slider{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:grid;align-items:center;&:focus{outline:none}&::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:1em;background:var(--color-primary-500);box-shadow:0 0 0 0 var(--color-gray-500);margin-top:-8px;transition:all .3s ease;cursor:pointer}&::-webkit-slider-runnable-track{height:4px;border-radius:1em;background:hsl(from var(--color-primary-200) h s l / 50%);transition:all .3s ease}&:focus,&:hover{&::-webkit-slider-thumb{background:var(--color-primary-500);box-shadow:0 0 0 6px hsl(from var(--color-primary-500) h s l / 50%);cursor:grab}}&:active{&::-webkit-slider-thumb{box-shadow:0 0 0 12px hsl(from var(--color-primary-500) h s l / 31%);cursor:grabbing}}&:focus{&::-webkit-slider-runnable-track{background:var(--color-primary-300)}}}&:has(.slider-number:focus) .slider::-webkit-slider-thumb,&:has(.slider-number:hover) .slider::-webkit-slider-thumb{background:var(--color-primary-500);box-shadow:0 0 0 6px hsl(from var(--color-primary-500) h s l / 31%)}.polpo-slider-number{transition:all .3s ease;border:1px solid;border-radius:5px;text-align:center;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;padding:4px 8px;font-weight:700;color:inherit;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}}&.is-focus{.slider-number{color:var(--color-primary-500)}}}}@layer components{.polpo-textarea{border:0;outline:0;field-sizing:content}}@layer components{.polpo-tooltip{color:var(--color-foreground);font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular));line-height:1em;border-radius:5px;padding:.5em 1em;display:block;border:1px solid;pointer-events:none;&:before{content:"";display:block;background:var(--color-background-paper);position:absolute;z-index:1;width:10px;height:10px;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid var(--color-foreground);border-bottom:1px solid var(--color-foreground);border-radius:0 0 3px}&.left{animation:fadeInRight .25s ease-out;&.close-animation{animation:fadeOutLeft .25s ease-out;transform:translate(-10px);opacity:0}&:before{top:50%;left:100%;transform:translate(-50%,-50%) rotate(-45deg)}}&.right{animation:fadeInLeft .25s ease-out;&.close-animation{animation:fadeOutRight .25s ease-out;transform:translate(10px);opacity:0}&:before{top:50%;right:100%;transform:translate(50%,-50%) rotate(135deg)}}&.top{animation:fadeInDown .25s ease-out;&.close-animation{animation:fadeOutUp .25s ease-out;transform:translateY(-10px);opacity:0}&:before{top:100%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}}&.bottom{animation:fadeInUp .25s ease-out;&.close-animation{animation:fadeOutDown .25s ease-out;transform:translateY(10px);opacity:0}&:before{left:50%;bottom:100%;transform:translate(-50%,50%) rotate(-135deg)}}}}@layer components{.polpo-switch-container{--width: attr(data-width);--dot-size: attr(data-dot-size);--dot-hover-size: attr(data-dot-hover-size);--padding: attr(data-padding);--color: var(--color-gray-500);--color-dark: var(--color-gray-800);--color-contrast: var(--color-gray-50);display:flex;align-items:center;gap:.5em;width:fit-content;.polpo-switch{width:calc(var(--width) + var(--padding) * 2);border-radius:100em;background:var(--color-background-paper);padding:var(--padding);transition:all .3s ease;position:relative;.polpo-switch-dot{width:var(--dot-size);height:var(--dot-size);border-radius:100em;background:var(--color);display:block;transition:all .3s ease;margin-left:0;position:relative;z-index:1}.polpo-switch-icon{cursor:pointer;display:block}.switch-internal-left-icon,.switch-internal-right-icon{width:var(--dot-size);height:var(--dot-size);position:absolute;top:var(--padding);display:grid;place-content:center;color:var(--color-contrast);transition:all .3s ease}.switch-internal-left-icon{left:var(--padding)}.switch-internal-right-icon{right:var(--padding)}&.is-checked{background:var(--color);.polpo-switch-dot{margin-left:calc(var(--width) - var(--dot-size));background:var(--color);@supports (color: color-mix(in lab,red,red)){background:color-mix(in hsl,var(--color),var(--color-contrast) 75%)}}}&:not(.is-readonly):has(input:disabled){background:var(--color-background-disabled);.polpo-switch-dot{background:var(--color-foreground-disabled)}.switch-internal-left-icon,.switch-internal-right-icon{color:var(--color-foreground-disabled)}&.is-checked{background:var(--color-dark)}}.polpo-switch-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:3}}.polpo-switch-label{cursor:pointer;user-select:none;padding:0 .5em}.polpo-switch:not(:has(.is-readonly,input:disabled)):hover .polpo-switch-dot,&:has(.polpo-switch-icon:hover) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot,&:has(.polpo-switch-label:hover) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot{box-shadow:0 0 0 calc(.3 * var(--dot-size)) var(--color);@supports (color: color-mix(in lab,red,red)){box-shadow:0 0 0 calc(.3 * var(--dot-size)) color-mix(in hsl,var(--color) 50%,var(--color-contrast))}}.polpo-switch:not(:has(.is-readonly,input:disabled)):active .polpo-switch-dot,&:has(.polpo-switch-icon:active) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot,&:has(.polpo-switch-label:active) .polpo-switch:not(:has(.is-readonly,input:disabled)) .polpo-switch-dot{width:var(--dot-hover-size)}.polpo-switch:not(:has(.is-readonly,input:disabled)).is-checked:active .polpo-switch-dot,&:has(.polpo-switch-icon:active) .polpo-switch:not(:has(.is-readonly,input:disabled)).is-checked .polpo-switch-dot,&:has(.polpo-switch-label:active) .polpo-switch:not(:has(.is-readonly,input:disabled)).is-checked .polpo-switch-dot{margin-left:calc(var(--width) - var(--dot-hover-size))}&.color-primary{--color: var(--color-primary-500);--color-dark: var(--color-primary-700);--color-contrast: var(--color-primary-50)}&.color-secondary{--color: var(--color-secondary-500);--color-dark: var(--color-secondary-700);--color-contrast: var(--color-secondary-50)}&.color-tertiary{--color: var(--color-tertiary-500);--color-dark: var(--color-tertiary-700);--color-contrast: var(--color-tertiary-50)}&.color-active{--color: var(--color-active-500);--color-dark: var(--color-active-700);--color-contrast: var(--color-active-50)}&.color-warning{--color: var(--color-warning-500);--color-dark: var(--color-warning-700);--color-contrast: var(--color-warning-50)}&.color-alert{--color: var(--color-alert-500);--color-dark: var(--color-alert-700);--color-contrast: var(--color-alert-50)}&.color-info{--color: var(--color-info-500);--color-dark: var(--color-info-700);--color-contrast: var(--color-info-50)}}}@layer components{.polpo-smart-table-container{border:0 solid var(--color-primary-500);border-radius:5px;overflow:auto;height:100%;width:100%;margin:auto}.polpo-smart-table{border-collapse:collapse;position:relative;width:100%;&.layout-fixed{table-layout:fixed}&.layout-scrollable{table-layout:auto}thead{position:sticky;z-index:10;top:0;box-shadow:0 3px 5px #0003,0 1px 10px #0000001f;tr{background:var(--color-primary-500);color:var(--color-primary-50);transition:all .3s ease}}tbody{tr{box-shadow:inset 0 0 0 0 var(--color-primary-500);transition:box-shadow .3s ease;&.row-selected,&:hover{background:var(--color-background-paper)}&.row-selected{box-shadow:inset 10px 0 0 -5px var(--color-primary-500)}&:not(:last-child){border-bottom:1px solid var(--color-border)}}}th{padding:.8em 1.2em;user-select:none;&.sort-on-click{cursor:pointer}.sort-icon{width:1em;display:block}svg{animation:fadeIn .3s ease}path{transition:all .3s ease}&:first-child{padding-left:2em}&:last-child{padding-right:2em}}td{transition:all .3s ease;padding:.6em 1em;&:first-child{padding-left:2em}&:last-child{padding-right:2em}}}}@layer components{.polpo-tab{cursor:pointer;user-select:none;transition:all .3s ease}.polpo-tab-list{--color: var(--color-gray-900);--color-contrast: var(--color-gray-50);--inner-radius: 0;--outer-radius: 0;display:grid;grid-auto-flow:column;gap:1em;align-items:center;position:relative;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));border-radius:var(--outer-radius);.tab,.polpo-tabs-selector{border-radius:var(--inner-radius)}&.size-small{font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular))}&.size-medium{font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6))}&.size-large{font-size:var(--text-body, 1rem);line-height:var(--tw-leading, var(--text-body--line-height, 1.6));letter-spacing:var(--tw-tracking, var(--text-body--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-body--font-weight, regular))}.polpo-tabs-selector{position:absolute;background:var(--color);color:var(--color-contrast);border-radius:1.5em;&.active{transition:all .3s ease}}.polpo-tab{border-radius:1.5em;padding:.5em 1em;z-index:1;text-align:center;&.is-open{color:var(--color-contrast)}&:not(.is-open):hover{color:var(--color-gray-900)}}&.radius-none{--outer-radius: 0;--inner-radius: 0}&.radius-small{--outer-radius: .5em;--inner-radius: .5em}&.radius-medium{--outer-radius: 1em;--inner-radius: .8em}&.radius-large{--outer-radius: 1.5em;--inner-radius: 1.3em}&.radius-full{--outer-radius: 1.8em;--inner-radius: 1.6em}&.vertical-direction{grid-auto-flow:row;align-items:unset;align-content:start}&.variant-solid{background:var(--color-background-paper);color:var(--color-foreground);padding:.5em}&.variant-ghost{border:1px solid var(--color);padding:.5em}&.variant-line{border-radius:0;&:not(.vertical-direction){border-bottom:2px solid var(--color-border)}.polpo-tabs-selector{border-radius:0}.polpo-tab{border-radius:0;&.is-open{color:var(--color)}}}&.color-primary{--color: var(--color-primary-500);--color-contrast: var(--color-primary-50)}&.color-secondary{--color: var(--color-secondary-500);--color-contrast: var(--color-secondary-50)}&.color-tertiary{--color: var(--color-tertiary-500);--color-contrast: var(--color-tertiary-50)}&.color-active{--color: var(--color-active-500);--color-contrast: var(--color-active-50)}&.color-warning{--color: var(--color-warning-500);--color-contrast: var(--color-warning-50)}&.color-alert{--color: var(--color-alert-500);--color-contrast: var(--color-alert-50)}&.color-info{--color: var(--color-info-500);--color-contrast: var(--color-info-50)}}}
|
|
2
2
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|