@nextcloud/vue 8.11.2 → 8.11.3

package/dist/assets/{NcInputField-vYuV3-IY.css → NcInputField-CXoTqF9T.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-b312d183] {
   display: flex;
   align-self: center;
@@ -38,8 +41,8 @@
   position: relative;
 }
 .input-field--disabled[data-v-b312d183] {
-  opacity: .4;
-  filter: saturate(.4);
+  opacity: 0.4;
+  filter: saturate(0.4);
 }
 .input-field__input[data-v-b312d183] {
   margin: 0;
@@ -59,14 +62,11 @@
 .input-field__input--label-outside[data-v-b312d183] {
   padding-block: 0;
 }
-.input-field__input[data-v-b312d183]:active:not([disabled]),
-.input-field__input[data-v-b312d183]:hover:not([disabled]),
-.input-field__input[data-v-b312d183]:focus:not([disabled]) {
+.input-field__input[data-v-b312d183]:active:not([disabled]), .input-field__input[data-v-b312d183]:hover:not([disabled]), .input-field__input[data-v-b312d183]:focus:not([disabled]) {
   border-color: 2px solid var(--color-main-text) !important;
   box-shadow: 0 0 0 2px var(--color-main-background) !important;
 }
-.input-field__input:focus + .input-field__label[data-v-b312d183],
-.input-field__input:hover:not(:placeholder-shown) + .input-field__label[data-v-b312d183] {
+.input-field__input:focus + .input-field__label[data-v-b312d183], .input-field__input:hover:not(:placeholder-shown) + .input-field__label[data-v-b312d183] {
   color: var(--color-main-text);
 }
 .input-field__input[data-v-b312d183]:not(:focus, .input-field__input--label-outside)::placeholder {
@@ -91,19 +91,13 @@
   border-color: var(--color-success) !important;
 }
 .input-field__input--success[data-v-b312d183]:focus-visible {
-  box-shadow:
-    #f8fafc 0 0 0 2px,
-    var(--color-primary-element) 0 0 0 4px,
-    #0000000d 0 1px 2px;
+  box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
 .input-field__input--error[data-v-b312d183] {
   border-color: var(--color-error) !important;
 }
 .input-field__input--error[data-v-b312d183]:focus-visible {
-  box-shadow:
-    #f8fafc 0 0 0 2px,
-    var(--color-primary-element) 0 0 0 4px,
-    #0000000d 0 1px 2px;
+  box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
 }
 .input-field__input--pill[data-v-b312d183] {
   border-radius: var(--border-radius-pill);
@@ -119,12 +113,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
-  transition:
-    height var(--animation-quick),
-    inset-block-start var(--animation-quick),
-    font-size var(--animation-quick),
-    color var(--animation-quick),
-    background-color var(--animation-quick) var(--animation-slow);
+  transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
 }
 .input-field__label--leading-icon[data-v-b312d183] {
   margin-inline-start: var(--default-clickable-area);
@@ -132,8 +121,7 @@
 .input-field__label--trailing-icon[data-v-b312d183] {
   margin-inline-end: var(--default-clickable-area);
 }
-.input-field__input:focus + .input-field__label[data-v-b312d183],
-.input-field__input:not(:placeholder-shown) + .input-field__label[data-v-b312d183] {
+.input-field__input:focus + .input-field__label[data-v-b312d183], .input-field__input:not(:placeholder-shown) + .input-field__label[data-v-b312d183] {
   inset-block-start: -10px;
   line-height: 1.5;
   font-size: 13px;
@@ -142,14 +130,9 @@
   background-color: var(--color-main-background);
   padding-inline: 5px;
   margin-inline-start: 9px;
-  transition:
-    height var(--animation-quick),
-    inset-block-start var(--animation-quick),
-    font-size var(--animation-quick),
-    color var(--animation-quick);
-}
-.input-field__input:focus + .input-field__label--leading-icon[data-v-b312d183],
-.input-field__input:not(:placeholder-shown) + .input-field__label--leading-icon[data-v-b312d183] {
+  transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
+}
+.input-field__input:focus + .input-field__label--leading-icon[data-v-b312d183], .input-field__input:not(:placeholder-shown) + .input-field__label--leading-icon[data-v-b312d183] {
   margin-inline-start: 41px;
 }
 .input-field__icon[data-v-b312d183] {
@@ -159,7 +142,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: .7;
+  opacity: 0.7;
 }
 .input-field__icon--leading[data-v-b312d183] {
   inset-block-end: 0;
@@ -191,4 +174,4 @@
 }
 .input-field__helper-text-message--success[data-v-b312d183] {
   color: var(--color-success-text);
-}
+}

package/dist/assets/{NcListItem-BIFTbr17.css → NcListItem-DMYcn1cc.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-6eacaffe] {
   display: flex;
   align-self: center;
@@ -32,25 +35,16 @@
   position: relative;
   width: 100%;
 }
-.list-item__wrapper--active .list-item[data-v-6eacaffe],
-.list-item__wrapper.active .list-item[data-v-6eacaffe] {
+.list-item__wrapper--active .list-item[data-v-6eacaffe], .list-item__wrapper.active .list-item[data-v-6eacaffe] {
   background-color: var(--color-primary-element);
 }
-.list-item__wrapper--active .list-item[data-v-6eacaffe]:hover,
-.list-item__wrapper--active .list-item[data-v-6eacaffe]:focus-within,
-.list-item__wrapper--active .list-item[data-v-6eacaffe]:has(:focus-visible),
-.list-item__wrapper--active .list-item[data-v-6eacaffe]:has(:active),
-.list-item__wrapper.active .list-item[data-v-6eacaffe]:hover,
-.list-item__wrapper.active .list-item[data-v-6eacaffe]:focus-within,
-.list-item__wrapper.active .list-item[data-v-6eacaffe]:has(:focus-visible),
-.list-item__wrapper.active .list-item[data-v-6eacaffe]:has(:active) {
+.list-item__wrapper--active .list-item[data-v-6eacaffe]:hover, .list-item__wrapper--active .list-item[data-v-6eacaffe]:focus-within, .list-item__wrapper--active .list-item[data-v-6eacaffe]:has(:focus-visible), .list-item__wrapper--active .list-item[data-v-6eacaffe]:has(:active), .list-item__wrapper.active .list-item[data-v-6eacaffe]:hover, .list-item__wrapper.active .list-item[data-v-6eacaffe]:focus-within, .list-item__wrapper.active .list-item[data-v-6eacaffe]:has(:focus-visible), .list-item__wrapper.active .list-item[data-v-6eacaffe]:has(:active) {
   background-color: var(--color-primary-element-hover);
 }
 .list-item__wrapper--active .list-item-content__name[data-v-6eacaffe],
 .list-item__wrapper--active .list-item-content__subname[data-v-6eacaffe],
 .list-item__wrapper--active .list-item-content__details[data-v-6eacaffe],
-.list-item__wrapper--active .list-item-details__details[data-v-6eacaffe],
-.list-item__wrapper.active .list-item-content__name[data-v-6eacaffe],
+.list-item__wrapper--active .list-item-details__details[data-v-6eacaffe], .list-item__wrapper.active .list-item-content__name[data-v-6eacaffe],
 .list-item__wrapper.active .list-item-content__subname[data-v-6eacaffe],
 .list-item__wrapper.active .list-item-content__details[data-v-6eacaffe],
 .list-item__wrapper.active .list-item-details__details[data-v-6eacaffe] {
@@ -93,10 +87,7 @@
   transition: background-color var(--animation-quick) ease-in-out;
   list-style: none;
 }
-.list-item[data-v-6eacaffe]:hover,
-.list-item[data-v-6eacaffe]:focus-within,
-.list-item[data-v-6eacaffe]:has(:active),
-.list-item[data-v-6eacaffe]:has(:focus-visible) {
+.list-item[data-v-6eacaffe]:hover, .list-item[data-v-6eacaffe]:focus-within, .list-item[data-v-6eacaffe]:has(:active), .list-item[data-v-6eacaffe]:has(:focus-visible) {
   background-color: var(--color-background-hover);
 }
 .list-item[data-v-6eacaffe]:has(.list-item__anchor:focus-visible) {
@@ -106,8 +97,7 @@
 .list-item--compact[data-v-6eacaffe] {
   padding: 4px 10px;
 }
-.list-item--compact .list-item__anchor .line-one[data-v-6eacaffe],
-.list-item--compact .list-item__anchor .line-two[data-v-6eacaffe] {
+.list-item--compact .list-item__anchor .line-one[data-v-6eacaffe], .list-item--compact .list-item__anchor .line-two[data-v-6eacaffe] {
   margin-block: -4px;
 }
 .list-item .list-item-content__details[data-v-6eacaffe] {
@@ -165,10 +155,10 @@
 .list-item-details__details[data-v-6eacaffe] {
   color: var(--color-text-maxcontrast);
   margin: 0 9px !important;
-  font-weight: 400;
+  font-weight: normal;
 }
 .list-item-details__extra[data-v-6eacaffe] {
-  margin: 2px 4px 0;
+  margin: 2px 4px 0 4px;
   display: flex;
   align-items: center;
 }
@@ -177,4 +167,4 @@
 }
 .list-item__extra[data-v-6eacaffe] {
   margin-top: 4px;
-}
+}

package/dist/assets/{NcListItemIcon-9Dazpmpd.css → NcListItemIcon-B9UQBQSa.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-562c32c6] {
   display: flex;
   align-self: center;
@@ -50,16 +53,14 @@
 .option__linetwo[data-v-562c32c6] {
   color: var(--color-text-maxcontrast);
 }
-.option__lineone[data-v-562c32c6],
-.option__linetwo[data-v-562c32c6] {
+.option__lineone[data-v-562c32c6], .option__linetwo[data-v-562c32c6] {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   line-height: 1.1em;
 }
-.option__lineone strong[data-v-562c32c6],
-.option__linetwo strong[data-v-562c32c6] {
-  font-weight: 700;
+.option__lineone strong[data-v-562c32c6], .option__linetwo strong[data-v-562c32c6] {
+  font-weight: bold;
 }
 .option__icon[data-v-562c32c6] {
   width: 44px;
@@ -68,13 +69,10 @@
 }
 .option__icon.icon[data-v-562c32c6] {
   flex: 0 0 44px;
-  opacity: .7;
+  opacity: 0.7;
   background-position: center;
   background-size: 16px;
 }
-.option__details[data-v-562c32c6],
-.option__lineone[data-v-562c32c6],
-.option__linetwo[data-v-562c32c6],
-.option__icon[data-v-562c32c6] {
+.option__details[data-v-562c32c6], .option__lineone[data-v-562c32c6], .option__linetwo[data-v-562c32c6], .option__icon[data-v-562c32c6] {
   cursor: inherit;
-}
+}

package/dist/assets/{NcLoadingIcon-CFmftMkz.css → NcLoadingIcon-gxK0ujO0.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-626664cd] {
   display: flex;
   align-self: center;
@@ -28,5 +31,5 @@
   justify-content: center;
 }
 .loading-icon svg[data-v-626664cd] {
-  animation: rotate var(--animation-duration, .8s) linear infinite;
-}
+  animation: rotate var(--animation-duration, 0.8s) linear infinite;
+}

package/dist/assets/{NcMentionBubble-7PQ8wEko.css → NcMentionBubble-DmzU72Mw.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-791c3b28] {
   display: flex;
   align-self: center;
@@ -71,11 +74,11 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.mention-bubble__title[data-v-791c3b28]:before {
+.mention-bubble__title[data-v-791c3b28]::before {
   content: attr(title);
 }
 .mention-bubble__select[data-v-791c3b28] {
   position: absolute;
   z-index: -1;
   left: -1000px;
-}
+}

package/dist/assets/{NcModal-CwgrmxSg.css → NcModal-Cof88czY.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-1ea9d450] {
   display: flex;
   align-self: center;
@@ -35,10 +38,10 @@
   display: block;
   width: 100%;
   height: 100%;
-  background-color: #00000080;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .modal-mask--dark[data-v-1ea9d450] {
-  background-color: #000000eb;
+  background-color: rgba(0, 0, 0, 0.92);
 }
 .modal-header[data-v-1ea9d450] {
   position: absolute;
@@ -52,14 +55,14 @@
   width: 100%;
   height: 50px;
   overflow: hidden;
-  transition: opacity .25s, visibility .25s;
+  transition: opacity 250ms, visibility 250ms;
 }
 .modal-header .modal-name[data-v-1ea9d450] {
   overflow-x: hidden;
   box-sizing: border-box;
   width: 100%;
   padding: 0 132px 0 12px;
-  transition: padding ease .1s;
+  transition: padding ease 100ms;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: #fff;
@@ -67,10 +70,10 @@
   margin-bottom: 0;
 }
 @media only screen and (min-width: 1024px) {
-  .modal-header .modal-name[data-v-1ea9d450] {
+.modal-header .modal-name[data-v-1ea9d450] {
     padding-left: 132px;
     text-align: center;
-  }
+}
 }
 .modal-header .icons-menu[data-v-1ea9d450] {
   position: absolute;
@@ -98,29 +101,27 @@
   background-color: transparent;
 }
 .modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__play[data-v-1ea9d450],
-.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__pause[data-v-1ea9d450],
-.modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__play[data-v-1ea9d450],
+.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__pause[data-v-1ea9d450], .modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__play[data-v-1ea9d450],
 .modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__pause[data-v-1ea9d450] {
   opacity: 1;
   border-radius: 22px;
-  background-color: #7f7f7f40;
+  background-color: rgba(127, 127, 127, 0.25);
 }
-.modal-header .icons-menu .play-pause-icons__play[data-v-1ea9d450],
-.modal-header .icons-menu .play-pause-icons__pause[data-v-1ea9d450] {
+.modal-header .icons-menu .play-pause-icons__play[data-v-1ea9d450], .modal-header .icons-menu .play-pause-icons__pause[data-v-1ea9d450] {
   box-sizing: border-box;
   width: 44px;
   height: 44px;
   margin: 3px;
   cursor: pointer;
-  opacity: .7;
+  opacity: 0.7;
 }
 .modal-header .icons-menu .header-actions[data-v-1ea9d450] {
-  color: #fff;
+  color: white;
 }
-.modal-header .icons-menu[data-v-1ea9d450] .action-item {
+.modal-header .icons-menu[data-v-1ea9d450]  .action-item {
   margin: 3px;
 }
-.modal-header .icons-menu[data-v-1ea9d450] .action-item--single {
+.modal-header .icons-menu[data-v-1ea9d450]  .action-item--single {
   box-sizing: border-box;
   width: 44px;
   height: 44px;
@@ -134,8 +135,7 @@
 .modal-header .icons-menu[data-v-1ea9d450] .action-item__menutoggle {
   padding: 0;
 }
-.modal-header .icons-menu[data-v-1ea9d450] .action-item__menutoggle span,
-.modal-header .icons-menu[data-v-1ea9d450] .action-item__menutoggle svg {
+.modal-header .icons-menu[data-v-1ea9d450] .action-item__menutoggle span, .modal-header .icons-menu[data-v-1ea9d450] .action-item__menutoggle svg {
   width: var(--icon-size);
   height: var(--icon-size);
 }
@@ -146,6 +146,8 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
+  /* Navigation buttons */
+  /* Content */
 }
 .modal-wrapper .prev[data-v-1ea9d450],
 .modal-wrapper .next[data-v-1ea9d450] {
@@ -153,8 +155,8 @@
   height: 35vh;
   min-height: 300px;
   position: absolute;
-  transition: opacity .25s;
-  color: #fff;
+  transition: opacity 250ms;
+  color: white;
 }
 .modal-wrapper .prev[data-v-1ea9d450]:focus-visible,
 .modal-wrapper .next[data-v-1ea9d450]:focus-visible {
@@ -171,11 +173,11 @@
   position: relative;
   display: flex;
   padding: 0;
-  transition: transform .3s ease;
+  transition: transform 300ms ease;
   border-radius: var(--border-radius-large);
   background-color: var(--color-main-background);
   color: var(--color-main-text);
-  box-shadow: 0 0 40px #0003;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
 }
 .modal-wrapper .modal-container__close[data-v-1ea9d450] {
   z-index: 1;
@@ -211,7 +213,7 @@
   border-radius: 0;
 }
 @media only screen and ((max-width: 512px) or (max-height: 400px)) {
-  .modal-wrapper .modal-container[data-v-1ea9d450] {
+.modal-wrapper .modal-container[data-v-1ea9d450] {
     max-width: initial;
     width: 100%;
     max-height: initial;
@@ -219,11 +221,13 @@
     position: absolute;
     top: 50px;
     border-radius: 0;
-  }
 }
+}
+
+/* TRANSITIONS */
 .fade-enter-active[data-v-1ea9d450],
 .fade-leave-active[data-v-1ea9d450] {
-  transition: opacity .25s;
+  transition: opacity 250ms;
 }
 .fade-enter[data-v-1ea9d450],
 .fade-leave-to[data-v-1ea9d450] {
@@ -238,7 +242,7 @@
 .modal-in-leave-active[data-v-1ea9d450],
 .modal-out-enter-active[data-v-1ea9d450],
 .modal-out-leave-active[data-v-1ea9d450] {
-  transition: opacity .25s;
+  transition: opacity 250ms;
 }
 .modal-in-enter[data-v-1ea9d450],
 .modal-in-leave-to[data-v-1ea9d450],
@@ -248,7 +252,7 @@
 }
 .modal-in-enter .modal-container[data-v-1ea9d450],
 .modal-in-leave-to .modal-container[data-v-1ea9d450] {
-  transform: scale(.9);
+  transform: scale(0.9);
 }
 .modal-out-enter .modal-container[data-v-1ea9d450],
 .modal-out-leave-to .modal-container[data-v-1ea9d450] {
@@ -261,7 +265,7 @@
   transform: rotate(-90deg);
 }
 .modal-mask .play-pause-icons .progress-ring .progress-ring__circle[data-v-1ea9d450] {
-  transition: .1s stroke-dashoffset;
+  transition: 100ms stroke-dashoffset;
   transform-origin: 50% 50%;
   animation: progressring-1ea9d450 linear var(--slideshow-duration) infinite;
   stroke-linecap: round;
@@ -269,27 +273,27 @@
   stroke-dasharray: 94.2477796077;
 }
 .modal-mask .play-pause-icons--paused .icon-pause[data-v-1ea9d450] {
-  animation: breath-1ea9d450 2s cubic-bezier(.4, 0, .2, 1) infinite;
+  animation: breath-1ea9d450 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 .modal-mask .play-pause-icons--paused .progress-ring__circle[data-v-1ea9d450] {
   animation-play-state: paused !important;
 }
 @keyframes progressring-1ea9d450 {
-  0% {
+from {
     stroke-dashoffset: 94.2477796077;
-  }
-  to {
+}
+to {
     stroke-dashoffset: 0;
-  }
+}
 }
 @keyframes breath-1ea9d450 {
-  0% {
+0% {
     opacity: 1;
-  }
-  50% {
+}
+50% {
     opacity: 0;
-  }
-  to {
+}
+100% {
     opacity: 1;
-  }
 }
+}

package/dist/assets/{NcNoteCard-B_Q1mnCM.css → NcNoteCard-e7-Bxio8.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-722d543a] {
   display: flex;
   align-self: center;
@@ -33,6 +36,7 @@
   border-inline-start: 4px solid var(--note-theme);
   border-radius: var(--border-radius);
   margin: 1rem 0;
+  margin-top: 1rem;
   padding: 1rem;
   display: flex;
   flex-direction: row;
@@ -40,21 +44,21 @@
 }
 .notecard__icon--heading[data-v-722d543a] {
   margin-bottom: auto;
-  margin-top: .3rem;
+  margin-top: 0.3rem;
 }
 .notecard--success[data-v-722d543a] {
-  --note-background: rgba(var(--color-success-rgb), .1);
+  --note-background: rgba(var(--color-success-rgb), 0.1);
   --note-theme: var(--color-success);
 }
 .notecard--info[data-v-722d543a] {
-  --note-background: rgba(var(--color-info-rgb), .1);
+  --note-background: rgba(var(--color-info-rgb), 0.1);
   --note-theme: var(--color-info);
 }
 .notecard--error[data-v-722d543a] {
-  --note-background: rgba(var(--color-error-rgb), .1);
+  --note-background: rgba(var(--color-error-rgb), 0.1);
   --note-theme: var(--color-error);
 }
 .notecard--warning[data-v-722d543a] {
-  --note-background: rgba(var(--color-warning-rgb), .1);
+  --note-background: rgba(var(--color-warning-rgb), 0.1);
   --note-theme: var(--color-warning);
-}
+}

package/dist/assets/{NcPopover-wrgZy49g.css → NcPopover-BwI1hPzy.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon {
   display: flex;
   align-self: center;
@@ -104,4 +107,4 @@
   visibility: visible;
   transition: opacity var(--animation-quick);
   opacity: 1;
-}
+}

package/dist/assets/{NcProgressBar-DDj4bmBB.css → NcProgressBar-D5VftcJm.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-bfe47e7c] {
   display: flex;
   align-self: center;
@@ -64,4 +67,4 @@
 }
 .progress-bar--error[data-v-bfe47e7c]::-webkit-progress-value {
   background: var(--color-error) !important;
-}
+}