@qrsln/lootstrap 21.12.1-beta.0 → 21.12.15-beta.0

package/dist/css/lootstrap.css

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 /*!
- * CSS Compiled on: 2021-12-01
+ * CSS Compiled on: 2021-12-15
  *
- * Lootstrap v21.12.1-beta.0 (https://github.com/krsln/Lootstrap/)
+ * Lootstrap v21.12.15-beta.0 (https://github.com/krsln/Lootstrap/)
  * Copyright 2021 Qrsln.
  * Licensed under MIT (https://github.com/krsln/Lootstrap/blob/master/LICENSE)
 */
@@ -5532,7 +5532,7 @@
 .Alert.Alert-outline {
   color: var(--ls-alert-fg-lightest,var(--ls-fg-lightest));
   background-color: var(--ls-alert-bg-lightest,var(--ls-bg-lightest));
-  border: .125rem solid var(--ls-alert-bg-darkest,var(--ls-bg-darkest))
+  border: 1px solid var(--ls-alert-bg-darkest,var(--ls-bg-darkest))
 }
 .Alert .Alert-icon {
   display: flex;
@@ -5706,13 +5706,53 @@
 .Btn-close-pure:after {
   transform: translate(-50%,-50%) rotate(-45deg)
 }
+.Btn-group,
+.Btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle
+}
+.Btn-group > .Btn,
+.Btn-group-vertical > .Btn {
+  position: relative;
+  flex: 1 1 auto
+}
+.Btn-group > .Btn-check:checked + .Btn,
+.Btn-group > .Btn-check:focus + .Btn,
+.Btn-group > .Btn.active,
+.Btn-group > .Btn:active,
+.Btn-group > .Btn:focus,
+.Btn-group > .Btn:hover,
+.Btn-group-vertical > .Btn-check:checked + .Btn,
+.Btn-group-vertical > .Btn-check:focus + .Btn,
+.Btn-group-vertical > .Btn.active,
+.Btn-group-vertical > .Btn:active,
+.Btn-group-vertical > .Btn:focus,
+.Btn-group-vertical > .Btn:hover {
+  z-index: 1
+}
+.Btn-group > .Btn-group:not(:first-child),
+.Btn-group > .Btn:not(:first-child) {
+  margin-left: -1px
+}
+.Btn-group > .Btn-group:not(:last-child) > .Btn,
+.Btn-group > .Btn:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0
+}
+.Btn-group > .Btn-group:not(:first-child) > .Btn,
+.Btn-group > .Btn:nth-child(n+3),
+.Btn-group > :not(.Btn-check) + .Btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0
+}
 .Btn {
   position: relative;
   display: inline-block;
   font-family: var(--ls-font);
   font-size: var(--ls-font-size);
   font-weight: var(--ls-font-weight);
-  color: var(--ls-fg-light);
+  color: var(--ls-btn-fg-light,var(--ls-fg-light));
   background-color: transparent;
   border: 1px solid transparent;
   text-align: center;
@@ -5730,10 +5770,10 @@
 .Btn:focus,
 .Btn:hover {
   outline: 0!important;
-  box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06)
+  box-shadow: 0 1px 1px -1px rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.18),0 2px 2px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.12),0 4px 6px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.06)
 }
 .Btn:checked {
-  box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06),0 0 1px 0 rgba(var(--ls-shadow-color),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color),.06) inset
+  box-shadow: 0 1px 1px -1px rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.18),0 2px 2px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.12),0 4px 6px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.06),0 0 1px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.18) inset,0 0 2px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.12) inset,0 0 6px 0 rgba(var(--ls-btn-shadow-color,var(--ls-shadow-color)),.06) inset
 }
 .Btn-link {
   background: 0 0;
@@ -5749,6 +5789,39 @@
 .Btn-round:before {
   border-radius: 50rem!important
 }
+.Btn[class*=Btn-]:not([class*=Btn-outline-]) {
+  color: var(--ls-btn-fg-darkest,var(--ls-fg-darkest));
+  background: var(--ls-btn-bg-darkest,var(--ls-bg-darkest));
+  border-color: var(--ls-btn-border-color,var(--ls-border-color))
+}
+.Btn[class*=Btn-]:not([class*=Btn-outline-]):focus,
+.Btn[class*=Btn-]:not([class*=Btn-outline-]):hover {
+  color: var(--ls-btn-fg-dark,var(--ls-fg-dark));
+  background-color: var(--ls-btn-bg-dark,var(--ls-bg-dark));
+  border-color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest))
+}
+.Btn[class*=Btn-]:not([class*=Btn-outline-]).Border-fx-center,
+.Btn[class*=Btn-]:not([class*=Btn-outline-]).Border-fx-draw,
+.Btn[class*=Btn-]:not([class*=Btn-outline-]).Border-fx-meet,
+.Btn[class*=Btn-]:not([class*=Btn-outline-]).Ripple {
+  --ls-effect-color: var(--ls-btn-fg-dark, var(--ls-fg-dark))
+}
+.Btn[class*=Btn-outline-] {
+  color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest));
+  background-color: inherit;
+  border-color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest))
+}
+.Btn[class*=Btn-outline-]:hover {
+  color: var(--ls-btn-fg-dark,var(--ls-fg-dark));
+  background-color: var(--ls-btn-bg-dark,var(--ls-bg-dark));
+  border-color: var(--ls-btn-bg-darkest,var(--ls-bg-darkest))
+}
+.Btn[class*=Btn-outline-].Border-fx-center,
+.Btn[class*=Btn-outline-].Border-fx-draw,
+.Btn[class*=Btn-outline-].Border-fx-meet,
+.Btn[class*=Btn-outline-].Ripple {
+  --ls-effect-color: var(--ls-btn-fg-dark, var(--ls-fg-dark))
+}
 .Ripple {
   position: relative;
   overflow: hidden;
@@ -5763,7 +5836,7 @@
   top: 0;
   left: 0;
   pointer-events: none;
-  background-image: radial-gradient(circle,var(--ls-effect-color,var(--ls-fg-active)) 10%,transparent 10.01%);
+  background-image: radial-gradient(circle,var(--ls-effect-color,var(--ls-btn-fg-active,var(--ls-fg-active))) 10%,transparent 10.01%);
   background-repeat: no-repeat;
   background-position: 50%;
   transform: scale(10,10);
@@ -5803,14 +5876,14 @@
   height: 100%
 }
 .Border-fx-draw:hover:before {
-  border-top-color: var(--ls-effect-color,var(--ls-border-color));
-  border-right-color: var(--ls-effect-color,var(--ls-border-color));
-  transition: width .25s ease-out,height .25s ease-out .25s
+  border-top-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
+  border-right-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
+  transition: width .1s ease-out,height .1s ease-out .1s
 }
 .Border-fx-draw:hover:after {
-  border-bottom-color: var(--ls-effect-color,var(--ls-border-color));
-  border-left-color: var(--ls-effect-color,var(--ls-border-color));
-  transition: border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s
+  border-bottom-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
+  border-left-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
+  transition: border-color 0s ease-out .2s,width .1s ease-out .2s,height .1s ease-out .3s
 }
 .Border-fx-meet {
   position: relative;
@@ -5838,7 +5911,7 @@
 }
 .Border-fx-meet:hover:after,
 .Border-fx-meet:hover:before {
-  border-color: var(--ls-effect-color,var(--ls-border-color));
+  border-color: var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
   transition: border-color 0s,width .25s,height .25s;
   width: 100%;
   height: 100%
@@ -5867,13 +5940,13 @@
   transform-origin: center
 }
 .Border-fx-center:before {
-  border-top: 2px solid var(--ls-effect-color,var(--ls-border-color));
-  border-bottom: 2px solid var(--ls-effect-color,var(--ls-border-color));
+  border-top: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
+  border-bottom: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
   transform: scale3d(0,1,1)
 }
 .Border-fx-center:after {
-  border-left: 2px solid var(--ls-effect-color,var(--ls-border-color));
-  border-right: 2px solid var(--ls-effect-color,var(--ls-border-color));
+  border-left: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
+  border-right: 2px solid var(--ls-effect-color,var(--ls-btn-border-color,var(--ls-border-color)));
   transform: scale3d(1,0,1)
 }
 .Border-fx-center:hover:after,
