uikit 3.21.13 → 3.21.14-dev.2e8a07c7e

package/dist/css/uikit.css

@@ -1,4 +1,4 @@
-/*! UIkit 3.21.13 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.21.14-dev.2e8a07c7e | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -1779,7 +1779,7 @@ select.uk-form-width-xsmall {
  * 1. Position and resize the form control to always cover its container
  * 2. Required for Firefox for positioning to the left
  * 3. Required for Webkit to make `height` work
- * 4. Hide controle and show cursor
+ * 4. Hide controls and show cursor
  * 5. Needed for the cursor
  * 6. Clip height caused by 5. Needed for Webkit only
  */
@@ -2129,7 +2129,7 @@ select.uk-form-width-xsmall {
 /* Group
  ========================================================================== */
 /*
- * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
  * 2. Behave like button
  * 3. Create position context
  */
@@ -2901,7 +2901,7 @@ select.uk-form-width-xsmall {
    Component: Totop
  ========================================================================== */
 /*
- * Addopts `uk-icon`
+ * Adopts `uk-icon`
  */
 .uk-totop {
   padding: 5px;
@@ -3392,7 +3392,8 @@ select.uk-form-width-xsmall {
  * Icon
  */
 .uk-search-default .uk-search-icon {
-  width: 40px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
   padding-left: 40px;
@@ -3424,7 +3425,8 @@ select.uk-form-width-xsmall {
  * Icon
  */
 .uk-search-navbar .uk-search-icon {
-  width: 40px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
   padding-left: 40px;
@@ -3441,22 +3443,30 @@ select.uk-form-width-xsmall {
  * Input
  */
 .uk-search-medium .uk-search-input {
-  height: 40px;
+  height: 55px;
+  padding-left: 12px;
+  padding-right: 12px;
   background: transparent;
   font-size: 1.5rem;
+  border: 1px solid #e5e5e5;
 }
 /* Focus */
+.uk-search-medium .uk-search-input:focus {
+  background-color: rgba(0, 0, 0, 0);
+  border-color: #1e87f0;
+}
 /*
  * Icon
  */
 .uk-search-medium .uk-search-icon {
-  width: 24px;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 .uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
-  padding-left: 34px;
+  padding-left: 48px;
 }
 .uk-search-medium:has(.uk-search-icon-flip) .uk-search-input {
-  padding-right: 34px;
+  padding-right: 48px;
 }
 /* Large modifier
  ========================================================================== */
@@ -3467,22 +3477,30 @@ select.uk-form-width-xsmall {
  * Input
  */
 .uk-search-large .uk-search-input {
-  height: 80px;
+  height: 90px;
+  padding-left: 20px;
+  padding-right: 20px;
   background: transparent;
   font-size: 2.625rem;
+  border: 1px solid #e5e5e5;
 }
 /* Focus */
+.uk-search-large .uk-search-input:focus {
+  background-color: rgba(0, 0, 0, 0);
+  border-color: #1e87f0;
+}
 /*
  * Icon
  */
 .uk-search-large .uk-search-icon {
-  width: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 .uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
-  padding-left: 60px;
+  padding-left: 80px;
 }
 .uk-search-large:has(.uk-search-icon-flip) .uk-search-input {
-  padding-right: 60px;
+  padding-right: 80px;
 }
 /* Toggle
  ========================================================================== */
@@ -4036,14 +4054,8 @@ select.uk-form-width-xsmall {
   /* 3 */
   box-sizing: border-box;
 }
-/*
- * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
- */
 .uk-sticky-fixed {
   margin: 0 !important;
-  /* 1 */
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
 }
 /*
  * Faster animations
@@ -5930,11 +5942,15 @@ ul.uk-nav-sub {
    Component: Breadcrumb
  ========================================================================== */
 /*
- * Reset list
+ * 1. Reset list
+ * 2. Remove space between elements
  */
 .uk-breadcrumb {
+  /* 1 */
   padding: 0;
   list-style: none;
+  /* 2 */
+  font-size: 0;
 }
 /*
  * 1. Doesn't generate any box and replaced by child boxes
@@ -5969,7 +5985,7 @@ ul.uk-nav-sub {
   content: "/";
   display: inline-block;
   /* 1 */
-  margin: 0 20px 0 calc(20px - 4px);
+  margin: 0 20px;
   /* 2 */
   font-size: 0.875rem;
   color: #999;
@@ -6423,6 +6439,7 @@ ul.uk-nav-sub {
  * 7. Prevent cancellation of pointer events while dragging
  */
 .uk-lightbox {
+  --uk-inverse: light;
   /* 1 */
   display: none;
   /* 2 */
@@ -6464,14 +6481,21 @@ ul.uk-nav-sub {
 .uk-lightbox-page {
   overflow: hidden;
 }
-/* Item
+/* Items
  ========================================================================== */
+/*
+ * Reset list
+ */
+.uk-lightbox-items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 /*
  * 1. Center child within the viewport
  * 2. Not visible by default
- * 3. Color needed for spinner icon
- * 4. Optimize animation
- * 5. Responsiveness
+ * 3. Optimize animation
+ * 4. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
  */
 .uk-lightbox-items > * {
@@ -6484,70 +6508,63 @@ ul.uk-nav-sub {
   /* 2 */
   display: none;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   /* 3 */
-  color: rgba(255, 255, 255, 0.7);
-  /* 4 */
   will-change: transform, opacity;
+  /* 4 */
+  overflow: auto;
+}
+/* 2 */
+.uk-lightbox-items > .uk-active {
+  display: flex;
 }
-/* 5 */
-.uk-lightbox-items > * > * {
+.uk-lightbox-items-fit > * {
+  align-items: center;
+}
+/* 4 */
+.uk-lightbox-items-fit > * > * {
   max-width: 100vw;
   max-height: 100vh;
 }
-.uk-lightbox-items > * > :not(iframe) {
+.uk-lightbox-items-fit > * > :not(iframe) {
   width: auto;
   height: auto;
 }
-.uk-lightbox-items > .uk-active {
-  display: flex;
+/* Zoom Cursor */
+.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover {
+  cursor: zoom-in;
 }
-/* Toolbar
- ========================================================================== */
-.uk-lightbox-toolbar {
-  padding: 10px 10px;
-  background: rgba(0, 0, 0, 0.3);
-  color: rgba(255, 255, 255, 0.7);
-}
-.uk-lightbox-toolbar > * {
-  color: rgba(255, 255, 255, 0.7);
+.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover {
+  cursor: zoom-out;
 }
-/* Toolbar Icon (Close)
+/* Navs
  ========================================================================== */
-.uk-lightbox-toolbar-icon {
-  padding: 5px;
-  color: rgba(255, 255, 255, 0.7);
+.uk-lightbox-thumbnav-vertical :where(img, video) {
+  max-width: 100px;
 }
-/*
- * Hover
- */
-.uk-lightbox-toolbar-icon:hover {
-  color: #fff;
+.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) {
+  max-height: 100px;
+}
+.uk-lightbox-thumbnav:empty,
+.uk-lightbox-dotnav:empty {
+  display: none;
 }
-/* Button (Slidenav)
+/* Caption
  ========================================================================== */
-/*
- * 1. Center icon vertically and horizontally
- */
-.uk-lightbox-button {
-  box-sizing: border-box;
-  width: 50px;
-  height: 50px;
+.uk-lightbox-caption:empty {
+  display: none;
+}
+.uk-lightbox-caption {
+  padding: 10px 10px;
   background: rgba(0, 0, 0, 0.3);
   color: rgba(255, 255, 255, 0.7);
-  /* 1 */
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
 }
-/* Hover */
-.uk-lightbox-button:hover {
-  color: #fff;
+.uk-lightbox-caption > * {
+  color: rgba(255, 255, 255, 0.7);
 }
-/* OnClick */
-/* Caption
+/* Counter
  ========================================================================== */
-.uk-lightbox-caption:empty {
+.uk-lightbox-counter:empty {
   display: none;
 }
 /* Iframe
@@ -8034,13 +8051,8 @@ iframe[data-uk-cover] {
 }
 /* Attachment
  ========================================================================== */
-/*
- * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
- */
 .uk-background-fixed {
   background-attachment: fixed;
-  /* 1 */
-  backface-visibility: hidden;
 }
 /*
  * Exclude touch devices because `fixed` doesn't work on iOS and Android
@@ -9119,6 +9131,26 @@ iframe[data-uk-cover] {
 .uk-margin-right {
   margin-right: 20px !important;
 }
+/* XSmall
+ ========================================================================== */
+.uk-margin-xsmall {
+  margin-bottom: 5px;
+}
+* + .uk-margin-xsmall {
+  margin-top: 5px !important;
+}
+.uk-margin-xsmall-top {
+  margin-top: 5px !important;
+}
+.uk-margin-xsmall-bottom {
+  margin-bottom: 5px !important;
+}
+.uk-margin-xsmall-left {
+  margin-left: 5px !important;
+}
+.uk-margin-xsmall-right {
+  margin-right: 5px !important;
+}
 /* Small
  ========================================================================== */
 .uk-margin-small {
@@ -9649,7 +9681,7 @@ iframe[data-uk-cover] {
  */
 .uk-transition-toggle:hover .uk-transition-fade,
 .uk-transition-toggle:focus .uk-transition-fade,
-.uk-transition-toggle .uk-transition-fade:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-fade,
 .uk-transition-active.uk-active .uk-transition-fade {
   opacity: 1;
 }
@@ -9672,7 +9704,7 @@ iframe[data-uk-cover] {
 /* Show */
 .uk-transition-toggle:hover .uk-transition-scale-up,
 .uk-transition-toggle:focus .uk-transition-scale-up,
-.uk-transition-toggle .uk-transition-scale-up:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-scale-up,
 .uk-transition-active.uk-active .uk-transition-scale-up {
   --uk-scale-x: 1.03;
   --uk-scale-y: 1.03;
@@ -9680,7 +9712,7 @@ iframe[data-uk-cover] {
 }
 .uk-transition-toggle:hover .uk-transition-scale-down,
 .uk-transition-toggle:focus .uk-transition-scale-down,
-.uk-transition-toggle .uk-transition-scale-down:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-scale-down,
 .uk-transition-active.uk-active .uk-transition-scale-down {
   --uk-scale-x: 1;
   --uk-scale-y: 1;
@@ -9728,7 +9760,7 @@ iframe[data-uk-cover] {
 /* Show */
 .uk-transition-toggle:hover [class*="uk-transition-slide"],
 .uk-transition-toggle:focus [class*="uk-transition-slide"],
-.uk-transition-toggle [class*="uk-transition-slide"]:focus-within,
+.uk-transition-toggle:focus-within [class*="uk-transition-slide"],
 .uk-transition-active.uk-active [class*="uk-transition-slide"] {
   --uk-translate-x: 0;
   --uk-translate-y: 0;
@@ -9758,7 +9790,8 @@ iframe[data-uk-cover] {
  * `hidden` attribute also set here to make it stronger
  */
 [hidden],
-.uk-hidden {
+.uk-hidden,
+.uk-hidden-empty:empty {
   display: none !important;
 }
 /* Phone landscape and bigger */
@@ -9835,7 +9868,7 @@ iframe[data-uk-cover] {
  *    Note: `clip-path` doesn't work with `tabindex` on touch devices.
  */
 .uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
-.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-visible):not(:has(:focus-visible)) {
   /* 1 */
   position: absolute !important;
   /* 2 */
@@ -9891,6 +9924,10 @@ iframe[data-uk-cover] {
 .uk-overlay-primary,
 .uk-offcanvas-bar {
   color: rgba(255, 255, 255, 0.7);
+  /* Webkit */
+  /* Firefox */
+  /* Webkit */
+  /* Firefox */
 }
 .uk-light a,
 .uk-light .uk-link,
@@ -10837,6 +10874,97 @@ iframe[data-uk-cover] {
   background-color: rgba(255, 255, 255, 0.2);
   color: rgba(255, 255, 255, 0.7);
 }
+.uk-light .uk-range::-webkit-slider-runnable-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-card-primary.uk-card-body .uk-range::-webkit-slider-runnable-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
+.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-runnable-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
+.uk-overlay-primary .uk-range::-webkit-slider-runnable-track,
+.uk-offcanvas-bar .uk-range::-webkit-slider-runnable-track {
+  background: rgba(242, 242, 242, 0.1);
+}
+.uk-light .uk-range:focus::-webkit-slider-runnable-track,
+.uk-light .uk-range:active::-webkit-slider-runnable-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-primary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-primary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-secondary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-secondary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
+.uk-overlay-primary .uk-range:focus::-webkit-slider-runnable-track,
+.uk-overlay-primary .uk-range:active::-webkit-slider-runnable-track,
+.uk-offcanvas-bar .uk-range:focus::-webkit-slider-runnable-track,
+.uk-offcanvas-bar .uk-range:active::-webkit-slider-runnable-track {
+  background: rgba(242, 242, 242, 0.15);
+}
+.uk-light .uk-range::-moz-range-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-card-primary.uk-card-body .uk-range::-moz-range-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
+.uk-card-secondary.uk-card-body .uk-range::-moz-range-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
+.uk-overlay-primary .uk-range::-moz-range-track,
+.uk-offcanvas-bar .uk-range::-moz-range-track {
+  background: rgba(242, 242, 242, 0.1);
+}
+.uk-light .uk-range:focus::-moz-range-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-card-primary.uk-card-body .uk-range:focus::-moz-range-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
+.uk-card-secondary.uk-card-body .uk-range:focus::-moz-range-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
+.uk-overlay-primary .uk-range:focus::-moz-range-track,
+.uk-offcanvas-bar .uk-range:focus::-moz-range-track {
+  background: rgba(242, 242, 242, 0.15);
+}
+.uk-light .uk-range::-webkit-slider-thumb,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-card-primary.uk-card-body .uk-range::-webkit-slider-thumb,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
+.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-thumb,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
+.uk-overlay-primary .uk-range::-webkit-slider-thumb,
+.uk-offcanvas-bar .uk-range::-webkit-slider-thumb {
+  background: #808080;
+  border-color: #e6e6e6;
+}
+.uk-light .uk-range::-moz-range-thumb,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-card-primary.uk-card-body .uk-range::-moz-range-thumb,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
+.uk-card-secondary.uk-card-body .uk-range::-moz-range-thumb,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
+.uk-overlay-primary .uk-range::-moz-range-thumb,
+.uk-offcanvas-bar .uk-range::-moz-range-thumb {
+  background: #808080;
+  border-color: #e6e6e6;
+}
 .uk-light .uk-input,
 .uk-light .uk-select,
 .uk-light .uk-textarea,
@@ -11679,6 +11807,20 @@ iframe[data-uk-cover] {
 .uk-overlay-primary .uk-search-medium .uk-search-input,
 .uk-offcanvas-bar .uk-search-medium .uk-search-input {
   background-color: transparent;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.uk-light .uk-search-medium .uk-search-input:focus,
+.uk-section-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-section-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-tile-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-card-primary.uk-card-body .uk-search-medium .uk-search-input:focus,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
+.uk-card-secondary.uk-card-body .uk-search-medium .uk-search-input:focus,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
+.uk-overlay-primary .uk-search-medium .uk-search-input:focus,
+.uk-offcanvas-bar .uk-search-medium .uk-search-input:focus {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .uk-light .uk-search-large .uk-search-input,
 .uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
@@ -11692,6 +11834,20 @@ iframe[data-uk-cover] {
 .uk-overlay-primary .uk-search-large .uk-search-input,
 .uk-offcanvas-bar .uk-search-large .uk-search-input {
   background-color: transparent;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.uk-light .uk-search-large .uk-search-input:focus,
+.uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-card-primary.uk-card-body .uk-search-large .uk-search-input:focus,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
+.uk-card-secondary.uk-card-body .uk-search-large .uk-search-input:focus,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
+.uk-overlay-primary .uk-search-large .uk-search-input:focus,
+.uk-offcanvas-bar .uk-search-large .uk-search-input:focus {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .uk-light .uk-search-toggle,
 .uk-section-primary:not(.uk-preserve-color) .uk-search-toggle,