:root{--btn-trn-sp:0.3s;--btn-trn-tf:ease;}.lt-bg{.btn.v1{--btn-bg:var(--buttons);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);}&.alt{--btn-bg:var(--buttons);--btn-clr:var(--btn-txt-clr-lt);&::before{border-color:var(--btn-bg);background-color:transparent;}}}.ulk-bg,.alt-bg{.btn.v1{--btn-clr:var(--btn-txt-clr-dk);&.alt{--btn-clr:var(--btn-txt-clr-dk);}}[popover].pop .lt-bg .btn.v1{--btn-clr:var(--text);}}}.dk-bg{.btn.v1{--btn-bg:var(--buttons);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);}&.alt{--btn-bg:var(--buttons);--btn-clr:var(--btn-txt-clr-dk);&::before{border-color:var(--btn-bg);background-color:transparent;}}}.ulk-bg,.alt-bg{.btn.v1{--btn-clr:var(--btn-txt-clr-dk);&.alt{--btn-clr:var(--btn-txt-clr-lt);}}}}@media(hover: hover) and (pointer: fine){.lt-bg{&:is(a:hover,a:focus-visible) .btn.v1,a:is(:hover,:focus-visible) .btn.v1,.btn.v1:is(:hover,:focus-visible){--btn-bg:var(--main-bg-alt);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);}&.alt{--btn-bg:var(--buttons);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);border-color:var(--btn-bg);}}}.ulk-bg,.alt-bg{&:is(a:hover,a:focus-visible) .btn.v1,a:is(:hover,:focus-visible) .btn.v1,.btn.v1:is(:hover,:focus-visible){--btn-bg:var(--main-bg);--btn-clr:var(--text);&::before{background-color:var(--btn-bg);}&.alt{--btn-bg:var(--buttons);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);border-color:var(--btn-bg);}}}[popover].pop .lt-bg{&:is(a:hover,a:focus-visible) .btn.v1,a:is(:hover,:focus-visible) .btn.v1,.btn.v1:is(:hover,:focus-visible){--btn-bg:var(--main-bg-alt);--btn-clr:var(--text-alt);background-color:var(--btn-bg);}}}}.dk-bg{&:is(a:hover,a:focus-visible) .btn.v1,a:is(:hover,:focus-visible) .btn.v1,.btn.v1:is(:hover,:focus-visible){--btn-bg:var(--main-bg);--btn-clr:var(--text);&::before{background-color:var(--btn-bg);}&.alt{--btn-bg:var(--buttons);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);border-color:var(--btn-bg);}}}.ulk-bg,.alt-bg{&:is(a:hover,a:focus-visible) .btn.v1,a:is(:hover,:focus-visible) .btn.v1,.btn.v1:is(:hover,:focus-visible){--btn-bg:var(--main-bg-alt);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);}&.alt{--btn-bg:var(--buttons);--btn-clr:var(--text-alt);&::before{background-color:var(--btn-bg);border-color:var(--btn-bg);}}}}}}.btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;column-gap:0.5em;text-align:center;&.v1{--btn-v1-pd-t:.944rem;--btn-v1-pd-b:.944rem;--btn-v1-pd-l:1.556rem;--btn-v1-pd-r:1.556rem;--btn-v1-pd:var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l);--btn-v1-bdr-w:2px;--btn-v1-bdr-stl:solid;--btn-v1-bdr-rds-tl:0rem;--btn-v1-bdr-rds-tr:0rem;--btn-v1-bdr-rds-br:0rem;--btn-v1-bdr-rds-bl:0rem;--btn-v1-bdr-rds:var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl);--btn-v1-bx-sdw-x:0rem;--btn-v1-bx-sdw-y:0rem;--btn-v1-bx-sdw-blr:1rem;--btn-v1-bx-sdw-o:0;color:var(--btn-clr);padding:var(--btn-v1-pd);border-radius:var(--btn-v1-bdr-rds);box-shadow:var(--btn-v1-bx-sdw-x) var(--btn-v1-bx-sdw-y) var(--btn-v1-bx-sdw-blr) hsl(from var(--black) h s l / var(--btn-v1-bx-sdw-o));transition:background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, border-color var(--btn-trn-sp) var(--btn-trn-tf) 0s;&::before{position:absolute;top:0px;left:0px;width:100%;height:100%;transform:skew(-15deg);content:"";z-index:-1;transition:background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, border-color var(--btn-trn-sp) var(--btn-trn-tf) 0s;}&.alt{--btn-bg:var(--buttons);&::before{border-color:var(--btn-bg);border-width:var(--btn-v1-bdr-w);border-style:var(--btn-v1-bdr-stl);}}&.sml{--btn-v1-pd-v-mtp:0.5;--btn-v1-pd-h-mtp:0.5;--btn-v1-pd:calc(var(--btn-v1-pd-t) * var(--btn-v1-pd-v-mtp)) calc(var(--btn-v1-pd-r) * var(--btn-v1-pd-h-mtp)) calc(var(--btn-v1-pd-b) * var(--btn-v1-pd-v-mtp)) calc(var(--btn-v1-pd-l) * var(--btn-v1-pd-h-mtp));}}&.v2{--btn-v2-pd-t:0.6rem;--btn-v2-pd-b:0.6rem;--btn-v2-pd-l:0.7rem;--btn-v2-pd-r:0.7rem;--btn-v2-pd:var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l);color:inherit;padding:var(--btn-v2-pd);&::before,&::after{content:'';position:absolute;width:0;height:0;left:0;border-style:solid;transform-origin:bottom center;}&::before{bottom:0;width:100%;border-width:0 0 1px 1px;transition:height 0.2s linear 0.4s;}&::after{top:0;opacity:0;border-width:1px 1px 0 0;transition:width 0.2s linear 0.2s, height 0.2s linear, opacity 0s linear 0.4s;}}}@media(hover: hover) and (pointer: fine){&:is(a:hover,a:focus-visible) .btn.v2,a:is(:hover,:focus-visible) .btn.v2,.btn.v2:is(:hover,:focus-visible){&::before,&::after{height:100%;}&::before{transition:height 0.2s linear;}&::after{width:100%;opacity:1;transition:width 0.2s linear 0.2s, height 0.2s linear 0.4s, opacity 0s linear 0.2s;}}}