@@ -5881,286 +5954,6 @@
   transform: scale3d(1,1,1);
   transition: transform .5s
 }
-.Btn-primary {
-  color: #fff;
-  background-color: #4712af;
-  border-color: #5015c6
-}
-.Btn-primary:focus,
-.Btn-primary:hover {
-  border-color: #3d1098!important;
-  background: #3d1098!important
-}
-.Btn-primary.Border-fx-center,
-.Btn-primary.Border-fx-draw,
-.Btn-primary.Border-fx-meet,
-.Btn-primary.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-primary {
-  color: #4712af;
-  border-color: #5015c6
-}
-.Btn-outline-primary:hover {
-  color: #fff;
-  background-color: #4712af;
-  border-color: #3d1098
-}
-.Btn-outline-primary.Border-fx-center,
-.Btn-outline-primary.Border-fx-draw,
-.Btn-outline-primary.Border-fx-meet,
-.Btn-outline-primary.Ripple {
-  --ls-effect-color: white
-}
-.Btn-secondary {
-  color: #fff;
-  background-color: #6d767e;
-  border-color: #79838b
-}
-.Btn-secondary:focus,
-.Btn-secondary:hover {
-  border-color: #616970!important;
-  background: #616970!important
-}
-.Btn-secondary.Border-fx-center,
-.Btn-secondary.Border-fx-draw,
-.Btn-secondary.Border-fx-meet,
-.Btn-secondary.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-secondary {
-  color: #6d767e;
-  border-color: #79838b
-}
-.Btn-outline-secondary:hover {
-  color: #fff;
-  background-color: #6d767e;
-  border-color: #616970
-}
-.Btn-outline-secondary.Border-fx-center,
-.Btn-outline-secondary.Border-fx-draw,
-.Btn-outline-secondary.Border-fx-meet,
-.Btn-outline-secondary.Ripple {
-  --ls-effect-color: white
-}
-.Btn-success {
-  color: #fff;
-  background-color: #29a847;
-  border-color: #2ebd4f
-}
-.Btn-success:focus,
-.Btn-success:hover {
-  border-color: #24943e!important;
-  background: #24943e!important
-}
-.Btn-success.Border-fx-center,
-.Btn-success.Border-fx-draw,
-.Btn-success.Border-fx-meet,
-.Btn-success.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-success {
-  color: #29a847;
-  border-color: #2ebd4f
-}
-.Btn-outline-success:hover {
-  color: #fff;
-  background-color: #29a847;
-  border-color: #24943e
-}
-.Btn-outline-success.Border-fx-center,
-.Btn-outline-success.Border-fx-draw,
-.Btn-outline-success.Border-fx-meet,
-.Btn-outline-success.Ripple {
-  --ls-effect-color: white
-}
-.Btn-info {
-  color: #fff;
-  background-color: #0367d8;
-  border-color: #0472f1
-}
-.Btn-info:focus,
-.Btn-info:hover {
-  border-color: #035bbf!important;
-  background: #035bbf!important
-}
-.Btn-info.Border-fx-center,
-.Btn-info.Border-fx-draw,
-.Btn-info.Border-fx-meet,
-.Btn-info.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-info {
-  color: #0367d8;
-  border-color: #0472f1
-}
-.Btn-outline-info:hover {
-  color: #fff;
-  background-color: #0367d8;
-  border-color: #035bbf
-}
-.Btn-outline-info.Border-fx-center,
-.Btn-outline-info.Border-fx-draw,
-.Btn-outline-info.Border-fx-meet,
-.Btn-outline-info.Ripple {
-  --ls-effect-color: white
-}
-.Btn-warning {
-  color: #fff;
-  background-color: #ffc105;
-  border-color: #ffc71f
-}
-.Btn-warning:focus,
-.Btn-warning:hover {
-  border-color: #ebb000!important;
-  background: #ebb000!important
-}
-.Btn-warning.Border-fx-center,
-.Btn-warning.Border-fx-draw,
-.Btn-warning.Border-fx-meet,
-.Btn-warning.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-warning {
-  color: #ffc105;
-  border-color: #ffc71f
-}
-.Btn-outline-warning:hover {
-  color: #fff;
-  background-color: #ffc105;
-  border-color: #ebb000
-}
-.Btn-outline-warning.Border-fx-center,
-.Btn-outline-warning.Border-fx-draw,
-.Btn-outline-warning.Border-fx-meet,
-.Btn-outline-warning.Ripple {
-  --ls-effect-color: white
-}
-.Btn-danger {
-  color: #fff;
-  background-color: #d73c4c;
-  border-color: #db515f
-}
-.Btn-danger:focus,
-.Btn-danger:hover {
-  border-color: #cf2a3b!important;
-  background: #cf2a3b!important
-}
-.Btn-danger.Border-fx-center,
-.Btn-danger.Border-fx-draw,
-.Btn-danger.Border-fx-meet,
-.Btn-danger.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-danger {
-  color: #d73c4c;
-  border-color: #db515f
-}
-.Btn-outline-danger:hover {
-  color: #fff;
-  background-color: #d73c4c;
-  border-color: #cf2a3b
-}
-.Btn-outline-danger.Border-fx-center,
-.Btn-outline-danger.Border-fx-draw,
-.Btn-outline-danger.Border-fx-meet,
-.Btn-outline-danger.Ripple {
-  --ls-effect-color: white
-}
-.Btn-light {
-  color: #000;
-  background-color: #f9fafb;
-  border-color: #fff
-}
-.Btn-light:focus,
-.Btn-light:hover {
-  border-color: #eaedf1!important;
-  background: #eaedf1!important
-}
-.Btn-light.Border-fx-center,
-.Btn-light.Border-fx-draw,
-.Btn-light.Border-fx-meet,
-.Btn-light.Ripple {
-  --ls-effect-color: black
-}
-.Btn-outline-light {
-  color: #f9fafb;
-  border-color: #fff;
-  color: inherit
-}
-.Btn-outline-light:hover {
-  color: #000;
-  background-color: #f9fafb;
-  border-color: #eaedf1
-}
-.Btn-outline-light.Border-fx-center,
-.Btn-outline-light.Border-fx-draw,
-.Btn-outline-light.Border-fx-meet,
-.Btn-outline-light.Ripple {
-  --ls-effect-color: black
-}
-.Btn-dark {
-  color: #fff;
-  background-color: #353b41;
-  border-color: #40474f
-}
-.Btn-dark:focus,
-.Btn-dark:hover {
-  border-color: #292e32!important;
-  background: #292e32!important
-}
-.Btn-dark.Border-fx-center,
-.Btn-dark.Border-fx-draw,
-.Btn-dark.Border-fx-meet,
-.Btn-dark.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-dark {
-  color: #353b41;
-  border-color: #40474f
-}
-.Btn-outline-dark:hover {
-  color: #fff;
-  background-color: #353b41;
-  border-color: #292e32
-}
-.Btn-outline-dark.Border-fx-center,
-.Btn-outline-dark.Border-fx-draw,
-.Btn-outline-dark.Border-fx-meet,
-.Btn-outline-dark.Ripple {
-  --ls-effect-color: white
-}
-.Btn-night {
-  color: #fff;
-  background-color: #000;
-  border-color: #0d0d0d
-}
-.Btn-night:focus,
-.Btn-night:hover {
-  border-color: #000!important;
-  background: #000!important
-}
-.Btn-night.Border-fx-center,
-.Btn-night.Border-fx-draw,
-.Btn-night.Border-fx-meet,
-.Btn-night.Ripple {
-  --ls-effect-color: white
-}
-.Btn-outline-night {
-  color: #000;
-  border-color: #0d0d0d
-}
-.Btn-outline-night:hover {
-  color: #fff;
-  background-color: #000;
-  border-color: #000
-}
-.Btn-outline-night.Border-fx-center,
-.Btn-outline-night.Border-fx-draw,
-.Btn-outline-night.Border-fx-meet,
-.Btn-outline-night.Ripple {
-  --ls-effect-color: white
-}
 .Calendar {
   display: block;
   position: relative;
@@ -7132,7 +6925,8 @@
   color: var(--ls-fg-darkest);
   background-color: var(--ls-bg-darkest);
   border-radius: 50%;
-  box-shadow: 0 0 1px 0 rgba(var(--ls-shadow-color),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color),.06) inset
+  box-shadow: 0 0 1px 0 rgba(var(--ls-shadow-color),.18) inset,0 0 2px 0 rgba(var(--ls-shadow-color),.12) inset,0 0 6px 0 rgba(var(--ls-shadow-color),.06) inset;
+  margin-bottom: 1rem
 }
 .Timeline .Timeline-item .Timeline-badge .Timeline-badge-inner * {
   display: block;
@@ -7143,7 +6937,7 @@
   min-width: 0;
   max-width: 100%;
   padding: 0;
-  margin: 0 0 0 1rem
+  margin: 0 0 0 1.4rem
 }
 .Timeline .Timeline-item .Timeline-body .Card {
   border-top: 1px solid var(--ls-border-color)
@@ -7164,7 +6958,7 @@
   flex-direction: row-reverse
 }
 .Timeline .Timeline-item.Timeline-item-inverted .Timeline-body {
-  margin: 0 1rem 0 0
+  margin: 0 1.4rem 0 0
 }
 @media (max-width:767px) {
   .Timeline .Timeline-item,
@@ -7432,125 +7226,159 @@
   background-color: var(--ls-fg-muted);
   border-color: var(--ls-fg-muted)
 }
