@sdata/web-vue 1.5.0 → 1.7.0

package/es/_components/select-view/style/index.css

@@ -1,3 +1,21 @@
+@charset "UTF-8";
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
 /******** 基础配置项 end *******/
 /******** 基础配置项 end *******/
 /******** 高级配置项 *******/
@@ -37,12 +55,12 @@
   background-color: var(--color-fill-2);
   border-color: transparent;
 }
-.sd-tag-checkable.sd-tag-checked:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked:hover {
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
 .sd-tag-bordered,
-.sd-tag-checkable.sd-tag-checked.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-bordered:hover {
   border-color: var(--color-border-2);
 }
 .sd-tag-size-small {
@@ -76,283 +94,238 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.sd-tag.sd-tag-checked.sd-tag-red {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-red {
   color: rgb(var(--red-6));
   background-color: rgb(var(--red-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--red-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-red.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
   background-color: rgb(var(--red-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-red.sd-tag-bordered,
-.sd-tag-checked.sd-tag-red.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-red.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-red.sd-tag-bordered:hover {
   border-color: rgb(var(--red-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-red .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-red .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-red .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-red .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-red .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-red .sd-tag-loading-icon {
   color: rgb(var(--red-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-orangered {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-orangered {
   color: rgb(var(--orangered-6));
   background-color: rgb(var(--orangered-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--orangered-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-orangered.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
   background-color: rgb(var(--orangered-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-orangered.sd-tag-bordered,
-.sd-tag-checked.sd-tag-orangered.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-orangered.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-orangered.sd-tag-bordered:hover {
   border-color: rgb(var(--orangered-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-orangered .sd-tag-loading-icon {
   color: rgb(var(--orangered-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-orange {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-orange {
   color: rgb(var(--orange-6));
   background-color: rgb(var(--orange-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--orange-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-orange.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
   background-color: rgb(var(--orange-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-orange.sd-tag-bordered,
-.sd-tag-checked.sd-tag-orange.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-orange.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-orange.sd-tag-bordered:hover {
   border-color: rgb(var(--orange-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-orange .sd-tag-loading-icon {
   color: rgb(var(--orange-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-gold {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-gold {
   color: rgb(var(--gold-6));
   background-color: rgb(var(--gold-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--gold-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-gold.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
   background-color: rgb(var(--gold-3));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-gold.sd-tag-bordered,
-.sd-tag-checked.sd-tag-gold.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-gold.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-gold.sd-tag-bordered:hover {
   border-color: rgb(var(--gold-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-gold .sd-tag-loading-icon {
   color: rgb(var(--gold-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-lime {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-lime {
   color: rgb(var(--lime-6));
   background-color: rgb(var(--lime-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--lime-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-lime.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
   background-color: rgb(var(--lime-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-lime.sd-tag-bordered,
-.sd-tag-checked.sd-tag-lime.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-lime.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-lime.sd-tag-bordered:hover {
   border-color: rgb(var(--lime-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-lime .sd-tag-loading-icon {
   color: rgb(var(--lime-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-green {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-green {
   color: rgb(var(--green-6));
   background-color: rgb(var(--green-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--green-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-green.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
   background-color: rgb(var(--green-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-green.sd-tag-bordered,
-.sd-tag-checked.sd-tag-green.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-green.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-green.sd-tag-bordered:hover {
   border-color: rgb(var(--green-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-green .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-green .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-green .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-green .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-green .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-green .sd-tag-loading-icon {
   color: rgb(var(--green-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-cyan {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-cyan {
   color: rgb(var(--cyan-6));
   background-color: rgb(var(--cyan-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--cyan-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-cyan.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
   background-color: rgb(var(--cyan-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-cyan.sd-tag-bordered,
-.sd-tag-checked.sd-tag-cyan.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-cyan.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-cyan.sd-tag-bordered:hover {
   border-color: rgb(var(--cyan-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-cyan .sd-tag-loading-icon {
   color: rgb(var(--cyan-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-blue {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-blue {
   color: rgb(var(--blue-6));
   background-color: rgb(var(--blue-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--blue-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-blue.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
   background-color: rgb(var(--blue-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-blue.sd-tag-bordered,
-.sd-tag-checked.sd-tag-blue.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-blue.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-blue.sd-tag-bordered:hover {
   border-color: rgb(var(--blue-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-blue .sd-tag-loading-icon {
   color: rgb(var(--blue-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-sdblue {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-sdblue {
   color: rgb(var(--sdblue-6));
   background-color: rgb(var(--sdblue-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--sdblue-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-sdblue.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
   background-color: rgb(var(--sdblue-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-sdblue.sd-tag-bordered,
-.sd-tag-checked.sd-tag-sdblue.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-sdblue.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-sdblue.sd-tag-bordered:hover {
   border-color: rgb(var(--sdblue-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-sdblue .sd-tag-loading-icon {
   color: rgb(var(--sdblue-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-purple {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-purple {
   color: rgb(var(--purple-6));
   background-color: rgb(var(--purple-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--purple-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-purple.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
   background-color: rgb(var(--purple-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-purple.sd-tag-bordered,
-.sd-tag-checked.sd-tag-purple.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-purple.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-purple.sd-tag-bordered:hover {
   border-color: rgb(var(--purple-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-purple .sd-tag-loading-icon {
   color: rgb(var(--purple-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-pinkpurple {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-pinkpurple {
   color: rgb(var(--pinkpurple-6));
   background-color: rgb(var(--pinkpurple-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--pinkpurple-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
   background-color: rgb(var(--pinkpurple-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered,
-.sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-pinkpurple.sd-tag-bordered:hover {
   border-color: rgb(var(--pinkpurple-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-pinkpurple .sd-tag-loading-icon {
   color: rgb(var(--pinkpurple-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-magenta {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-magenta {
   color: rgb(var(--magenta-6));
   background-color: rgb(var(--magenta-1));
   border: 1px solid transparent;
 }
-.sd-tag.sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgb(var(--magenta-2));
 }
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-magenta.sd-tag:hover {
+.sd-tag .sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
   background-color: rgb(var(--magenta-2));
   border-color: transparent;
 }
-.sd-tag-checked.sd-tag-magenta.sd-tag-bordered,
-.sd-tag-checked.sd-tag-magenta.sd-tag-bordered:hover {
+.sd-tag .sd-tag-checked.sd-tag-magenta.sd-tag-bordered,
+.sd-tag .sd-tag-checked.sd-tag-magenta.sd-tag-bordered:hover {
   border-color: rgb(var(--magenta-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-loading-icon {
+.sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-icon, .sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-close-btn, .sd-tag.sd-tag-checked.sd-tag-magenta .sd-tag-loading-icon {
   color: rgb(var(--magenta-6));
 }
-.sd-tag.sd-tag-checked.sd-tag-gray {
-  color: rgb(var(--gray-6));
-  background-color: rgb(var(--gray-2));
-  border: 1px solid transparent;
-}
-.sd-tag.sd-tag-checked.sd-tag-gray .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgb(var(--gray-3));
-}
-.sd-tag.sd-tag-checkable.sd-tag-checked.sd-tag-gray.sd-tag:hover {
-  background-color: rgb(var(--gray-3));
-  border-color: transparent;
-}
-.sd-tag-checked.sd-tag-gray.sd-tag-bordered,
-.sd-tag-checked.sd-tag-gray.sd-tag-bordered:hover {
-  border-color: rgb(var(--gray-6));
-}
-.sd-tag.sd-tag-checked.sd-tag-gray .sd-tag-icon,
-.sd-tag.sd-tag-checked.sd-tag-gray .sd-tag-close-btn,
-.sd-tag.sd-tag-checked.sd-tag-gray .sd-tag-loading-icon {
-  color: rgb(var(--gray-6));
-}
-.sd-tag.sd-tag-custom-color {
+.sd-tag .sd-tag.sd-tag-custom-color {
   color: var(--color-white);
 }
-.sd-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
+.sd-tag .sd-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
 .sd-tag .sd-tag-close-btn {
@@ -366,126 +339,119 @@
   margin-left: 4px;
   font-size: 12px;
 }
-body[sd-theme='dark'] .sd-tag-checked {
+
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked {
   color: rgba(255, 255, 255, 0.9);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-red {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-red {
   background-color: rgba(var(--red-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-red .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--red-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-red:hover {
   background-color: rgba(var(--red-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-orangered {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orangered {
   background-color: rgba(var(--orangered-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orangered .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--orangered-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-orangered:hover {
   background-color: rgba(var(--orangered-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-orange {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orange {
   background-color: rgba(var(--orange-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-orange .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--orange-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-orange:hover {
   background-color: rgba(var(--orange-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-gold {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-gold {
   background-color: rgba(var(--gold-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-gold .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--gold-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-gold:hover {
   background-color: rgba(var(--gold-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-lime {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-lime {
   background-color: rgba(var(--lime-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-lime .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--lime-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-lime:hover {
   background-color: rgba(var(--lime-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-green {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-green {
   background-color: rgba(var(--green-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-green .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--green-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-green:hover {
   background-color: rgba(var(--green-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-cyan {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-cyan {
   background-color: rgba(var(--cyan-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-cyan .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--cyan-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-cyan:hover {
   background-color: rgba(var(--cyan-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-blue {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-blue {
   background-color: rgba(var(--blue-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-blue .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--blue-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-blue:hover {
   background-color: rgba(var(--blue-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-sdblue {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-sdblue {
   background-color: rgba(var(--sdblue-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-sdblue .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--sdblue-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-sdblue:hover {
   background-color: rgba(var(--sdblue-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-purple {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-purple {
   background-color: rgba(var(--purple-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-purple .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--purple-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-purple:hover {
   background-color: rgba(var(--purple-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-pinkpurple {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-pinkpurple {
   background-color: rgba(var(--pinkpurple-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-pinkpurple .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--pinkpurple-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-pinkpurple:hover {
   background-color: rgba(var(--pinkpurple-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-magenta {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-magenta {
   background-color: rgba(var(--magenta-6), 0.2);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checked.sd-tag-magenta .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(var(--magenta-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-tag-checkable.sd-tag-checked.sd-tag-magenta:hover {
   background-color: rgba(var(--magenta-6), 0.35);
 }
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-gray {
-  background-color: rgba(var(--gray-6), 0.2);
-}
-body[sd-theme='dark'] .sd-tag-checked.sd-tag-gray .sd-icon-hover.sd-tag-icon-hover:hover::before {
-  background-color: rgba(var(--gray-6), 0.35);
-}
-body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
-  background-color: rgba(var(--gray-6), 0.35);
-}
+
 .sd-tag-rtl {
   direction: rtl;
 }
@@ -493,34 +459,23 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   margin-right: 0;
   margin-left: 4px;
 }
-.sd-tag-rtl .sd-tag-close-btn,
-.sd-tag-rtl .sd-tag-loading-icon {
+.sd-tag-rtl .sd-tag-close-btn, .sd-tag-rtl .sd-tag-loading-icon {
   margin-right: 4px;
   margin-left: 0;
 }
+
 /**********************************************
  * size: mini / small / default / large
  **********************************************/
 /****************************************************
  * status: default / error / disabled _ (hover / focus)
  ****************************************************/
-/******** borderSize *******/
-/******** borderStyle *******/
-/******** radius *******/
-/******** shadow distance *******/
-/******** size *******/
-/******** spacing *******/
-/******** shadow *******/
-/******** opacity *******/
-/******** fontSize *******/
-/******** fontWeight ********/
-/******** Primary *******/
-/******** success *******/
-/******** warning *******/
-/******** danger *******/
-/******** link *******/
-/******** radius *******/
-/********* icon hover *********/
+.sd-select-view-single.sd-select-view-search {
+  cursor: text;
+}
+.sd-select-view-single.sd-select-view-search .sd-select-view-value {
+  pointer-events: none;
+}
 .sd-select-view-single {
   display: inline-flex;
   box-sizing: border-box;
@@ -534,20 +489,12 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   border-radius: var(--border-radius-small);
   cursor: text;
   transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
-  cursor: pointer;
-}
-.sd-select-view-single.sd-select-view-search {
-  cursor: text;
-}
-.sd-select-view-single.sd-select-view-search .sd-select-view-value {
-  pointer-events: none;
 }
 .sd-select-view-single:hover {
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-select-view-single:focus-within,
-.sd-select-view-single.sd-select-view-focus {
+.sd-select-view-single:focus-within, .sd-select-view-single.sd-select-view-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
@@ -576,8 +523,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   background-color: var(--color-danger-light-2);
   border-color: transparent;
 }
-.sd-select-view-single.sd-select-view-error:focus-within,
-.sd-select-view-single.sd-select-view-error.sd-select-view-single-focus {
+.sd-select-view-single.sd-select-view-error:focus-within, .sd-select-view-single.sd-select-view-error.sd-select-view-single-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
@@ -635,6 +581,9 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-select-view-single:not(.sd-select-view-focus) .sd-select-view-icon-hover:hover::before {
   background-color: var(--color-fill-4);
 }
+.sd-select-view-single {
+  cursor: pointer;
+}
 .sd-select-view-single .sd-select-view-input {
   width: 100%;
   padding-right: 0;
@@ -675,13 +624,12 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   font-size: 0;
   line-height: 0;
   visibility: hidden;
-  content: '.';
+  content: ".";
 }
 .sd-select-view-single .sd-select-view-value-hidden {
   display: none;
 }
-.sd-select-view-single.sd-select-view-size-mini .sd-select-view-input,
-.sd-select-view-single.sd-select-view-size-mini .sd-select-view-value {
+.sd-select-view-single.sd-select-view-size-mini .sd-select-view-input, .sd-select-view-single.sd-select-view-size-mini .sd-select-view-value {
   /* prettier-ignore */
   padding-top: 1px;
   /* prettier-ignore */
@@ -692,8 +640,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-select-view-single.sd-select-view-size-mini .sd-select-view-value {
   min-height: 22px;
 }
-.sd-select-view-single.sd-select-view-size-medium .sd-select-view-input,
-.sd-select-view-single.sd-select-view-size-medium .sd-select-view-value {
+.sd-select-view-single.sd-select-view-size-medium .sd-select-view-input, .sd-select-view-single.sd-select-view-size-medium .sd-select-view-value {
   /* prettier-ignore */
   padding-top: 4px;
   /* prettier-ignore */
@@ -704,8 +651,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-select-view-single.sd-select-view-size-medium .sd-select-view-value {
   min-height: 30px;
 }
-.sd-select-view-single.sd-select-view-size-small .sd-select-view-input,
-.sd-select-view-single.sd-select-view-size-small .sd-select-view-value {
+.sd-select-view-single.sd-select-view-size-small .sd-select-view-input, .sd-select-view-single.sd-select-view-size-small .sd-select-view-value {
   /* prettier-ignore */
   padding-top: 2px;
   /* prettier-ignore */
@@ -716,8 +662,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-select-view-single.sd-select-view-size-small .sd-select-view-value {
   min-height: 26px;
 }
-.sd-select-view-single.sd-select-view-size-large .sd-select-view-input,
-.sd-select-view-single.sd-select-view-size-large .sd-select-view-value {
+.sd-select-view-single.sd-select-view-size-large .sd-select-view-input, .sd-select-view-single.sd-select-view-size-large .sd-select-view-value {
   /* prettier-ignore */
   padding-top: 6px;
   /* prettier-ignore */
@@ -746,8 +691,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-select-view-multiple:focus-within,
-.sd-select-view-multiple.sd-select-view-focus {
+.sd-select-view-multiple:focus-within, .sd-select-view-multiple.sd-select-view-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
@@ -776,8 +720,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   background-color: var(--color-danger-light-2);
   border-color: transparent;
 }
-.sd-select-view-multiple.sd-select-view-error:focus-within,
-.sd-select-view-multiple.sd-select-view-error.sd-select-view-multiple-focus {
+.sd-select-view-multiple.sd-select-view-error:focus-within, .sd-select-view-multiple.sd-select-view-error.sd-select-view-multiple-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
@@ -887,7 +830,6 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   cursor: inherit;
   appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  box-sizing: border-box;
 }
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input::placeholder {
   color: var(--color-text-3);
@@ -898,6 +840,9 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-select-view-multiple .sd-select-view-inner .sd-select-view-input[disabled] {
   -webkit-text-fill-color: var(--color-text-4);
 }
+.sd-select-view-multiple .sd-select-view-inner .sd-select-view-input {
+  box-sizing: border-box;
+}
 .sd-select-view-multiple .sd-select-view-mirror {
   position: absolute;
   top: 0;
@@ -918,8 +863,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-3);
 }
-.sd-select-view-multiple.sd-select-view-readonly,
-.sd-select-view-multiple.sd-select-view-disabled-input {
+.sd-select-view-multiple.sd-select-view-readonly, .sd-select-view-multiple.sd-select-view-disabled-input {
   cursor: default;
 }
 .sd-select-view-multiple.sd-select-view-size-mini {
@@ -1001,7 +945,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-select-view-multiple.sd-select-view-disabled-input {
   cursor: pointer;
 }
-.sd-select-view.sd-select-view-borderless {
+.sd-select-view .sd-select-view.sd-select-view-borderless {
   background: none !important;
   border: none !important;
   box-shadow: none !important;
@@ -1009,8 +953,7 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 .sd-select-view-suffix .sd-feedback-icon {
   margin-left: 4px;
 }
-.sd-select-view-clear-btn svg,
-.sd-select-view-icon svg {
+.sd-select-view-clear-btn svg, .sd-select-view-icon svg {
   display: block;
   font-size: 12px;
 }
@@ -1029,4 +972,4 @@ body[sd-theme='dark'] .sd-tag-checkable.sd-tag-checked.sd-tag-gray:hover {
 }
 .sd-select-view:hover .sd-select-view-clear-btn ~ * {
   display: none;
-}
+}