polpo 0.1.11 → 0.1.13

package/dist/components.css

@@ -1,2 +1,2173 @@
-.ir{--color: attr(data-color, "currentColor");--size: attr(data-size, 1px);--spacing: attr(data-spacing, 1px);--dashSize: attr(data-dash-size, 1px);&.I,&.Z{background:var(--color);display:inline-block;border-radius:100px}&.I{width:100%;height:var(--size);&.C{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / calc(var(--spacing) + var(--size)) 100%}&.q{background:repeating-linear-gradient(90deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}&.Z{height:100%;width:var(--size);&.C{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / 100% calc(var(--spacing) + var(--size))}&.q{background:repeating-linear-gradient(0deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}}.nr{display:grid}.sr{display:grid;position:relative;.lr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;cursor:pointer;position:sticky;top:0;padding:20px 0;&.dr{grid-template-columns:auto 1fr auto}}.cr{display:grid}.pr{transition:all .3s ease;&.hr{transform:rotate(-90deg)}}.vr{padding:10px 0 20px}}.gr{--cardZIndex: attr(data-zIndex);--flipSpeed: attr(data-flipSpeed, .5s);--frontRotate: attr(data-frontRotate);--backRotate: attr(data-backRotate);perspective:1000px;z-index:var(--cardZIndex);.ur{height:100%;position:relative;width:100%;transform-style:preserve-3d}.b,.f{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;transition:var(--flipSpeed);height:100%;left:0;top:0;width:100%}.b{position:relative;transform:var(--frontRotate);z-index:2}.f{position:absolute;transform:var(--backRotate)}.mr{.b{position:absolute}.f{position:relative}}}.br{display:inline-block;transition:all .3s ease;.fr{transition:all .1s ease;width:100%;height:100%;display:grid}}.yr{margin:0;padding:.5em 0 .4em;&.kr{color:var(--primary-500)}&.xr{color:var(--secondary-500)}&.wr{color:var(--tertiary-500)}&.zr{color:var(--active-500)}&.Sr{color:var(--alert-500)}&.Yr{color:var(--warning-500)}&.jr{color:var(--info-500)}&.Rr{max-width:70ch}&.Xr{font-family:monospace}&.Ir{padding:0}&.Zr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.Cr{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}&.qr{-webkit-line-clamp:2;line-clamp:2}&.Ar{-webkit-line-clamp:3;line-clamp:3}&.Br{-webkit-line-clamp:4;line-clamp:4}&.Dr{-webkit-line-clamp:5;line-clamp:5}&.Er{font-size:var(--typography-size-hero);line-height:var(--typography-line-height-header);font-weight:700}&.Fr{font-size:var(--typography-size-header1);line-height:var(--typography-line-height-header);font-weight:700}&.Gr{font-size:var(--typography-size-header2);line-height:var(--typography-line-height-header);font-weight:700}&.Hr{font-size:var(--typography-size-header3);line-height:var(--typography-line-height-header);font-weight:700}&.Jr{font-size:var(--typography-size-header4);line-height:var(--typography-line-height-header);font-weight:700}&.Kr{font-size:var(--typography-size-body);line-height:var(--typography-line-height-common);font-weight:400}&.Lr{font-size:var(--typography-size-label);line-height:var(--typography-line-height-common);font-weight:400}&.Mr{font-size:var(--typography-size-small);line-height:var(--typography-line-height-common);font-weight:400}&.Nr{font-weight:700}&.Or{font-weight:400}&.Pr{font-weight:300}}.Qr{position:absolute;display:block;inset:0;overflow:hidden;border-radius:inherit;z-index:1;.y{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:0;height:0;pointer-events:none;animation:y infinite;opacity:.4}}@keyframes y{to{width:300px;height:300px;opacity:0;filter:blur(5px)}}.Tr{--button-blur: 2px;--color: var(--neutral-800);--solid-background: var(--neutral-900);--solid-text: var(--neutral-50);--solid-hover-background: var(--neutral-800);--solid-active-background: var(--neutral-900);--flat-background: hsl(from var(--neutral-100) h s l / 80%);--flat-hover-background: var(--neutral-50);--flat-active-background: var(--neutral-100);--outlined-hover-background: hsl(from var(--neutral-100) h s l / 20%);--outlined-active-background: hsl(from var(--neutral-100) h s l / 50%);--text-hover-background: hsl(from var(--neutral-100) h s l / 20%);--text-active-background: hsl(from var(--neutral-100) h s l / 50%);--shadow-color: hsl(from var(--neutral-800) h s l / 20%);--focus-background: hsl(from var(--neutral-100) h s l / 20%);display:flex;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(--typography-size-label);cursor:pointer;outline:none;transition:all .15s ease;user-select:none;&.Ur{padding:.625em}&.Vr{width:100%}&.Wr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&._r{font-size:var(--typography-size-small)}&.ra{font-size:var(--typography-size-label)}&.aa{font-size:var(--typography-size-body)}&.oa{border-radius:0}&.ea{border-radius:.25em}&.ta{border-radius:.5em}&.ia{border-radius:1em}&.na{border-radius:100rem}&:not(:disabled){&:hover,&:active,&:focus-visible{backdrop-filter:blur(var(--button-blur))}&:hover{transform:scale(1.01);box-shadow:0 1.4em .5em -1em hsl(from var(--black) h s l / 20%),0 .7em 1em -.5em hsl(from var(--black) h s l / 20%)}&:active{transform:scale(.98);box-shadow:0 .3em .4em -.2em hsl(from var(--black) h s l / 20%),0 .2em .8em -.1em hsl(from var(--black) h s l / 20%)}}color:var(--color);.A{background:var(--color)}&.B{background:var(--solid-background);color:var(--solid-text);backdrop-filter:blur(var(--button-blur));.A{background:var(--solid-text)}&:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--solid-background)}&:hover{background:var(--solid-hover-background)}&:active{background:var(--solid-active-background)}}&.D{background:var(--flat-background);backdrop-filter:blur(var(--button-blur));&:hover{background:var(--flat-hover-background)}&:active{background:var(--flat-active-background)}}&.E{background:transparent;border:1px solid;&:hover{background:var(--outlined-hover-background)}&:active{background:var(--outlined-active-background)}}&.F{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)}&.sa{--color: var(--primary-500);--solid-background: var(--primary-500);--solid-text: var(--primary-50);--solid-hover-background: var(--primary-400);--solid-active-background: var(--primary-600);--flat-background: hsl(from var(--primary-100) h s l / 80%);--flat-hover-background: var(--primary-50);--flat-active-background: var(--primary-100);--outlined-hover-background: hsl(from var(--primary-100) h s l / 20%);--outlined-active-background: hsl(from var(--primary-100) h s l / 50%);--text-hover-background: hsl(from var(--primary-100) h s l / 20%);--text-active-background: hsl(from var(--primary-100) h s l / 50%);--shadow-color: hsl(from var(--primary-500) h s l / 20%);--focus-background: hsl(from var(--primary-100) h s l / 20%)}&.la{--color: var(--secondary-500);--solid-background: var(--secondary-500);--solid-text: var(--secondary-50);--solid-hover-background: var(--secondary-400);--solid-active-background: var(--secondary-600);--flat-background: hsl(from var(--secondary-100) h s l / 80%);--flat-hover-background: var(--secondary-50);--flat-active-background: var(--secondary-100);--outlined-hover-background: hsl(from var(--secondary-100) h s l / 20%);--outlined-active-background: hsl(from var(--secondary-100) h s l / 50%);--text-hover-background: hsl(from var(--secondary-100) h s l / 20%);--text-active-background: hsl(from var(--secondary-100) h s l / 50%);--shadow-color: hsl(from var(--secondary-500) h s l / 20%);--focus-background: hsl(from var(--secondary-100) h s l / 20%)}&.da{--color: var(--tertiary-500);--solid-background: var(--tertiary-500);--solid-text: var(--tertiary-50);--solid-hover-background: var(--tertiary-400);--solid-active-background: var(--tertiary-600);--flat-background: hsl(from var(--tertiary-100) h s l / 80%);--flat-hover-background: var(--tertiary-50);--flat-active-background: var(--tertiary-100);--outlined-hover-background: hsl(from var(--tertiary-100) h s l / 20%);--outlined-active-background: hsl(from var(--tertiary-100) h s l / 50%);--text-hover-background: hsl(from var(--tertiary-100) h s l / 20%);--text-active-background: hsl(from var(--tertiary-100) h s l / 50%);--shadow-color: hsl(from var(--tertiary-500) h s l / 20%);--focus-background: hsl(from var(--tertiary-100) h s l / 20%)}&.ca{--color: var(--active-500);--solid-background: var(--active-500);--solid-text: var(--active-50);--solid-hover-background: var(--active-400);--solid-active-background: var(--active-600);--flat-background: hsl(from var(--active-100) h s l / 80%);--flat-hover-background: var(--active-50);--flat-active-background: var(--active-100);--outlined-hover-background: hsl(from var(--active-100) h s l / 20%);--outlined-active-background: hsl(from var(--active-100) h s l / 50%);--text-hover-background: hsl(from var(--active-100) h s l / 20%);--text-active-background: hsl(from var(--active-100) h s l / 50%);--shadow-color: hsl(from var(--active-500) h s l / 20%);--focus-background: hsl(from var(--active-100) h s l / 20%)}&.pa{--color: var(--warning-500);--solid-background: var(--warning-500);--solid-text: var(--warning-50);--solid-hover-background: var(--warning-400);--solid-active-background: var(--warning-600);--flat-background: hsl(from var(--warning-100) h s l / 80%);--flat-hover-background: var(--warning-50);--flat-active-background: var(--warning-100);--outlined-hover-background: hsl(from var(--warning-100) h s l / 20%);--outlined-active-background: hsl(from var(--warning-100) h s l / 50%);--text-hover-background: hsl(from var(--warning-100) h s l / 20%);--text-active-background: hsl(from var(--warning-100) h s l / 50%);--shadow-color: hsl(from var(--warning-500) h s l / 20%);--focus-background: hsl(from var(--warning-100) h s l / 20%)}&.ha{--color: var(--alert-500);--solid-background: var(--alert-500);--solid-text: var(--alert-50);--solid-hover-background: var(--alert-400);--solid-active-background: var(--alert-600);--flat-background: hsl(from var(--alert-100) h s l / 80%);--flat-hover-background: var(--alert-50);--flat-active-background: var(--alert-100);--outlined-hover-background: hsl(from var(--alert-100) h s l / 20%);--outlined-active-background: hsl(from var(--alert-100) h s l / 50%);--text-hover-background: hsl(from var(--alert-100) h s l / 20%);--text-active-background: hsl(from var(--alert-100) h s l / 50%);--shadow-color: hsl(from var(--alert-500) h s l / 20%);--focus-background: hsl(from var(--alert-100) h s l / 20%)}&.va{--color: var(--info-500);--solid-background: var(--info-500);--solid-text: var(--info-50);--solid-hover-background: var(--info-400);--solid-active-background: var(--info-600);--flat-background: hsl(from var(--info-100) h s l / 80%);--flat-hover-background: var(--info-50);--flat-active-background: var(--info-100);--outlined-hover-background: hsl(from var(--info-100) h s l / 20%);--outlined-active-background: hsl(from var(--info-100) h s l / 50%);--text-hover-background: hsl(from var(--info-100) h s l / 20%);--text-active-background: hsl(from var(--info-100) h s l / 50%);--shadow-color: hsl(from var(--info-500) h s l / 20%);--focus-background: hsl(from var(--info-100) h s l / 20%)}&:disabled{color:var(--neutral-200);pointer-events:none}&.B:disabled{background:var(--neutral-200);color:var(--neutral-50)}&.D:disabled{background:hsl(from var(--neutral-50) h s l / 80%)}&.E:disabled,&.F:disabled{background:transparent}}.ga{position:fixed;top:0;left:0;width:100%;height:100%;cursor:none;pointer-events:none}.ua{position:fixed;border-radius:50%;z-index:99999999;pointer-events:none;transform:translateZ(0);@media(any-pointer:coarse){display:none}&.ma{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid var(--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;&.G{margin-left:-40px;margin-top:-40px;width:80px;height:80px;background-color:var(--primary-500);opacity:.3}&.ba{margin-left:-2px;margin-top:-40px;width:4px;height:80px;background-color:var(--primary-500);opacity:.3}}&.fa{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:99999999;background-color:var(--primary-500);transition:opacity .3s ease-in-out;opacity:1;&.G{opacity:0}}}.e{border-radius:40%;background:var(--background-paper);transition:all .3s ease;width:1em;height:1em;margin:2px;outline:1px solid;display:flex;position:relative;.H{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:2}&.ya{font-size:1em}&.ka{font-size:1.2em}&.xa{font-size:1.4em}}.s{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;.J{font-size:.7em;z-index:1;opacity:0;transition:opacity .3s ease}}.wa{--color: var(--neutral-800);--color-icon: var(--neutral-50);--color-hover: hsl(from var(--neutral-800) h s l / 50%);display:grid;grid-auto-flow:column;grid-auto-columns:auto 1fr;align-items:center;gap:.5em;width:fit-content;.k{cursor:pointer;user-select:none;width:100%}.e{color:var(--color);&.K{.s{width:100%;height:100%;background:var(--color);color:var(--color-icon)}.J{opacity:1}}}.e:hover,&:has(.k:hover) .e{box-shadow:0 0 0 .3em var(--color-hover);.s{width:20%;height:20%;border-radius:20%;background:var(--color-hover);color:var(--color-icon)}&:is(.K){.s{width:100%;height:100%;border-radius:inherit;background:var(--color)}}}.e:focus,&:has(.H:focus) .e,&:has(.k:focus) .e{box-shadow:0 0 0 .3em var(--color-hover)}&.za{--color: var(--primary-500);--color-icon: var(--primary-50);--color-hover: hsl(from var(--primary-500) h s l / 50%)}&.Sa{--color: var(--secondary-500);--color-icon: var(--secondary-50);--color-hover: hsl(from var(--secondary-500) h s l / 50%)}&.Ya{--color: var(--tertiary-500);--color-icon: var(--tertiary-50);--color-hover: hsl(from var(--tertiary-500) h s l / 50%)}&.ja{--color: var(--active-500);--color-icon: var(--active-50);--color-hover: hsl(from var(--active-500) h s l / 50%)}&.Ra{--color: var(--warning-500);--color-icon: var(--warning-50);--color-hover: hsl(from var(--warning-500) h s l / 50%)}&.Xa{--color: var(--alert-500);--color-icon: var(--alert-50);--color-hover: hsl(from var(--alert-500) h s l / 50%)}&.Ia{--color: var(--info-500);--color-icon: var(--info-50);--color-hover: hsl(from var(--info-500) h s l / 50%)}}.Za{display:grid;grid-auto-columns:auto;gap:.5em;transition:all .2s ease;.l{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.x,.w{font-size:1em}.x{margin-right:1em}.w{margin-left:1em}.L{display:grid;grid-auto-flow:column;gap:5px;align-items:center;justify-content:start}&.Ca{.l{border:1px solid var(--border);border-radius:4px;padding:1em;background:var(--background)}}&.qa{.l{border-bottom:1px solid;padding:.5em 0}}&.Aa{border:1px solid var(--border);border-radius:4px;padding:.5em 0;background:var(--background);.M,.l,.L{padding:0 1em}}&.Ba{grid-auto-flow:column;padding:.5em 0;align-items:center;.M{width:auto}}&.N{color:var(--alert-500);border-color:var(--alert-500)}&.O{color:var(--info-500);border-color:var(--info-500)}&.N,&.O{.x,.w,.P{color:var(--foreground);border-color:var(--foreground)}}.P>*{width:100%}}.Da{position:fixed;z-index:1001;pointer-events:none}.Ea{background:var(--background-paper);pointer-events:initial;&.Fa{animation:Ha .2s ease;&.Q{animation:Ga .2s ease;transform:translateY(-10px);opacity:0}}&.Ja{animation:La .5s ease;&.Q{animation:Ka .5s ease;transform:scale3d(.3,.3,.3);opacity:0}}}.Ma{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;animation:U .5s cubic-bezier(.215,.61,.355,1);&.Na{animation:T .5s cubic-bezier(.215,.61,.355,1);opacity:0;transform:translateY(-10px)}}@keyframes U{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes T{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.Oa{background:transparent;.Pa{&.Qa{animation:Ta .6s linear}}}.t{position:relative;.Ua{box-shadow:0 0 10px -5px;border-radius:10px;overflow:hidden;display:grid}.t{background:var(--background);padding:3em 4em 2em;display:grid;gap:1em}&.Va .t{padding:2em 0 0}&:has(.z) .t{padding-top:4em}&.Wa{&:before{content:"";position:absolute;width:90%;height:100%;top:8px;left:50%;transform:translate(-50%);z-index:-1;background:var(--primary-500);border-radius:10px;display:block;transition:top .3s cubic-bezier(.81,-.52,.42,2.5)}}.z{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--primary-500);color:var(--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(--primary-500) h s l / 53%),0 0 hsl(from var(--primary-500) h s l / 40%),0 0 hsl(from var(--primary-500) h s l / 27%),0 0 hsl(from var(--primary-500) h s l / 14%)}.V{width:1em;height:1em;border-radius:50%;cursor:pointer;background:var(--background);position:absolute;top:10px;right:5px;font-size:var(--typography-size-label);opacity:0;transition:opacity .3s ease;z-index:1}&._a{.t{border-top:5px solid var(--primary-500)}}&:hover{.z{box-shadow:0 0 0 7px hsl(from var(--primary-500) h s l / 53%),0 0 0 14px hsl(from var(--primary-500) h s l / 40%),0 0 0 21px hsl(from var(--primary-500) h s l / 27%),0 0 0 28px hsl(from var(--primary-500) h s l / 14%)}.V{opacity:1}&:before{top:15px}}}.ro{color:var(--foreground);overflow:auto;height:100%;.ao{padding:2em}.i{border-radius:50%;cursor:pointer;display:grid;place-content:center;background:var(--background);border:4px solid var(--primary-500);position:absolute;padding:.5em}&.oo{border-right:4px solid var(--primary-500);animation:to .3s ease;&.d{animation:eo .3s ease;transform:translate(-100%)}.i{top:2em;left:100%;transform:translate(calc(-50% + 2px))}}&.io{border-left:4px solid var(--primary-500);animation:so .3s ease;&.d{animation:no .3s ease;transform:translate(100%)}.i{top:2em;right:100%;transform:translate(calc(50% - 2px))}}&.lo{border-bottom:4px solid var(--primary-500);animation:co .3s ease;&.d{animation:do .3s ease;transform:translateY(-100%)}.i{bottom:0;right:2em;transform:translateY(calc(50% - 2px))}}&.po{border-top:4px solid var(--primary-500);animation:vo .3s ease;&.d{animation:ho .3s ease;transform:translateY(100%)}.i{top:0;right:2em;transform:translateY(calc(-50% + 2px))}}}.go{display:grid;max-width:450px;gap:1em;place-content:center;justify-items:center;text-align:center;.uo{display:grid;grid-auto-flow:column;justify-content:center;gap:1em}}.mo{border-radius:.5em;border:1px solid var(--border);background:var(--background);box-shadow:0 0 25px var(--background-paper);user-select:none;position:relative;overflow-y:auto;.bo{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;height:100%;position:relative;overflow-y:auto}.fo{margin:.4em 0;color:var(--border)}}.yo{background:var(--background);color:var(--foreground);font-weight:lighter;padding:.5em 1.2em;position:sticky;top:0;z-index:10;pointer-events:none}.ko{padding:.2em 1em;border-radius:.3em;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;outline:0;margin:0 .2em;position:relative;.xo{background:hsl(from var(--foreground) h s l / 31%)}&:first-child{margin-top:5px}.wo{margin-right:.5em}.zo{width:100%}&.So{opacity:.4;pointer-events:none;cursor:default}&:focus,&:hover{background:hsl(from var(--background-paper) h s l / 25%)}&.Yo{background:var(--background-paper);&:focus,&:hover{background:hsl(from var(--background-paper) h s l / 75%)}}}.jo{position:relative;.Ro{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;position:relative}}.Xo{display:grid;grid-auto-flow:column;align-items:center;justify-content:start;gap:.5em;.Io{margin-left:10px}.W{padding-right:1em;border-radius:inherit;width:100%;font-size:var(--typography-size-label);font-family:var(--typography-family-main) sans-serif}}.Zo{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}}.Co{display:grid;gap:10px;background:var(--background);color:var(--foreground);padding:10px;border-radius:0 18px 18px;border:1px solid;box-shadow:0 5px 30px -5px var(--neutral-900);.qo{width:1em;height:1em;border-radius:50%}.Ao,.Bo{width:8px;height:100%;border-radius:4px;border-width:2px}.Do{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}.W{padding:0;border-radius:inherit;background:var(--background);color:var(--foreground);width:100%;font-size:var(--typography-size-label);font-family:var(--typography-family-main) sans-serif;letter-spacing:2px;text-align:center}}.Eo{display:grid}.Fo{display:grid;gap:10px;.Go{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(--secondary-500);color:var(--secondary-50);align-items:center;._{width:32px;height:32px;border-radius:5px;background:var(--primary-50);color:var(--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(--primary-50);color:var(--primary-500);._{background:var(--primary-500);color:var(--primary-50)}}}.Ho{max-height:280px;overflow-y:auto;border:1px solid;border-radius:5px;.Jo{display:grid}}.Ko{color:tomato}.Lo{font-size:1em;display:grid;grid-auto-flow:column;justify-content:end;align-items:center;gap:.5em;.Mo{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(--primary-500);color:var(--primary-50)}}}}.No{display:grid;grid-template-columns:35px 1fr 35px;gap:1em;align-items:center;padding:10px;background:var(--background);&:not(:last-child){border-bottom:1px dashed}&:hover{.rr{color:var(--primary-500)}}.Oo{background:var(--primary-500);color:var(--primary-50);width:32px;height:32px;border-radius:5px;display:grid;place-content:center;border:1px solid}.Po{display:grid;font-size:.7em;justify-content:start}.rr{border-radius:5px;display:grid;place-content:center;width:32px;height:32px;cursor:pointer;transition:all .3s ease;&:hover{background:var(--primary-500);color:var(--primary-50)}}}.c{border-radius:50%;background:var(--background-paper);transition:all .3s ease;width:1em;height:1em;outline:2px solid;display:flex;position:relative;padding:2px;.Qo{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:1}&.To{font-size:1em}&.Uo{font-size:1.2em}&.Vo{font-size:1.4em}}.p{transition:all .2s ease-out;border-radius:inherit;margin:auto;width:0;height:0}.Wo{--color: var(--neutral-800);display:flex;align-items:center;gap:1em;width:fit-content;.ar{cursor:pointer;user-select:none}.c{color:var(--color);&.or{.p{width:100%;height:100%;background:var(--color)}}}.c:hover,&:has(.ar:hover) .c{box-shadow:0 0 0 .4em hsl(from var(--color) h s l / 50%);.p{width:20%;height:20%;background:hsl(from var(--color) h s l / 50%)}&:is(.or){.p{width:80%;height:80%;background:var(--color)}}}&._o{--color: var(--primary-500)}&.re{--color: var(--secondary-500)}&.ae{--color: var(--tertiary-500)}&.oe{--color: var(--active-500)}&.ee{--color: var(--warning-500)}&.te{--color: var(--alert-500)}&.ie{--color: var(--info-500)}}.ne{display:grid;place-content:start center;place-items:start center;.se{width:100%;height:30px;display:grid;place-content:center;.le{animation:de .5s linear infinite;font-size:20px}}.ce{font-size:.8em;text-align:center;color:#a6a6a6}}.pe{cursor:pointer;.he{display:grid;place-content:center;align-self:center;border-radius:100%;cursor:pointer;font-size:.6em;padding:.5em;&:hover{background:hsl(from var(--foreground) h s l / 33%)}}.ve{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;grid-auto-rows:auto;position:relative;cursor:pointer;user-select:none;&.ge{grid-template-columns:1fr auto auto}}.ue{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;&.me{color:#919191}}.be{transition:transform .2s ease;&.fe{transform:rotate(180deg)}}}.ye{.ke{gap:0;display:block;height:auto;overflow:initial}}.xe{gap:0;display:grid;grid-template-rows:1fr;height:100%;overflow:auto;&.we{grid-template-rows:auto 1fr}.ze{height:100%;overflow:auto}.Se{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start}}.Ye{background:var(--background);padding:2px 5px;border-bottom:1px solid var(--border);.je{outline:none;padding:.8em 5px;font-size:var(--typography-size-label);width:100%}}.Re{display:grid;grid-template-columns:1fr 50px;align-items:center;gap:10px;.S{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(--primary-500);box-shadow:0 0 0 0 var(--neutral-500);margin-top:-8px;transition:all .3s ease;cursor:pointer}&::-webkit-slider-runnable-track{height:4px;border-radius:1em;background:hsl(from var(--primary-200) h s l / 50%);transition:all .3s ease}&:focus,&:hover{&::-webkit-slider-thumb{background:var(--primary-500);box-shadow:0 0 0 6px hsl(from var(--primary-500) h s l / 50%);cursor:grab}}&:active{&::-webkit-slider-thumb{box-shadow:0 0 0 12px hsl(from var(--primary-500) h s l / 31%);cursor:grabbing}}&:focus{&::-webkit-slider-runnable-track{background:var(--primary-300)}}}&:has(.h:focus) .S::-webkit-slider-thumb,&:has(.h:hover) .S::-webkit-slider-thumb{background:var(--primary-500);box-shadow:0 0 0 6px hsl(from var(--primary-500) h s l / 31%)}.h{transition:all .3s ease;border:1px solid;border-radius:5px;text-align:center;font-size:var(--typography-size-label);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}}&.Xe{.h{color:var(--primary-500)}}}.Ie{border:0;outline:0;field-sizing:content}.Ze{color:var(--foreground);font-size:var(--typography-size-small);line-height:1em;border-radius:5px;padding:.5em 1em;display:block;border:1px solid;pointer-events:none;&:before{content:"";display:block;background:var(--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(--foreground);border-bottom:1px solid var(--foreground);border-radius:0 0 3px}&.Ce{animation:Ae .25s ease-out;&.v{animation:qe .25s ease-out;transform:translate(-10px);opacity:0}&:before{top:50%;left:100%;transform:translate(-50%,-50%) rotate(-45deg)}}&.Be{animation:Ee .25s ease-out;&.v{animation:De .25s ease-out;transform:translate(10px);opacity:0}&:before{top:50%;right:100%;transform:translate(50%,-50%) rotate(135deg)}}&.Fe{animation:He .25s ease-out;&.v{animation:Ge .25s ease-out;transform:translateY(-10px);opacity:0}&:before{top:100%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}}&.Je{animation:Le .25s ease-out;&.v{animation:Ke .25s ease-out;transform:translateY(10px);opacity:0}&:before{left:50%;bottom:100%;transform:translate(-50%,50%) rotate(-135deg)}}}.Me{--width: attr(data-width);--dot-size: attr(data-dot-size);--dot-hover-size: attr(data-dot-hover-size);--padding: attr(data-padding);--color: var(--neutral-500);--color-dark: var(--neutral-800);--color-contrast: var(--neutral-50);display:flex;align-items:center;gap:.5em;width:fit-content;.a{width:calc(var(--width) + var(--padding) * 2);border-radius:100em;background:var(--background-paper);padding:var(--padding);transition:all .3s ease;position:relative;.r{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}.g{cursor:pointer;display:block}.Y,.j{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}.Y{left:var(--padding)}.j{right:var(--padding)}&.n{background:var(--color);.r{margin-left:calc(var(--width) - var(--dot-size));background:color-mix(in hsl,var(--color),var(--color-contrast) 75%)}}&:not(.o):has(input:disabled){background:var(--background-disabled);.r{background:var(--foreground-disabled)}.Y,.j{color:var(--foreground-disabled)}&.n{background:var(--color-dark)}}.Ne{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:3}}.u{cursor:pointer;user-select:none;padding:0 .5em}.a:not(:has(.o,input:disabled)):hover .r,&:has(.g:hover) .a:not(:has(.o,input:disabled)) .r,&:has(.u:hover) .a:not(:has(.o,input:disabled)) .r{box-shadow:0 0 0 calc(.3 * var(--dot-size)) color-mix(in hsl,var(--color) 50%,var(--color-contrast))}.a:not(:has(.o,input:disabled)):active .r,&:has(.g:active) .a:not(:has(.o,input:disabled)) .r,&:has(.u:active) .a:not(:has(.o,input:disabled)) .r{width:var(--dot-hover-size)}.a:not(:has(.o,input:disabled)).n:active .r,&:has(.g:active) .a:not(:has(.o,input:disabled)).n .r,&:has(.u:active) .a:not(:has(.o,input:disabled)).n .r{margin-left:calc(var(--width) - var(--dot-hover-size))}&.Oe{--color: var(--primary-500);--color-dark: var(--primary-700);--color-contrast: var(--primary-50)}&.Pe{--color: var(--secondary-500);--color-dark: var(--secondary-700);--color-contrast: var(--secondary-50)}&.Qe{--color: var(--tertiary-500);--color-dark: var(--tertiary-700);--color-contrast: var(--tertiary-50)}&.Te{--color: var(--active-500);--color-dark: var(--active-700);--color-contrast: var(--active-50)}&.Ue{--color: var(--warning-500);--color-dark: var(--warning-700);--color-contrast: var(--warning-50)}&.Ve{--color: var(--alert-500);--color-dark: var(--alert-700);--color-contrast: var(--alert-50)}&.We{--color: var(--info-500);--color-dark: var(--info-700);--color-contrast: var(--info-50)}}._e{border:0 solid var(--primary-500);border-radius:5px;overflow:auto;height:100%;width:100%;margin:auto}.rt{border-collapse:collapse;position:relative;width:100%;&.at{table-layout:fixed}&.ot{table-layout:auto}thead{position:sticky;z-index:10;top:0;box-shadow:0 3px 5px #0003,0 1px 10px #0000001f;tr{background:var(--primary-500);color:var(--primary-50);transition:all .3s ease}}tbody{tr{box-shadow:inset 0 0 0 0 var(--primary-500);transition:box-shadow .3s ease;&.er,&:hover{background:var(--background-paper)}&.er{box-shadow:inset 10px 0 0 -5px var(--primary-500)}&:not(:last-child){border-bottom:1px solid var(--border)}}}th{padding:.8em 1.2em;user-select:none;&.et{cursor:pointer}.tt{width:1em;display:block}svg{animation:it .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}}}.m{cursor:pointer;user-select:none;transition:all .3s ease}.nt{--color: var(--neutral-900);--color-contrast: var(--neutral-50);--inner-radius: 0;--outer-radius: 0;display:grid;grid-auto-flow:column;gap:1em;align-items:center;position:relative;font-size:var(--typography-size-label);border-radius:var(--outer-radius);.m,.R{border-radius:var(--inner-radius)}&.st{font-size:var(--typography-size-small)}&.lt{font-size:var(--typography-size-label)}&.dt{font-size:var(--typography-size-body)}.R{position:absolute;background:var(--color);color:var(--color-contrast);border-radius:1.5em;&.ct{transition:all .3s ease}}.m{border-radius:1.5em;padding:.5em 1em;z-index:1;text-align:center;&.X{color:var(--color-contrast)}&:not(.X):hover{color:var(--neutral-900)}}&.pt{--outer-radius: 0;--inner-radius: 0}&.ht{--outer-radius: .5em;--inner-radius: .5em}&.vt{--outer-radius: 1em;--inner-radius: .8em}&.gt{--outer-radius: 1.5em;--inner-radius: 1.3em}&.ut{--outer-radius: 1.8em;--inner-radius: 1.6em}&.tr{grid-auto-flow:row;align-items:unset;align-content:start}&.mt{background:var(--background-paper);color:var(--foreground);padding:.5em}&.bt{border:1px solid var(--color);padding:.5em}&.yt{border-radius:0;&:not(.tr){border-bottom:2px solid var(--border)}.R{border-radius:0}.m{border-radius:0;&.X{color:var(--color)}}}&.kt{--color: var(--primary-500);--color-contrast: var(--primary-50)}&.xt{--color: var(--secondary-500);--color-contrast: var(--secondary-50)}&.wt{--color: var(--tertiary-500);--color-contrast: var(--tertiary-50)}&.zt{--color: var(--active-500);--color-contrast: var(--active-50)}&.St{--color: var(--warning-500);--color-contrast: var(--warning-50)}&.Yt{--color: var(--alert-500);--color-contrast: var(--alert-50)}&.jt{--color: var(--info-500);--color-contrast: var(--info-50)}}.Rt{--background: attr(data-background, var(--primary-500));--text: attr(data-text, var(--primary-50));--background-selected: attr(data-background-selected, var(--primary-700));--text-selected: attr(data-text-selected, var(--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(--typography-size-label);user-select:none;&.Xt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&.It{border-radius:0}&.Zt{border-radius:.25em}&.Ct{border-radius:.5em}&.qt{border-radius:1em}&.At{border-radius:100rem}&:hover,&.Bt{background:var(--background-selected);color:var(--text-selected)}}
+/* src/components/line/line.styles.css */
+.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)));
+    }
+  }
+}
+
+/* src/components/accordion/accordion.styles.css */
+.accordion {
+  display: grid;
+}
+.accordion-item {
+  display: grid;
+  position: relative;
+  .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;
+    }
+  }
+  .accordion-header-content {
+    display: grid;
+  }
+  .accordion-toggle-icon {
+    transition: all 300ms ease;
+    &.isOpen {
+      transform: rotate(-90deg);
+    }
+  }
+  .accordion-body {
+    padding: 10px 0 20px;
+  }
+}
+
+/* src/components/cards/flip-card/flip-card.styles.css */
+.flip-card {
+  --cardZIndex: attr(data-zIndex);
+  --flipSpeed: attr(data-flipSpeed, 500ms);
+  --frontRotate: attr(data-frontRotate);
+  --backRotate: attr(data-backRotate);
+  perspective: 1000px;
+  z-index: var(--cardZIndex);
+  .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;
+    }
+  }
+}
+
+/* src/components/cards/hover-card/hover-card.styles.css */
+.hover-card {
+  display: inline-block;
+  transition: all 300ms ease;
+  .card-hover-layer {
+    transition: all 100ms ease;
+    width: 100%;
+    height: 100%;
+    display: grid;
+  }
+}
+
+/* src/components/typography/typography.styles.css */
+.typography {
+  margin: 0;
+  padding: 0.5em 0 0.4em;
+  &.primary {
+    color: var(--primary-500);
+  }
+  &.secondary {
+    color: var(--secondary-500);
+  }
+  &.tertiary {
+    color: var(--tertiary-500);
+  }
+  &.active {
+    color: var(--active-500);
+  }
+  &.alert {
+    color: var(--alert-500);
+  }
+  &.warning {
+    color: var(--warning-500);
+  }
+  &.info {
+    color: var(--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(--typography-size-hero);
+    line-height: var(--typography-line-height-header);
+    font-weight: 700;
+  }
+  &.header1 {
+    font-size: var(--typography-size-header1);
+    line-height: var(--typography-line-height-header);
+    font-weight: 700;
+  }
+  &.header2 {
+    font-size: var(--typography-size-header2);
+    line-height: var(--typography-line-height-header);
+    font-weight: 700;
+  }
+  &.header3 {
+    font-size: var(--typography-size-header3);
+    line-height: var(--typography-line-height-header);
+    font-weight: 700;
+  }
+  &.header4 {
+    font-size: var(--typography-size-header4);
+    line-height: var(--typography-line-height-header);
+    font-weight: 700;
+  }
+  &.body {
+    font-size: var(--typography-size-body);
+    line-height: var(--typography-line-height-common);
+    font-weight: 400;
+  }
+  &.label {
+    font-size: var(--typography-size-label);
+    line-height: var(--typography-line-height-common);
+    font-weight: 400;
+  }
+  &.small {
+    font-size: var(--typography-size-small);
+    line-height: var(--typography-line-height-common);
+    font-weight: 400;
+  }
+  &.bold {
+    font-weight: 700;
+  }
+  &.regular {
+    font-weight: 400;
+  }
+  &.light {
+    font-weight: 300;
+  }
+}
+
+/* src/components/ripple/ripple.styles.css */
+.ripple {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 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: 0.4;
+  }
+}
+@keyframes ripple-effect {
+  to {
+    width: 300px;
+    height: 300px;
+    opacity: 0;
+    filter: blur(5px);
+  }
+}
+
+/* src/components/button/button.styles.css */
+.button {
+  --button-blur: 2px;
+  --color: var(--neutral-800);
+  --solid-background: var(--neutral-900);
+  --solid-text: var(--neutral-50);
+  --solid-hover-background: var(--neutral-800);
+  --solid-active-background: var(--neutral-900);
+  --flat-background: hsl(from var(--neutral-100) h s l / 80%);
+  --flat-hover-background: var(--neutral-50);
+  --flat-active-background: var(--neutral-100);
+  --outlined-hover-background: hsl(from var(--neutral-100) h s l / 20%);
+  --outlined-active-background: hsl(from var(--neutral-100) h s l / 50%);
+  --text-hover-background: hsl(from var(--neutral-100) h s l / 20%);
+  --text-active-background: hsl(from var(--neutral-100) h s l / 50%);
+  --shadow-color: hsl(from var(--neutral-800) h s l / 20%);
+  --focus-background: hsl(from var(--neutral-100) h s l / 20%);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.625em 2.1875em;
+  gap: 0.625em;
+  width: auto;
+  border-radius: 0.5em;
+  font-weight: bold;
+  font-size: var(--typography-size-label);
+  cursor: pointer;
+  outline: none;
+  transition: all 150ms ease;
+  user-select: none;
+  &.icon {
+    padding: 0.625em;
+  }
+  &.full {
+    width: 100%;
+  }
+  &.no-wrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &.size-small {
+    font-size: var(--typography-size-small);
+  }
+  &.size-regular {
+    font-size: var(--typography-size-label);
+  }
+  &.size-large {
+    font-size: var(--typography-size-body);
+  }
+  &.radius-none {
+    border-radius: 0;
+  }
+  &.radius-small {
+    border-radius: 0.25em;
+  }
+  &.radius-medium {
+    border-radius: 0.5em;
+  }
+  &.radius-large {
+    border-radius: 1em;
+  }
+  &.radius-full {
+    border-radius: 100rem;
+  }
+  &:not(:disabled) {
+    &:hover,
+    &:active,
+    &:focus-visible {
+      backdrop-filter: blur(var(--button-blur));
+    }
+    &:hover {
+      transform: scale(1.01);
+      box-shadow: 0 1.4em 0.5em -1em hsl(from var(--black) h s l / 20%), 0 0.7em 1em -0.5em hsl(from var(--black) h s l / 20%);
+    }
+    &:active {
+      transform: scale(0.98);
+      box-shadow: 0 0.3em 0.4em -0.2em hsl(from var(--black) h s l / 20%), 0 0.2em 0.8em -0.1em hsl(from var(--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 0.3125em var(--shadow-color);
+      background: var(--solid-background);
+    }
+    &:hover {
+      background: var(--solid-hover-background);
+    }
+    &:active {
+      background: var(--solid-active-background);
+    }
+  }
+  &.flat {
+    background: var(--flat-background);
+    backdrop-filter: blur(var(--button-blur));
+    &:hover {
+      background: var(--flat-hover-background);
+    }
+    &:active {
+      background: var(--flat-active-background);
+    }
+  }
+  &.outlined {
+    background: transparent;
+    border: 1px solid;
+    &: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 0.3125em var(--shadow-color);
+    background: var(--focus-background);
+  }
+  &.primary {
+    --color: var(--primary-500);
+    --solid-background: var(--primary-500);
+    --solid-text: var(--primary-50);
+    --solid-hover-background: var(--primary-400);
+    --solid-active-background: var(--primary-600);
+    --flat-background: hsl(from var(--primary-100) h s l / 80%);
+    --flat-hover-background: var(--primary-50);
+    --flat-active-background: var(--primary-100);
+    --outlined-hover-background: hsl(from var(--primary-100) h s l / 20%);
+    --outlined-active-background: hsl(from var(--primary-100) h s l / 50%);
+    --text-hover-background: hsl(from var(--primary-100) h s l / 20%);
+    --text-active-background: hsl(from var(--primary-100) h s l / 50%);
+    --shadow-color: hsl(from var(--primary-500) h s l / 20%);
+    --focus-background: hsl(from var(--primary-100) h s l / 20%);
+  }
+  &.secondary {
+    --color: var(--secondary-500);
+    --solid-background: var(--secondary-500);
+    --solid-text: var(--secondary-50);
+    --solid-hover-background: var(--secondary-400);
+    --solid-active-background: var(--secondary-600);
+    --flat-background: hsl(from var(--secondary-100) h s l / 80%);
+    --flat-hover-background: var(--secondary-50);
+    --flat-active-background: var(--secondary-100);
+    --outlined-hover-background: hsl(from var(--secondary-100) h s l / 20%);
+    --outlined-active-background: hsl(from var(--secondary-100) h s l / 50%);
+    --text-hover-background: hsl(from var(--secondary-100) h s l / 20%);
+    --text-active-background: hsl(from var(--secondary-100) h s l / 50%);
+    --shadow-color: hsl(from var(--secondary-500) h s l / 20%);
+    --focus-background: hsl(from var(--secondary-100) h s l / 20%);
+  }
+  &.tertiary {
+    --color: var(--tertiary-500);
+    --solid-background: var(--tertiary-500);
+    --solid-text: var(--tertiary-50);
+    --solid-hover-background: var(--tertiary-400);
+    --solid-active-background: var(--tertiary-600);
+    --flat-background: hsl(from var(--tertiary-100) h s l / 80%);
+    --flat-hover-background: var(--tertiary-50);
+    --flat-active-background: var(--tertiary-100);
+    --outlined-hover-background: hsl(from var(--tertiary-100) h s l / 20%);
+    --outlined-active-background: hsl(from var(--tertiary-100) h s l / 50%);
+    --text-hover-background: hsl(from var(--tertiary-100) h s l / 20%);
+    --text-active-background: hsl(from var(--tertiary-100) h s l / 50%);
+    --shadow-color: hsl(from var(--tertiary-500) h s l / 20%);
+    --focus-background: hsl(from var(--tertiary-100) h s l / 20%);
+  }
+  &.active {
+    --color: var(--active-500);
+    --solid-background: var(--active-500);
+    --solid-text: var(--active-50);
+    --solid-hover-background: var(--active-400);
+    --solid-active-background: var(--active-600);
+    --flat-background: hsl(from var(--active-100) h s l / 80%);
+    --flat-hover-background: var(--active-50);
+    --flat-active-background: var(--active-100);
+    --outlined-hover-background: hsl(from var(--active-100) h s l / 20%);
+    --outlined-active-background: hsl(from var(--active-100) h s l / 50%);
+    --text-hover-background: hsl(from var(--active-100) h s l / 20%);
+    --text-active-background: hsl(from var(--active-100) h s l / 50%);
+    --shadow-color: hsl(from var(--active-500) h s l / 20%);
+    --focus-background: hsl(from var(--active-100) h s l / 20%);
+  }
+  &.warning {
+    --color: var(--warning-500);
+    --solid-background: var(--warning-500);
+    --solid-text: var(--warning-50);
+    --solid-hover-background: var(--warning-400);
+    --solid-active-background: var(--warning-600);
+    --flat-background: hsl(from var(--warning-100) h s l / 80%);
+    --flat-hover-background: var(--warning-50);
+    --flat-active-background: var(--warning-100);
+    --outlined-hover-background: hsl(from var(--warning-100) h s l / 20%);
+    --outlined-active-background: hsl(from var(--warning-100) h s l / 50%);
+    --text-hover-background: hsl(from var(--warning-100) h s l / 20%);
+    --text-active-background: hsl(from var(--warning-100) h s l / 50%);
+    --shadow-color: hsl(from var(--warning-500) h s l / 20%);
+    --focus-background: hsl(from var(--warning-100) h s l / 20%);
+  }
+  &.alert {
+    --color: var(--alert-500);
+    --solid-background: var(--alert-500);
+    --solid-text: var(--alert-50);
+    --solid-hover-background: var(--alert-400);
+    --solid-active-background: var(--alert-600);
+    --flat-background: hsl(from var(--alert-100) h s l / 80%);
+    --flat-hover-background: var(--alert-50);
+    --flat-active-background: var(--alert-100);
+    --outlined-hover-background: hsl(from var(--alert-100) h s l / 20%);
+    --outlined-active-background: hsl(from var(--alert-100) h s l / 50%);
+    --text-hover-background: hsl(from var(--alert-100) h s l / 20%);
+    --text-active-background: hsl(from var(--alert-100) h s l / 50%);
+    --shadow-color: hsl(from var(--alert-500) h s l / 20%);
+    --focus-background: hsl(from var(--alert-100) h s l / 20%);
+  }
+  &.info {
+    --color: var(--info-500);
+    --solid-background: var(--info-500);
+    --solid-text: var(--info-50);
+    --solid-hover-background: var(--info-400);
+    --solid-active-background: var(--info-600);
+    --flat-background: hsl(from var(--info-100) h s l / 80%);
+    --flat-hover-background: var(--info-50);
+    --flat-active-background: var(--info-100);
+    --outlined-hover-background: hsl(from var(--info-100) h s l / 20%);
+    --outlined-active-background: hsl(from var(--info-100) h s l / 50%);
+    --text-hover-background: hsl(from var(--info-100) h s l / 20%);
+    --text-active-background: hsl(from var(--info-100) h s l / 50%);
+    --shadow-color: hsl(from var(--info-500) h s l / 20%);
+    --focus-background: hsl(from var(--info-100) h s l / 20%);
+  }
+  &:disabled {
+    color: var(--neutral-200);
+    pointer-events: none;
+  }
+  &.solid:disabled {
+    background: var(--neutral-200);
+    color: var(--neutral-50);
+  }
+  &.flat:disabled {
+    background: hsl(from var(--neutral-50) h s l / 80%);
+  }
+  &.outlined:disabled,
+  &.text:disabled {
+    background: transparent;
+  }
+}
+
+/* src/components/cursor/cursor.styles.css */
+.cursor-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: none;
+  pointer-events: none;
+}
+.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(--primary-500);
+    box-sizing: border-box;
+    z-index: 99999999;
+    opacity: 0.5;
+    transition:
+      all 0.08s ease-out,
+      width 0.3s ease-in-out,
+      height 0.3s ease-in-out,
+      margin 0.3s ease-in-out,
+      opacity 0.3s ease-in-out;
+    &.cursor-hover {
+      margin-left: -40px;
+      margin-top: -40px;
+      width: 80px;
+      height: 80px;
+      background-color: var(--primary-500);
+      opacity: 0.3;
+    }
+    &.cursor-text {
+      margin-left: -2px;
+      margin-top: -40px;
+      width: 4px;
+      height: 80px;
+      background-color: var(--primary-500);
+      opacity: 0.3;
+    }
+  }
+  &.inner-circle {
+    margin-left: -3px;
+    margin-top: -3px;
+    width: 6px;
+    height: 6px;
+    z-index: 99999999;
+    background-color: var(--primary-500);
+    transition: opacity 0.3s ease-in-out;
+    opacity: 1;
+    &.cursor-hover {
+      opacity: 0;
+    }
+  }
+}
+
+/* src/components/form/checkbox/checkbox.styles.css */
+.checkbox {
+  border-radius: 40%;
+  background: var(--background-paper);
+  transition: all 300ms 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 200ms 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: 0.7em;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 300ms ease;
+  }
+}
+.checkbox-container {
+  --color: var(--neutral-800);
+  --color-icon: var(--neutral-50);
+  --color-hover: hsl(from var(--neutral-800) h s l / 50%);
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: auto 1fr;
+  align-items: center;
+  gap: 0.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 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 0.3em var(--color-hover);
+  }
+  &.color-primary {
+    --color: var(--primary-500);
+    --color-icon: var(--primary-50);
+    --color-hover: hsl(from var(--primary-500) h s l / 50%);
+  }
+  &.color-secondary {
+    --color: var(--secondary-500);
+    --color-icon: var(--secondary-50);
+    --color-hover: hsl(from var(--secondary-500) h s l / 50%);
+  }
+  &.color-tertiary {
+    --color: var(--tertiary-500);
+    --color-icon: var(--tertiary-50);
+    --color-hover: hsl(from var(--tertiary-500) h s l / 50%);
+  }
+  &.color-active {
+    --color: var(--active-500);
+    --color-icon: var(--active-50);
+    --color-hover: hsl(from var(--active-500) h s l / 50%);
+  }
+  &.color-warning {
+    --color: var(--warning-500);
+    --color-icon: var(--warning-50);
+    --color-hover: hsl(from var(--warning-500) h s l / 50%);
+  }
+  &.color-alert {
+    --color: var(--alert-500);
+    --color-icon: var(--alert-50);
+    --color-hover: hsl(from var(--alert-500) h s l / 50%);
+  }
+  &.color-info {
+    --color: var(--info-500);
+    --color-icon: var(--info-50);
+    --color-hover: hsl(from var(--info-500) h s l / 50%);
+  }
+}
+
+/* src/components/form/field/field.styles.css */
+.form-field {
+  display: grid;
+  grid-auto-columns: auto;
+  gap: 0.5em;
+  transition: all 200ms 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(--border);
+      border-radius: 4px;
+      padding: 1em;
+      background: var(--background);
+    }
+  }
+  &.variant-content-line {
+    .field-content {
+      border-bottom: 1px solid;
+      padding: 0.5em 0;
+    }
+  }
+  &.variant-full-border {
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 0.5em 0;
+    background: var(--background);
+    .field-label,
+    .field-content,
+    .field-message {
+      padding: 0 1em;
+    }
+  }
+  &.variant-inline {
+    grid-auto-flow: column;
+    padding: 0.5em 0;
+    align-items: center;
+    .field-label {
+      width: auto;
+    }
+  }
+  &.error {
+    color: var(--alert-500);
+    border-color: var(--alert-500);
+  }
+  &.focus {
+    color: var(--info-500);
+    border-color: var(--info-500);
+  }
+  &.error,
+  &.focus {
+    .field-left-icon,
+    .field-right-icon,
+    .field-children {
+      color: var(--foreground);
+      border-color: var(--foreground);
+    }
+  }
+  .field-children > * {
+    width: 100%;
+  }
+}
+
+/* src/components/modals/modal/modal.styles.css */
+.modal {
+  position: fixed;
+  z-index: 1001;
+  pointer-events: none;
+}
+.modal-content {
+  background: var(--background-paper);
+  pointer-events: initial;
+  &.animation-fade-down {
+    animation: fadeInDown 200ms ease;
+    &.modal-close {
+      animation: fadeOutUp 200ms ease;
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+  }
+  &.animation-bounce {
+    animation: bounceIn 500ms ease;
+    &.modal-close {
+      animation: bounceOut 500ms ease;
+      transform: scale3d(0.3, 0.3, 0.3);
+      opacity: 0;
+    }
+  }
+}
+.modal-backdrop {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  animation: backdropOpen 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  &.backdrop-close {
+    animation: backdropClose 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+@keyframes backdropOpen {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes backdropClose {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+/* src/components/modals/action-modal/action-modal.styles.css */
+.action-modal {
+  background: transparent;
+  .modal-content {
+    &.shake-animation {
+      animation: headShake 600ms linear;
+    }
+  }
+}
+.action-modal-content {
+  position: relative;
+  .action-modal-body {
+    box-shadow: 0 0 10px -5px;
+    border-radius: 10px;
+    overflow: hidden;
+    display: grid;
+  }
+  .action-modal-content {
+    background: var(--background);
+    padding: 3em 4em 2em;
+    display: grid;
+    gap: 1em;
+  }
+  &.no-padding .action-modal-content {
+    padding: 2em 0 0;
+  }
+  &:has(.action-modal-icon) .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(--primary-500);
+      border-radius: 10px;
+      display: block;
+      transition: top 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
+    }
+  }
+  .action-modal-icon {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--primary-500);
+    color: var(--primary-50);
+    padding: 0;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    display: grid;
+    place-content: center;
+    transition: box-shadow 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
+    z-index: 1;
+    box-shadow:
+      0 0 0 0 hsl(from var(--primary-500) h s l / 53%),
+      0 0 0 0 hsl(from var(--primary-500) h s l / 40%),
+      0 0 0 0 hsl(from var(--primary-500) h s l / 27%),
+      0 0 0 0 hsl(from var(--primary-500) h s l / 14%);
+  }
+  .close-modal-button {
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    cursor: pointer;
+    background: var(--background);
+    position: absolute;
+    top: 10px;
+    right: 5px;
+    font-size: var(--typography-size-label);
+    opacity: 0;
+    transition: opacity 300ms ease;
+    z-index: 1;
+  }
+  &.line-on-top {
+    .action-modal-content {
+      border-top: 5px solid var(--primary-500);
+    }
+  }
+  &:hover {
+    .action-modal-icon {
+      box-shadow:
+        0 0 0 7px hsl(from var(--primary-500) h s l / 53%),
+        0 0 0 14px hsl(from var(--primary-500) h s l / 40%),
+        0 0 0 21px hsl(from var(--primary-500) h s l / 27%),
+        0 0 0 28px hsl(from var(--primary-500) h s l / 14%);
+    }
+    .close-modal-button {
+      opacity: 1;
+    }
+    &::before {
+      top: 15px;
+    }
+  }
+}
+
+/* src/components/modals/aside-modal/aside-modal.styles.css */
+.aside-modal {
+  color: var(--foreground);
+  overflow: auto;
+  height: 100%;
+  .aside-modal-content {
+    padding: 2em;
+  }
+  .close-modal-button {
+    border-radius: 50%;
+    cursor: pointer;
+    display: grid;
+    place-content: center;
+    background: var(--background);
+    border: 4px solid var(--primary-500);
+    position: absolute;
+    padding: 0.5em;
+  }
+  &.left {
+    border-right: 4px solid var(--primary-500);
+    animation: slideIn-left 300ms ease;
+    &.modal-close {
+      animation: slideOut-left 300ms ease;
+      transform: translateX(-100%);
+    }
+    .close-modal-button {
+      top: 2em;
+      left: 100%;
+      transform: translate(calc(-50% + 2px));
+    }
+  }
+  &.right {
+    border-left: 4px solid var(--primary-500);
+    animation: slideIn-right 300ms ease;
+    &.modal-close {
+      animation: slideOut-right 300ms ease;
+      transform: translateX(100%);
+    }
+    .close-modal-button {
+      top: 2em;
+      right: 100%;
+      transform: translate(calc(50% - 2px));
+    }
+  }
+  &.top {
+    border-bottom: 4px solid var(--primary-500);
+    animation: slideIn-top 300ms ease;
+    &.modal-close {
+      animation: slideOut-top 300ms ease;
+      transform: translateY(-100%);
+    }
+    .close-modal-button {
+      bottom: 0;
+      right: 2em;
+      transform: translate(0, calc(50% - 2px));
+    }
+  }
+  &.bottom {
+    border-top: 4px solid var(--primary-500);
+    animation: slideIn-bottom 300ms ease;
+    &.modal-close {
+      animation: slideOut-bottom 300ms ease;
+      transform: translateY(100%);
+    }
+    .close-modal-button {
+      top: 0;
+      right: 2em;
+      transform: translate(0, calc(-50% + 2px));
+    }
+  }
+}
+
+/* src/components/modals/confirmation-modal/confirmation-modal.styles.css */
+.confirmation-modal {
+  display: grid;
+  max-width: 450px;
+  gap: 1em;
+  place-content: center;
+  justify-items: center;
+  text-align: center;
+  .confirmation-modal-actions {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: center;
+    gap: 1em;
+  }
+}
+
+/* src/components/modals/menu/menu.styles.css */
+.menu-modal {
+  border-radius: 0.5em;
+  border: 1px solid var(--border);
+  background: var(--background);
+  box-shadow: 0 0 25px var(--background-paper);
+  user-select: none;
+  position: relative;
+  overflow-y: auto;
+  .menu-content {
+    display: grid;
+    gap: 0.2em;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    align-content: start;
+    height: 100%;
+    position: relative;
+    overflow-y: auto;
+  }
+  .divider {
+    margin: 0.4em 0;
+    color: var(--border);
+  }
+}
+.menu-label {
+  background: var(--background);
+  color: var(--foreground);
+  font-weight: lighter;
+  padding: 0.5em 1.2em;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  pointer-events: none;
+}
+.menu-option {
+  padding: 0.2em 1em;
+  border-radius: 0.3em;
+  transition: all 300ms ease;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  outline: 0;
+  margin: 0 0.2em;
+  position: relative;
+  .ripple-effect {
+    background: hsl(from var(--foreground) h s l / 31%);
+  }
+  &:first-child {
+    margin-top: 5px;
+  }
+  .option-icon {
+    margin-right: 0.5em;
+  }
+  .menu-checkbox {
+    width: 100%;
+  }
+  &.is-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: default;
+  }
+  &:focus,
+  &:hover {
+    background: hsl(from var(--background-paper) h s l / 25%);
+  }
+  &.is-selected {
+    background: var(--background-paper);
+    &:focus,
+    &:hover {
+      background: hsl(from var(--background-paper) h s l / 75%);
+    }
+  }
+}
+.menu-group {
+  position: relative;
+  .menu-group-content {
+    display: grid;
+    gap: 0.2em;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    align-content: start;
+    position: relative;
+  }
+}
+
+/* src/components/form/input-color/input-color.styles.css */
+.input-color {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: start;
+  gap: 0.5em;
+  .input-color-value {
+    margin-left: 10px;
+  }
+  .color-input {
+    padding-right: 1em;
+    border-radius: inherit;
+    width: 100%;
+    font-size: var(--typography-size-label);
+    font-family: var(--typography-family-main) sans-serif;
+  }
+}
+.input-color-box {
+  background: white;
+  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(#cccccc 0% 25%, white 0% 50%) 50% / 8px 8px;
+    z-index: -1;
+  }
+}
+.input-color-selector {
+  display: grid;
+  gap: 10px;
+  background: var(--background);
+  color: var(--foreground);
+  padding: 10px;
+  border-radius: 0 18px 18px 18px;
+  border: 1px solid;
+  box-shadow: 0 5px 30px -5px var(--neutral-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: 0.5em;
+    width: 100%;
+    max-width: 200px;
+  }
+  .color-input {
+    padding: 0;
+    border-radius: inherit;
+    background: var(--background);
+    color: var(--foreground);
+    width: 100%;
+    font-size: var(--typography-size-label);
+    font-family: var(--typography-family-main) sans-serif;
+    letter-spacing: 2px;
+    text-align: center;
+  }
+}
+
+/* src/layouts/grid/grid.styles.css */
+.grida {
+  display: grid;
+}
+
+/* src/components/form/input-file/input-file.styles.css */
+.input-file-container {
+  display: grid;
+  gap: 10px;
+  .input-file--box {
+    border: 1px solid;
+    border-radius: 5px;
+    position: relative;
+    transition: all 0.3s ease;
+    display: grid;
+    grid-template-columns: 32px 1fr;
+    padding: 10px;
+    gap: 10px;
+    background: var(--secondary-500);
+    color: var(--secondary-50);
+    align-items: center;
+    .input-file--box--icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 5px;
+      background: var(--primary-50);
+      color: var(--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(--primary-50);
+      color: var(--primary-500);
+      .input-file--box--icon {
+        background: var(--primary-500);
+        color: var(--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: 0.5em;
+    .total-info--delete {
+      display: grid;
+      place-content: center;
+      height: 100%;
+      background: transparent;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      aspect-ratio: 1 / 1;
+      border-radius: 50%;
+      width: 2em;
+      font-size: 0.8em;
+      &:hover {
+        background: var(--primary-500);
+        color: var(--primary-50);
+      }
+    }
+  }
+}
+.input-file-card {
+  display: grid;
+  grid-template-columns: 35px 1fr 35px;
+  gap: 1em;
+  align-items: center;
+  padding: 10px;
+  background: var(--background);
+  &:not(:last-child) {
+    border-bottom: 1px dashed;
+  }
+  &:hover {
+    .file-card--delete {
+      color: var(--primary-500);
+    }
+  }
+  .file-card--image {
+    background: var(--primary-500);
+    color: var(--primary-50);
+    width: 32px;
+    height: 32px;
+    border-radius: 5px;
+    display: grid;
+    place-content: center;
+    border: 1px solid;
+  }
+  .file-card--data {
+    display: grid;
+    font-size: 0.7em;
+    justify-content: start;
+  }
+  .file-card--delete {
+    border-radius: 5px;
+    display: grid;
+    place-content: center;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    &:hover {
+      background: var(--primary-500);
+      color: var(--primary-50);
+    }
+  }
+}
+
+/* src/components/form/radio/radio.styles.css */
+.radio {
+  border-radius: 50%;
+  background: var(--background-paper);
+  transition: all 300ms ease;
+  width: 1em;
+  height: 1em;
+  outline: 2px solid;
+  display: flex;
+  position: relative;
+  padding: 2px;
+  .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;
+  }
+}
+.radio-fill {
+  transition: all 200ms ease-out;
+  border-radius: inherit;
+  margin: auto;
+  width: 0;
+  height: 0;
+}
+.radio-container {
+  --color: var(--neutral-800);
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  width: fit-content;
+  .radio-label {
+    cursor: pointer;
+    user-select: none;
+  }
+  .radio {
+    color: var(--color);
+    &.is-checked {
+      .radio-fill {
+        width: 100%;
+        height: 100%;
+        background: var(--color);
+      }
+    }
+  }
+  .radio:hover,
+  &:has(.radio-label:hover) .radio {
+    box-shadow: 0 0 0 0.4em hsl(from var(--color) h s l / 50%);
+    .radio-fill {
+      width: 20%;
+      height: 20%;
+      background: hsl(from var(--color) h s l / 50%);
+    }
+    &:is(.is-checked) {
+      .radio-fill {
+        width: 80%;
+        height: 80%;
+        background: var(--color);
+      }
+    }
+  }
+  &.color-primary {
+    --color: var(--primary-500);
+  }
+  &.color-secondary {
+    --color: var(--secondary-500);
+  }
+  &.color-tertiary {
+    --color: var(--tertiary-500);
+  }
+  &.color-active {
+    --color: var(--active-500);
+  }
+  &.color-warning {
+    --color: var(--warning-500);
+  }
+  &.color-alert {
+    --color: var(--alert-500);
+  }
+  &.color-info {
+    --color: var(--info-500);
+  }
+}
+
+/* src/components/infinity-scroll/infinity-scroll.styles.css */
+.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 0.5s linear infinite;
+      font-size: 20px;
+    }
+  }
+  .empty-message {
+    font-size: 0.8em;
+    text-align: center;
+    color: #a6a6a6;
+  }
+}
+
+/* src/components/form/select/select.styles.css */
+.select {
+  cursor: pointer;
+  .icon-close {
+    display: grid;
+    place-content: center;
+    align-self: center;
+    border-radius: 100%;
+    cursor: pointer;
+    font-size: 0.6em;
+    padding: 0.5em;
+    &:hover {
+      background: hsl(from var(--foreground) h s l / 33%);
+    }
+  }
+  .select-container {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0.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 200ms 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: 0.2em;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    align-content: start;
+  }
+}
+.select-options-header {
+  background: var(--background);
+  padding: 2px 5px;
+  border-bottom: 1px solid var(--border);
+  .input-search {
+    outline: none;
+    padding: 0.8em 5px;
+    font-size: var(--typography-size-label);
+    width: 100%;
+  }
+}
+
+/* src/components/form/slider/slider.styles.css */
+.input-slider {
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  align-items: center;
+  gap: 10px;
+  .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(--primary-500);
+      box-shadow: 0 0 0 0 var(--neutral-500);
+      margin-top: -8px;
+      transition: all 300ms ease;
+      cursor: pointer;
+    }
+    &::-webkit-slider-runnable-track {
+      height: 4px;
+      border-radius: 1em;
+      background: hsl(from var(--primary-200) h s l / 50%);
+      transition: all 300ms ease;
+    }
+    &:focus,
+    &:hover {
+      &::-webkit-slider-thumb {
+        background: var(--primary-500);
+        box-shadow: 0 0 0 6px hsl(from var(--primary-500) h s l / 50%);
+        cursor: grab;
+      }
+    }
+    &:active {
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 12px hsl(from var(--primary-500) h s l / 31%);
+        cursor: grabbing;
+      }
+    }
+    &:focus {
+      &::-webkit-slider-runnable-track {
+        background: var(--primary-300);
+      }
+    }
+  }
+  &:has(.slider-number:focus) .slider::-webkit-slider-thumb,
+  &:has(.slider-number:hover) .slider::-webkit-slider-thumb {
+    background: var(--primary-500);
+    box-shadow: 0 0 0 6px hsl(from var(--primary-500) h s l / 31%);
+  }
+  .slider-number {
+    transition: all 300ms ease;
+    border: 1px solid;
+    border-radius: 5px;
+    text-align: center;
+    font-size: var(--typography-size-label);
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 100%;
+    padding: 4px 8px;
+    font-weight: bold;
+    color: inherit;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+  &.is-focus {
+    .slider-number {
+      color: var(--primary-500);
+    }
+  }
+}
+
+/* src/components/form/textarea/textarea.styles.css */
+.textarea {
+  border: 0;
+  outline: 0;
+  field-sizing: content;
+}
+
+/* src/components/tooltips/tooltip/tooltip.styles.css */
+.tooltip {
+  color: var(--foreground);
+  font-size: var(--typography-size-small);
+  line-height: 1em;
+  border-radius: 5px;
+  padding: 0.5em 1em;
+  display: block;
+  border: 1px solid;
+  pointer-events: none;
+  &::before {
+    content: "";
+    display: block;
+    background: var(--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(--foreground);
+    border-bottom: 1px solid var(--foreground);
+    border-radius: 0 0 3px 0;
+  }
+  &.left {
+    animation: fadeInRight 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutLeft 250ms ease-out;
+      transform: translateX(-10px);
+      opacity: 0;
+    }
+    &::before {
+      top: 50%;
+      left: 100%;
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+  }
+  &.right {
+    animation: fadeInLeft 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutRight 250ms ease-out;
+      transform: translateX(10px);
+      opacity: 0;
+    }
+    &::before {
+      top: 50%;
+      right: 100%;
+      transform: translate(50%, -50%) rotate(135deg);
+    }
+  }
+  &.top {
+    animation: fadeInDown 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutUp 250ms ease-out;
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+    &::before {
+      top: 100%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+  }
+  &.bottom {
+    animation: fadeInUp 250ms ease-out;
+    &.close-animation {
+      animation: fadeOutDown 250ms ease-out;
+      transform: translateY(10px);
+      opacity: 0;
+    }
+    &::before {
+      left: 50%;
+      bottom: 100%;
+      transform: translate(-50%, 50%) rotate(-135deg);
+    }
+  }
+}
+
+/* src/components/form/switch/switch.styles.css */
+.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(--neutral-500);
+  --color-dark: var(--neutral-800);
+  --color-contrast: var(--neutral-50);
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  width: fit-content;
+  .switch {
+    width: calc(var(--width) + var(--padding) * 2);
+    border-radius: 100em;
+    background: var(--background-paper);
+    padding: var(--padding);
+    transition: all 300ms ease;
+    position: relative;
+    .switch-dot {
+      width: var(--dot-size);
+      height: var(--dot-size);
+      border-radius: 100em;
+      background: var(--color);
+      display: block;
+      transition: all 300ms ease;
+      margin-left: 0;
+      position: relative;
+      z-index: 1;
+    }
+    .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 300ms ease;
+    }
+    .switch-internal-left-icon {
+      left: var(--padding);
+    }
+    .switch-internal-right-icon {
+      right: var(--padding);
+    }
+    &.is-checked {
+      background: var(--color);
+      .switch-dot {
+        margin-left: calc(var(--width) - var(--dot-size));
+        background: color-mix(in hsl, var(--color), var(--color-contrast) 75%);
+      }
+    }
+    &:not(.is-readonly):has(input:disabled) {
+      background: var(--background-disabled);
+      .switch-dot {
+        background: var(--foreground-disabled);
+      }
+      .switch-internal-left-icon,
+      .switch-internal-right-icon {
+        color: var(--foreground-disabled);
+      }
+      &.is-checked {
+        background: var(--color-dark);
+      }
+    }
+    .switch-checkbox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      opacity: 0;
+      z-index: 3;
+    }
+  }
+  .switch-label {
+    cursor: pointer;
+    user-select: none;
+    padding: 0 0.5em;
+  }
+  .switch:not(:has(.is-readonly, input:disabled)):hover .switch-dot,
+  &:has(.switch-icon:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
+  &:has(.switch-label:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
+    box-shadow: 0 0 0 calc(0.3 * var(--dot-size)) color-mix(in hsl, var(--color) 50%, var(--color-contrast));
+  }
+  .switch:not(:has(.is-readonly, input:disabled)):active .switch-dot,
+  &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
+  &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
+    width: var(--dot-hover-size);
+  }
+  .switch:not(:has(.is-readonly, input:disabled)).is-checked:active .switch-dot,
+  &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot,
+  &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot {
+    margin-left: calc(var(--width) - var(--dot-hover-size));
+  }
+  &.color-primary {
+    --color: var(--primary-500);
+    --color-dark: var(--primary-700);
+    --color-contrast: var(--primary-50);
+  }
+  &.color-secondary {
+    --color: var(--secondary-500);
+    --color-dark: var(--secondary-700);
+    --color-contrast: var(--secondary-50);
+  }
+  &.color-tertiary {
+    --color: var(--tertiary-500);
+    --color-dark: var(--tertiary-700);
+    --color-contrast: var(--tertiary-50);
+  }
+  &.color-active {
+    --color: var(--active-500);
+    --color-dark: var(--active-700);
+    --color-contrast: var(--active-50);
+  }
+  &.color-warning {
+    --color: var(--warning-500);
+    --color-dark: var(--warning-700);
+    --color-contrast: var(--warning-50);
+  }
+  &.color-alert {
+    --color: var(--alert-500);
+    --color-dark: var(--alert-700);
+    --color-contrast: var(--alert-50);
+  }
+  &.color-info {
+    --color: var(--info-500);
+    --color-dark: var(--info-700);
+    --color-contrast: var(--info-50);
+  }
+}
+
+/* src/components/smart-table/smart-table.styles.css */
+.smart-table-container {
+  border: 0 solid var(--primary-500);
+  border-radius: 5px;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+}
+.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 0 rgba(0, 0, 0, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    tr {
+      background: var(--primary-500);
+      color: var(--primary-50);
+      transition: all 300ms ease;
+    }
+  }
+  tbody {
+    tr {
+      box-shadow: inset 0 0 0 0 var(--primary-500);
+      transition: box-shadow 300ms ease;
+      &.row-selected,
+      &:hover {
+        background: var(--background-paper);
+      }
+      &.row-selected {
+        box-shadow: inset 10px 0 0 -5px var(--primary-500);
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--border);
+      }
+    }
+  }
+  th {
+    padding: 0.8em 1.2em;
+    user-select: none;
+    &.sort-on-click {
+      cursor: pointer;
+    }
+    .sort-icon {
+      width: 1em;
+      display: block;
+    }
+    svg {
+      animation: fadeIn 300ms ease;
+    }
+    path {
+      transition: all 300ms ease;
+    }
+    &:first-child {
+      padding-left: 2em;
+    }
+    &:last-child {
+      padding-right: 2em;
+    }
+  }
+  td {
+    transition: all 300ms ease;
+    padding: 0.6em 1em;
+    &:first-child {
+      padding-left: 2em;
+    }
+    &:last-child {
+      padding-right: 2em;
+    }
+  }
+}
+
+/* src/components/tabs/tabs.styles.css */
+.tab {
+  cursor: pointer;
+  user-select: none;
+  transition: all 300ms ease;
+}
+.tab-list {
+  --color: var(--neutral-900);
+  --color-contrast: var(--neutral-50);
+  --inner-radius: 0;
+  --outer-radius: 0;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 1em;
+  align-items: center;
+  position: relative;
+  font-size: var(--typography-size-label);
+  border-radius: var(--outer-radius);
+  .tab,
+  .tabs-selector {
+    border-radius: var(--inner-radius);
+  }
+  &.size-small {
+    font-size: var(--typography-size-small);
+  }
+  &.size-medium {
+    font-size: var(--typography-size-label);
+  }
+  &.size-large {
+    font-size: var(--typography-size-body);
+  }
+  .tabs-selector {
+    position: absolute;
+    background: var(--color);
+    color: var(--color-contrast);
+    border-radius: 1.5em;
+    &.active {
+      transition: all 300ms ease;
+    }
+  }
+  .tab {
+    border-radius: 1.5em;
+    padding: 0.5em 1em;
+    z-index: 1;
+    text-align: center;
+    &.is-open {
+      color: var(--color-contrast);
+    }
+    &:not(.is-open):hover {
+      color: var(--neutral-900);
+    }
+  }
+  &.radius-none {
+    --outer-radius: 0;
+    --inner-radius: 0;
+  }
+  &.radius-small {
+    --outer-radius: 0.5em;
+    --inner-radius: 0.5em;
+  }
+  &.radius-medium {
+    --outer-radius: 1em;
+    --inner-radius: 0.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(--background-paper);
+    color: var(--foreground);
+    padding: 0.5em;
+  }
+  &.variant-ghost {
+    border: 1px solid var(--color);
+    padding: 0.5em;
+  }
+  &.variant-flat {
+  }
+  &.variant-line {
+    border-radius: 0;
+    &:not(.vertical-direction) {
+      border-bottom: 2px solid var(--border);
+    }
+    .tabs-selector {
+      border-radius: 0;
+    }
+    .tab {
+      border-radius: 0;
+      &.is-open {
+        color: var(--color);
+      }
+    }
+  }
+  &.color-primary {
+    --color: var(--primary-500);
+    --color-contrast: var(--primary-50);
+  }
+  &.color-secondary {
+    --color: var(--secondary-500);
+    --color-contrast: var(--secondary-50);
+  }
+  &.color-tertiary {
+    --color: var(--tertiary-500);
+    --color-contrast: var(--tertiary-50);
+  }
+  &.color-active {
+    --color: var(--active-500);
+    --color-contrast: var(--active-50);
+  }
+  &.color-warning {
+    --color: var(--warning-500);
+    --color-contrast: var(--warning-50);
+  }
+  &.color-alert {
+    --color: var(--alert-500);
+    --color-contrast: var(--alert-50);
+  }
+  &.color-info {
+    --color: var(--info-500);
+    --color-contrast: var(--info-50);
+  }
+}
+
+/* src/components/tag/tag.styles.css */
+.tag {
+  --background: attr(data-background, var(--primary-500));
+  --text: attr(data-text, var(--primary-50));
+  --background-selected: attr(data-background-selected, var(--primary-700));
+  --text-selected: attr(data-text-selected, var(--primary-50));
+  padding: 0.4em 0.8em;
+  border-radius: 0.3em;
+  border: 1px solid;
+  background: var(--background);
+  color: var(--text);
+  transition: all 300ms ease;
+  display: inline-block;
+  font-size: var(--typography-size-label);
+  user-select: none;
+  &.no-wrap {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &.rounded-none {
+    border-radius: 0;
+  }
+  &.rounded-small {
+    border-radius: 0.25em;
+  }
+  &.rounded-medium {
+    border-radius: 0.5em;
+  }
+  &.rounded-large {
+    border-radius: 1em;
+  }
+  &.rounded-full {
+    border-radius: 100rem;
+  }
+  &:hover,
+  &.is-selected {
+    background: var(--background-selected);
+    color: var(--text-selected);
+  }
+}
 /*# sourceMappingURL=components.css.map */