-.Form-control-lg {
-  height: calc(1.5em + 1rem + 2px);
-  padding: .5rem 1rem;
-  font-size: 1.25rem;
-  line-height: 1.5;
-  border-radius: .3rem
-}
-.Form-control-sm {
-  height: calc(1.5em + .5rem + 2px);
-  padding: .25rem .5rem;
-  font-size: .875rem;
-  line-height: 1.5;
-  border-radius: .2rem
-}
 .Form {
   position: relative;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem
+  margin: 1rem 0 1rem 0
 }
-.Form input[type=date],
-.Form input[type=datetime-local],
 .Form input[type=email],
-.Form input[type=number],
 .Form input[type=password],
-.Form input[type=search-md],
-.Form input[type=search],
-.Form input[type=tel],
 .Form input[type=text],
-.Form input[type=time],
-.Form input[type=url],
-.Form textarea.Textarea {
-  transition: all .3s;
+.Form textarea {
+  width: 100%;
+  padding: 5px 0;
+  color: var(--ls-fg-light);
+  background: var(--ls-bg-light);
+  box-sizing: content-box;
   outline: 0;
   box-shadow: none;
+  font-weight: 400;
+  line-height: 1.5;
   border: none;
-  border-bottom: 1px solid #ced4da;
   border-radius: 0;
-  box-sizing: content-box;
-  background: 0 0
+  border-bottom: 1px solid var(--ls-border-color);
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
 }
-.Form input[type=date]:focus:not([readonly]),
-.Form input[type=datetime-local]:focus:not([readonly]),
-.Form input[type=email]:focus:not([readonly]),
-.Form input[type=number]:focus:not([readonly]),
-.Form input[type=password]:focus:not([readonly]),
-.Form input[type=search-md]:focus:not([readonly]),
-.Form input[type=search]:focus:not([readonly]),
-.Form input[type=tel]:focus:not([readonly]),
-.Form input[type=text]:focus:not([readonly]),
-.Form input[type=time]:focus:not([readonly]),
-.Form input[type=url]:focus:not([readonly]),
-.Form textarea.Textarea:focus:not([readonly]) {
-  box-shadow: 0 1px 0 0 var(--ls-bg-active);
-  border-bottom: 1px solid var(--ls-bg-active)
-}
-.Form input[type=date]:focus:not([readonly]) + label,
-.Form input[type=datetime-local]:focus:not([readonly]) + label,
-.Form input[type=email]:focus:not([readonly]) + label,
-.Form input[type=number]:focus:not([readonly]) + label,
-.Form input[type=password]:focus:not([readonly]) + label,
-.Form input[type=search-md]:focus:not([readonly]) + label,
-.Form input[type=search]:focus:not([readonly]) + label,
-.Form input[type=tel]:focus:not([readonly]) + label,
-.Form input[type=text]:focus:not([readonly]) + label,
-.Form input[type=time]:focus:not([readonly]) + label,
-.Form input[type=url]:focus:not([readonly]) + label,
-.Form textarea.Textarea:focus:not([readonly]) + label {
-  color: var(--ls-bg-active)
-}
-.Form .Form-control {
-  display: block;
+.Form select {
   width: 100%;
-  margin: 0 0 .5rem 0;
+  color: var(--ls-fg-light);
+  background: var(--ls-bg-light);
+  outline: 0;
+  border: none;
   border-radius: 0;
-  padding: .3rem 0 .55rem 0;
-  background-image: none;
-  background-color: transparent
-}
-.Form .Form-control:focus {
-  box-shadow: none;
-  background: 0 0
-}
-.Form .Form-control:disabled,
-.Form .Form-control[readonly] {
-  border-bottom: 1px solid gray;
-  background-color: transparent
+  border-bottom: 1px solid var(--ls-border-color)
 }
 .Form label {
   position: absolute;
-  top: .65rem;
+  pointer-events: none;
+  top: 0;
   left: 0;
-  transition: .2s ease-out;
+  font-size: 1rem;
+  color: var(--ls-fg-muted);
   cursor: text;
-  color: #757575
+  transition: transform .2s ease-out,color .2s ease-out
 }
-.Form label.active {
-  transform: translateY(-140%)
+.Form .Form-input:focus:not([readonly]) {
+  box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06);
+  border-color: var(--ls-bg-active)
 }
-.Form label {
-  font-size: 1rem
+.Form .Form-input:focus:not([readonly]) + label {
+  color: var(--ls-bg-active)
 }
-.Form label.active {
-  font-size: .8rem
+.Form .Form-input:focus ~ .Form-label,
+.Form .Form-input:valid ~ .Form-label {
+  transform: translateY(-80%)
 }
-.Form.Form-lg label {
-  font-size: 1.25rem
+.Form .Form-select {
+  padding: 5px 0
+}
+.Form .Form-select > option {
+  color: var(--ls-fg-lightest);
+  background: var(--ls-bg-lightest);
+  padding: .5rem;
+  margin: 3px 0;
+  box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06)
+}
+.Form .Form-select > option:checked {
+  background: var(--ls-bg-active);
+  color: var(--ls-fg-active)
+}
+.Form .Form-select > option:active,
+.Form .Form-select > option:hover {
+  color: var(--ls-fg-dark);
+  background: var(--ls-bg-dark)
+}
+.Form .Form-select:focus:not([readonly]) {
+  box-shadow: 0 1px 1px -1px rgba(var(--ls-shadow-color),.18),0 2px 2px 0 rgba(var(--ls-shadow-color),.12),0 4px 6px 0 rgba(var(--ls-shadow-color),.06);
+  border-color: var(--ls-bg-active)
+}
+.Form .Form-select:focus:not([readonly]) + label {
+  color: var(--ls-bg-active)
+}
+.Form .Form-select:focus ~ .Form-label,
+.Form .Form-select:valid ~ .Form-label {
+  transform: translateY(-80%)
+}
+.Form .Form-label {
+  transform: translateY(12px);
+  transform-origin: 0 100%
 }
-.Form.Form-lg label.active {
-  font-size: .95rem
+.Form .Form-input:focus:not([readonly]) ~ .Input-prefix,
+.Form .Form-input:focus:not([readonly]) ~ .Prefix {
+  color: var(--ls-bg-active)
+}
+.Form .Prefix {
+  position: absolute;
+  transition: color .2s;
+  color: var(--ls-bg-active);
+  top: .25rem;
+  font-size: 1.75rem
+}
+.Form .Prefix ~ input,
+.Form .Prefix ~ textarea {
+  width: calc(100% - 2.5rem);
+  margin-left: 2.5rem
+}
+.Form .Prefix ~ label {
+  margin-left: 2.5rem
+}
+.Form.Input-pre-icon .Form-input {
+  width: calc(100% - 40px);
+  padding-left: 40px
+}
+.Form.Input-pre-icon .Input-prefix {
+  left: 16px;
+  right: initial
+}
+.Form.Input-pre-icon .Form-label {
+  left: 40px;
+  right: initial
+}
+.Form.Input-post-icon .Form-input {
+  width: calc(100% - 40px);
+  padding-right: 40px
+}
+.Form.Input-post-icon .Input-prefix {
+  right: 16px;
+  left: initial
+}
+.Form .Input-prefix {
+  position: absolute;
+  top: 50%;
+  color: var(--ls-fg-light);
+  pointer-events: none;
+  transform: translateY(-50%);
+  transition: color .2s
 }
 .Form.Form-sm label {
   font-size: .875rem
 }
-.Form.Form-sm label.active {
-  font-size: .75rem
+.Form.Form-lg label {
+  font-size: 1.25rem
+}
+.Form .Form-input {
+  height: calc(1.5em + 0rem + 2px);
+  padding: 5px 0;
+  font-size: 1rem
 }
-.Form input:focus ~ label,
-.Form input:valid ~ label {
-  transform: translateY(-140%)
+.Form .Form-input-sm {
+  height: calc(1.5em - .25rem + 2px);
+  padding: 3px 0;
+  font-size: .875rem
+}
+.Form .Form-input-lg {
+  height: calc(1.5em + .5rem + 2px);
+  padding: 7px 0;
+  font-size: 1.25rem
 }
 .Form-check [type=radio] {
   position: absolute;
@@ -7649,6 +7477,79 @@
 .Form-check[class*=With-gap] [type=radio]:disabled:checked + span:after {
   background-color: var(--ls-fg-muted)
 }
+.Form-select-Old {
+  position: relative;
+  width: 100%
+}
+.Form-select-Old:after {
+  position: absolute;
+  top: 18px;
+  right: 10px;
+  width: 0;
+  height: 0;
+  padding: 0;
+  content: "";
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid rgba(0,0,0,.12);
+  pointer-events: none
+}
+.Form-select-Old .Select {
+  position: relative;
+  font-family: inherit;
+  background-color: transparent;
+  width: 100%;
+  padding: 10px 10px 10px 0;
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid rgba(0,0,0,.12);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none
+}
+.Form-select-Old .Select:focus {
+  outline: 0;
+  border-bottom: 1px solid transparent
+}
+.Form-select-Old .Select:focus ~ .Select-label,
+.Form-select-Old .Select:valid ~ .Select-label {
+  color: #2f80ed;
+  top: -10px;
+  transition: .2s ease all
+}
+.Form-select-Old .Select:focus ~ .Select-bar:after,
+.Form-select-Old .Select:focus ~ .Select-bar:before {
+  width: 50%
+}
+.Form-select-Old .Select-label {
+  color: rgba(0,0,0,.26);
+  position: absolute;
+  pointer-events: none;
+  left: 0;
+  top: 10px;
+  transition: .2s ease all
+}
+.Form-select-Old .Select-bar {
+  position: relative;
+  display: block;
+  width: 100%
+}
+.Form-select-Old .Select-bar:after,
+.Form-select-Old .Select-bar:before {
+  content: "";
+  height: 2px;
+  width: 0;
+  bottom: 1px;
+  position: absolute;
+  background: #2f80ed;
+  transition: .2s ease all
+}
+.Form-select-Old .Select-bar:before {
+  left: 50%
+}
+.Form-select-Old .Select-bar:after {
+  right: 50%
+}
 .Switch {
   cursor: pointer;
   -webkit-user-select: none;
@@ -9470,6 +9371,44 @@
 .Toast-primary:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
+.Btn-primary {
+  --ls-btn-bg-body: #f2edfd;
+  --ls-btn-bg-darkest: #4712af;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #773deb;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #dfd1fa;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #efe8fd;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #4712af;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-primary:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-primary {
+  --ls-btn-bg-body: #f2edfd;
+  --ls-btn-bg-darkest: #4712af;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #773deb;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #dfd1fa;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #efe8fd;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #4712af;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(260deg, 81%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-primary:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
 .Theme-secondary {
   --ls-bg-body: #f4f5f6;
   --ls-bg-darkest: #6d767e;
@@ -9584,6 +9523,44 @@
 .Toast-secondary:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
+.Btn-secondary {
+  --ls-btn-bg-body: #f4f5f6;
+  --ls-btn-bg-darkest: #6d767e;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #a2a9ae;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #e4e6e7;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #f1f2f3;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #6d767e;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-secondary:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-secondary {
+  --ls-btn-bg-body: #f4f5f6;
+  --ls-btn-bg-darkest: #6d767e;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #a2a9ae;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #e4e6e7;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #f1f2f3;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #6d767e;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(208deg, 7%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-secondary:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
 .Theme-success {
   --ls-bg-body: #effbf1;
   --ls-bg-darkest: #29a847;
@@ -9698,6 +9675,44 @@
 .Toast-success:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
+.Btn-success {
+  --ls-btn-bg-body: #effbf1;
+  --ls-btn-bg-darkest: #29a847;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #5fd87b;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #d6f5dd;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #eafaee;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #29a847;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-success:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-success {
+  --ls-btn-bg-body: #effbf1;
+  --ls-btn-bg-darkest: #29a847;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #5fd87b;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #d6f5dd;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #eafaee;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #29a847;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(134deg, 61%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-success:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
 .Theme-info {
   --ls-bg-body: #ebf4ff;
   --ls-bg-darkest: #0367d8;
@@ -9812,6 +9827,44 @@
 .Toast-info:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
+.Btn-info {
+  --ls-btn-bg-body: #ebf4ff;
+  --ls-btn-bg-darkest: #0367d8;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #459bfc;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #cde4fe;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #e6f1ff;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #0367d8;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-info:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-info {
+  --ls-btn-bg-body: #ebf4ff;
+  --ls-btn-bg-darkest: #0367d8;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #459bfc;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #cde4fe;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #e6f1ff;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #0367d8;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(212deg, 97%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-info:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
 .Theme-warning {
   --ls-bg-body: #fffaeb;
   --ls-bg-darkest: #ffc105;
@@ -9926,6 +9979,44 @@
 .Toast-warning:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
+.Btn-warning {
+  --ls-btn-bg-body: #fffaeb;
+  --ls-btn-bg-darkest: #ffc105;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #ffda6b;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #fff2cc;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #fff9e6;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #ffc105;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-warning:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-warning {
+  --ls-btn-bg-body: #fffaeb;
+  --ls-btn-bg-darkest: #ffc105;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #ffda6b;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #fff2cc;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #fff9e6;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #ffc105;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(45deg, 100%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-warning:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
 .Theme-danger {
   --ls-bg-body: #fceeef;
   --ls-bg-darkest: #d73c4c;
@@ -10040,6 +10131,44 @@
 .Toast-danger:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
+.Btn-danger {
+  --ls-btn-bg-body: #fceeef;
+  --ls-btn-bg-darkest: #d73c4c;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #e8919a;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #f6d5d8;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #fbeaec;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #d73c4c;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-danger:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-danger {
+  --ls-btn-bg-body: #fceeef;
+  --ls-btn-bg-darkest: #d73c4c;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #e8919a;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #f6d5d8;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: #fbeaec;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #d73c4c;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(354deg, 66%, 70%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-danger:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
 .Theme-light {
   --ls-bg-body: #d1d9e0;
   --ls-bg-darkest: #e0e6eb;
@@ -10136,6 +10265,38 @@
   --ls-toast-shadow-color: 0,0,0;
   --ls-toast-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
 }
+.Btn-light {
+  --ls-btn-bg-body: #d1d9e0;
+  --ls-btn-bg-darkest: #e0e6eb;
+  --ls-btn-fg-darkest: black;
+  --ls-btn-bg-dark: #f0f2f5;
+  --ls-btn-fg-dark: black;
+  --ls-btn-bg-light: #f9fafb;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: white;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #3692fc;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-light {
+  --ls-btn-bg-body: #d1d9e0;
+  --ls-btn-bg-darkest: #e0e6eb;
+  --ls-btn-fg-darkest: black;
+  --ls-btn-bg-dark: #f0f2f5;
+  --ls-btn-fg-dark: black;
+  --ls-btn-bg-light: #f9fafb;
+  --ls-btn-fg-light: black;
+  --ls-btn-bg-lightest: white;
+  --ls-btn-fg-lightest: black;
+  --ls-btn-bg-active: #3692fc;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 0,0,0;
+  --ls-btn-border-color: hsla(210deg, 20%, 90%, var(--ls-border-alpha, 1))
+}
 .Theme-dark {
   --ls-bg-body: #171a1c;
   --ls-bg-darkest: #22262a;
@@ -10250,6 +10411,44 @@
 .Toast-dark:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
 }
+.Btn-dark {
+  --ls-btn-bg-body: #171a1c;
+  --ls-btn-bg-darkest: #22262a;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #394046;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #454d54;
+  --ls-btn-fg-light: white;
+  --ls-btn-bg-lightest: #5c6670;
+  --ls-btn-fg-lightest: white;
+  --ls-btn-bg-active: #8965cd;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 255,255,255;
+  --ls-btn-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
+}
+.Btn-dark:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-dark {
+  --ls-btn-bg-body: #171a1c;
+  --ls-btn-bg-darkest: #22262a;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #394046;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #454d54;
+  --ls-btn-fg-light: white;
+  --ls-btn-bg-lightest: #5c6670;
+  --ls-btn-fg-lightest: white;
+  --ls-btn-bg-active: #8965cd;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 255,255,255;
+  --ls-btn-border-color: hsla(210deg, 10%, 45%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-dark:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
 .Theme-night {
   --ls-bg-body: #0d0d0d;
   --ls-bg-darkest: #1a1a1a;
@@ -10363,4 +10562,42 @@
 }
 .Toast-night:not(.Toast-outline) .Btn-close {
   filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-night {
+  --ls-btn-bg-body: #0d0d0d;
+  --ls-btn-bg-darkest: #1a1a1a;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #262626;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #333333;
+  --ls-btn-fg-light: white;
+  --ls-btn-bg-lightest: #4d4d4d;
+  --ls-btn-fg-lightest: white;
+  --ls-btn-bg-active: #8965cd;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 255,255,255;
+  --ls-btn-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
+}
+.Btn-night:not(.Btn-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
+}
+.Btn-outline-night {
+  --ls-btn-bg-body: #0d0d0d;
+  --ls-btn-bg-darkest: #1a1a1a;
+  --ls-btn-fg-darkest: white;
+  --ls-btn-bg-dark: #262626;
+  --ls-btn-fg-dark: white;
+  --ls-btn-bg-light: #333333;
+  --ls-btn-fg-light: white;
+  --ls-btn-bg-lightest: #4d4d4d;
+  --ls-btn-fg-lightest: white;
+  --ls-btn-bg-active: #8965cd;
+  --ls-btn-fg-active: white;
+  --ls-btn-fg-muted: #a7afb9;
+  --ls-btn-shadow-color: 255,255,255;
+  --ls-btn-border-color: hsla(0deg, 0%, 35%, var(--ls-border-alpha, 1))
+}
+.Btn-outline-night:not(.Btn-outline-outline) .Btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%)
 }