@watermarkinsights/ripple 5.13.0 → 5.13.1-0

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.css

@@ -0,0 +1,1497 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+:host {
+  --wmcolor-chart-label-text-negative: var(--wmcolor-text-negative);
+  --wmcolor-chart-label-text-positive: var(--wmcolor-text-positive);
+  --wmcolor-chart-label-text: var(--wmcolor-text);
+  --wmcolor-chart-subinfo-text: var(--wmcolor-text);
+  --wmcolor-chart-value-text: var(--wmcolor-text);
+  --wmcolor-chart-gridline: var(--wmcolor-border);
+  --custom-label-width: 12rem;
+  display: block;
+}
+
+:host .component-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 0.875rem;
+  position: relative;
+  outline: none;
+  /* TYPE-SPECIFIC STUFF */
+}
+
+:host .component-wrapper:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: 2px;
+}
+
+:host .component-wrapper .label {
+  display: block;
+  margin: 0;
+  padding-block-end: 0.25rem;
+  font-weight: 600;
+  position: relative;
+}
+
+:host .component-wrapper .label .subinfo {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  inset-block-end: 0.25rem;
+  width: 100%;
+  color: var(--wmcolor-chart-subinfo-text);
+}
+
+:host .component-wrapper .label.--none {
+  display: none;
+}
+
+:host .component-wrapper .doughnut-svg,
+:host .component-wrapper .inner-stacked-bar-wrapper {
+  overflow: visible;
+}
+
+:host .component-wrapper .bar-wrapper {
+  flex-grow: 1;
+  width: 100%;
+}
+
+:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper {
+  width: 100%;
+}
+
+:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values {
+  display: flex;
+  gap: 2px;
+  margin-block-end: 8px;
+}
+
+:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values.none {
+  margin: 0;
+}
+
+:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper {
+  display: flex;
+  gap: 2px;
+}
+
+:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment {
+  height: 30px;
+  cursor: pointer;
+}
+
+:host .component-wrapper .segment {
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
+:host .component-wrapper .segment.fixed-width {
+  flex-shrink: 0;
+}
+
+:host .component-wrapper .doughnut-wrapper {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
+}
+
+:host .component-wrapper .doughnut-wrapper .doughnut-segment {
+  cursor: pointer;
+}
+
+:host .component-wrapper .value-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+:host .component-wrapper .value-wrapper .fixed-width {
+  flex-shrink: 0;
+}
+
+:host .component-wrapper .value-wrapper .value.hidden {
+  visibility: hidden;
+}
+
+:host .component-wrapper .faded {
+  opacity: 0.3;
+}
+
+:host .component-wrapper path:active, :host .component-wrapper path:hover, :host .component-wrapper path:focus,
+:host .component-wrapper .stacked-bar-segment:active,
+:host .component-wrapper .stacked-bar-segment:hover,
+:host .component-wrapper .stacked-bar-segment:focus {
+  outline: none;
+}
+
+:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment:not(:focus-visible),
+:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment:not(:focus-visible),
+:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment:not(:focus-visible) {
+  -webkit-box-shadow: 0px 0px 6px #333;
+  -moz-box-shadow: 0px 0px 6px #333;
+  box-shadow: 0px 0px 6px #333;
+}
+
+:host .component-wrapper path:active.doughnut-segment:not(:focus-visible), :host .component-wrapper path:hover.doughnut-segment:not(:focus-visible), :host .component-wrapper path:focus.doughnut-segment:not(:focus-visible),
+:host .component-wrapper .stacked-bar-segment:active.doughnut-segment:not(:focus-visible),
+:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment:not(:focus-visible),
+:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment:not(:focus-visible) {
+  filter: url(#wmHoverDropShadow);
+}
+
+:host .component-wrapper path::-moz-focus-inner,
+:host .component-wrapper .stacked-bar-segment::-moz-focus-inner {
+  border: 0;
+  outline: none;
+}
+
+:host .component-wrapper .stacked-bar-segment:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 7px white;
+  z-index: 1;
+}
+
+:host .component-wrapper #kfbg1 {
+  stroke: white;
+  stroke-width: 10px;
+}
+
+:host .component-wrapper #kfstroke {
+  stroke: var(--wmcolor-interactive-focus);
+  stroke-width: 6px;
+}
+
+:host .component-wrapper #kfbg2 {
+  stroke: white;
+  stroke-width: 2px;
+}
+
+:host .component-wrapper.doughnut {
+  width: 300px;
+}
+
+:host .component-wrapper.doughnut1 label,
+:host .component-wrapper.doughnut1 .label-text, :host .component-wrapper.doughnut2 label,
+:host .component-wrapper.doughnut2 .label-text, :host .component-wrapper.doughnut3 label,
+:host .component-wrapper.doughnut3 .label-text {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+}
+
+:host .component-wrapper.doughnut {
+  align-items: center;
+}
+
+:host .component-wrapper.doughnut label {
+  text-align: center;
+  width: 100%;
+  padding-block-end: 1.5rem;
+}
+
+:host .component-wrapper.doughnut label .subinfo {
+  position: absolute;
+}
+
+:host .component-wrapper.doughnut .completion-message {
+  padding-block-start: 0.625rem;
+}
+
+:host .component-wrapper.bar {
+  align-items: flex-start;
+}
+
+:host .component-wrapper.bar label {
+  display: flex;
+  flex-direction: column;
+  width: unset;
+}
+
+:host .component-wrapper.bar label .subinfo {
+  position: initial;
+}
+
+:host .component-wrapper.bar .chart-wrapper {
+  display: flex;
+}
+
+:host .component-wrapper.bar .chart-wrapper .single-perc {
+  width: 4rem;
+  flex: none;
+  display: flex;
+  height: 30px;
+  align-items: center;
+}
+
+:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper {
+  flex: 1;
+}
+
+:host .component-wrapper.bar .chart-wrapper .completion-message {
+  width: 100%;
+  text-align: end;
+  margin-block-start: 0.25rem;
+}
+
+@media screen and (min-width: 768px) {
+  :host .component-wrapper.bar {
+    flex-direction: row;
+  }
+  :host .component-wrapper.bar label {
+    display: flex;
+    justify-content: center;
+    min-height: 30px;
+    width: var(--custom-label-width);
+    text-align: start;
+    padding-inline-end: 1.25rem;
+    padding-block-end: 0;
+    flex: none;
+  }
+  :host .component-wrapper.bar .bar-wrapper {
+    flex-direction: row-reverse;
+  }
+  :host .component-wrapper.bar .bar-wrapper .single-perc {
+    text-align: center;
+    padding-inline-start: 0.5rem;
+    justify-content: center;
+  }
+}
+:host .component-wrapper.bar2, :host .component-wrapper.bar3, :host .component-wrapper.bar4, :host .component-wrapper.bar5 {
+  align-items: flex-start;
+}
+
+:host .component-wrapper.bar4 .inner-stacked-bar-wrapper, :host .component-wrapper.bar5 .inner-stacked-bar-wrapper {
+  height: 30px;
+  margin-block-end: 0;
+}
+
+:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values, :host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values {
+  height: 60px;
+  margin-block-start: 0;
+}
+
+:host .component-wrapper.bar3 .chart-wrapper {
+  position: relative;
+  height: 116px;
+}
+
+:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper {
+  position: absolute;
+  inset-block-start: 35px;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  height: 30px;
+}
+
+:host .component-wrapper.bar3 .chart-wrapper .axis {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  overflow: visible;
+  transform: translate(0px, 96px);
+}
+
+:host .component-wrapper.bar3 .chart-wrapper .axis line {
+  stroke: var(--wmcolor-chart-gridline);
+  stroke-width: 1px;
+}
+
+:host .component-wrapper.bar3 .hidden-values-warning {
+  margin-block-start: 1.25rem;
+}
+
+:host .component-wrapper.bar3 .bar3-axis-label {
+  position: absolute;
+  inset-block-end: -4px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+:host .component-wrapper.bar6, :host .component-wrapper.bar7 {
+  --chartPadding: 48px;
+  align-items: flex-start;
+}
+
+:host .component-wrapper.bar6 .chart-wrapper, :host .component-wrapper.bar7 .chart-wrapper {
+  width: 100%;
+}
+
+:host .component-wrapper.bar6 .chart, :host .component-wrapper.bar7 .chart {
+  position: relative;
+  padding-inline-end: var(--chartPadding);
+}
+
+:host .component-wrapper.bar6 .gridlines, :host .component-wrapper.bar7 .gridlines {
+  position: absolute;
+  inset-inline-start: var(--labelWidth);
+  inset-inline-end: var(--chartPadding);
+  inset-block-start: 0;
+  inset-block-end: 0;
+  background-image: linear-gradient(90deg, var(--wmcolor-chart-gridline) 1px, transparent 1px);
+  background-position: -1px;
+  border-inline-start: 1px solid var(--wmcolor-chart-gridline);
+  border-block-end: 1px solid var(--wmcolor-chart-gridline);
+  background-size: var(--backgroundSize);
+}
+
+:host .component-wrapper.bar6 .rows, :host .component-wrapper.bar7 .rows {
+  display: grid;
+  grid-template-columns: var(--labelWidth) auto;
+  grid-auto-rows: minmax(30px, 1fr);
+  align-items: center;
+  /* Bring the bars above the absolutely positioned gridlines */
+  position: relative;
+  z-index: 1;
+}
+
+:host .component-wrapper.bar6 .rows .label, :host .component-wrapper.bar7 .rows .label {
+  font-weight: 400;
+  padding: 0 0.75rem 0 0;
+  text-align: end;
+  margin: 0.75rem 0;
+}
+
+:host .component-wrapper.bar6 .rows .label.hidden, :host .component-wrapper.bar7 .rows .label.hidden {
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+:host .component-wrapper.bar6 .bar, :host .component-wrapper.bar7 .bar {
+  height: 30px;
+  position: relative;
+}
+
+:host .component-wrapper.bar6 .bar .value, :host .component-wrapper.bar7 .bar .value {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: -0.5rem;
+  transform: translate(100%, -50%);
+}
+
+:host .component-wrapper.bar6 .x-axis, :host .component-wrapper.bar7 .x-axis {
+  margin-inline-start: var(--labelWidth);
+  margin-inline-end: var(--chartPadding);
+  display: flex;
+  postion: relative;
+}
+
+:host .component-wrapper.bar6 .tick, :host .component-wrapper.bar7 .tick {
+  flex: 1;
+  text-align: end;
+}
+
+:host .component-wrapper.bar6 .tick span, :host .component-wrapper.bar7 .tick span {
+  transform: translateX(50%);
+  display: inline-block;
+}
+
+:host .component-wrapper.bar6 .zero, :host .component-wrapper.bar7 .zero {
+  position: absolute;
+  transform: translateX(-50%);
+}
+
+:host .component-wrapper.bar6 .bar:active, :host .component-wrapper.bar6 .bar:hover, :host .component-wrapper.bar6 .bar:focus, :host .component-wrapper.bar7 .bar:active, :host .component-wrapper.bar7 .bar:hover, :host .component-wrapper.bar7 .bar:focus {
+  outline: none;
+}
+
+:host .component-wrapper.bar6 .bar:active.bar:not(:focus-visible), :host .component-wrapper.bar6 .bar:hover.bar:not(:focus-visible), :host .component-wrapper.bar6 .bar:focus.bar:not(:focus-visible), :host .component-wrapper.bar7 .bar:active.bar:not(:focus-visible), :host .component-wrapper.bar7 .bar:hover.bar:not(:focus-visible), :host .component-wrapper.bar7 .bar:focus.bar:not(:focus-visible) {
+  -webkit-box-shadow: 0px 0px 6px #333;
+  -moz-box-shadow: 0px 0px 6px #333;
+  box-shadow: 0px 0px 6px #333;
+}
+
+:host .component-wrapper.bar6 .bar:focus-visible, :host .component-wrapper.bar7 .bar:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 7px white;
+  z-index: 1;
+}
+
+:host .component-wrapper.left-label {
+  flex-direction: row;
+}
+
+:host .component-wrapper.left-label .label {
+  width: 12rem;
+  padding-inline-end: 1.25rem;
+  flex: none;
+  align-self: flex-end;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+}
+
+:host .component-wrapper .hidden-values-warning {
+  font-size: 0.75rem;
+  font-style: italic;
+  max-width: 100%;
+}
+
+:host .component-wrapper .hidden-values-warning.hidden {
+  display: none;
+}
+
+@media print {
+  :host .component-wrapper .hidden-values-warning {
+    display: none;
+  }
+}
+:host #chart-instructions {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  white-space: nowrap !important;
+  margin: -1px !important;
+}
+
+:host .component-wrapper .legend-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+:host .component-wrapper .legend-wrapper .legend {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  text-align: center;
+  padding-block-start: 0.25rem;
+  padding-block-end: 0.75rem;
+  box-sizing: border-box;
+}
+
+:host .component-wrapper .legend-wrapper .legend.bar6 {
+  display: none;
+}
+
+:host .component-wrapper .legend-wrapper .legend.--top {
+  margin-block-start: -0.75rem;
+}
+
+:host .component-wrapper .legend-wrapper .legend.--top .legend-item {
+  padding-block-start: 0.75rem;
+}
+
+:host .component-wrapper .legend-wrapper .legend.--top .legend-color {
+  inset-block-start: 0.75rem;
+}
+
+:host .component-wrapper .legend-wrapper .legend.--bottom {
+  margin-block-end: -0.75rem;
+}
+
+:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item {
+  padding-block-end: 0.75rem;
+}
+
+:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color {
+  inset-block-start: -0.75rem;
+}
+
+:host .component-wrapper .legend-wrapper .legend .legend-item {
+  position: relative;
+}
+
+:host .component-wrapper .legend-wrapper .legend .legend-item.faded {
+  opacity: 0.3;
+}
+
+:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type) {
+  padding-inline-end: 1.25rem;
+}
+
+:host .component-wrapper .legend-wrapper .legend .legend-text {
+  font-size: 0.875rem;
+  padding-inline-start: 1rem;
+  line-height: 1;
+}
+
+:host .component-wrapper .legend-wrapper .legend .legend-color {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  margin: auto;
+  width: 0.6875rem;
+  height: 0.6875rem;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+}
+
+:host .component-wrapper .legend-wrapper .legend .print-value {
+  display: none;
+}
+
+:host .component-wrapper .legend-wrapper .legend .print-value.force-visible {
+  display: unset;
+}
+
+@media print {
+  :host .component-wrapper .legend-wrapper .legend .print-value {
+    display: unset;
+  }
+}
+:host .component-wrapper .legend-wrapper .legend.bar3 {
+  padding-block-end: 1.25rem;
+}
+
+.svg-icon {
+  display: block;
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+}
+
+.svg-icon.horizontal {
+  transform: scaleX(-1);
+}
+
+.svg-icon.vertical {
+  transform: scaleY(-1);
+}
+
+.svg-icon.svg-add:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-add:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-archive:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-archive:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.54 5.23L19.15 3.55C18.88 3.21 18.47 3 18 3H6C5.53 3 5.12 3.21 4.84 3.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V6.5C21 6.02 20.83 5.57 20.54 5.23ZM12 17.5L6.5 12H10V10H14V12H17.5L12 17.5ZM5.12 5L5.93 4H17.93L18.87 5H5.12Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.54 5.23L19.15 3.55C18.88 3.21 18.47 3 18 3H6C5.53 3 5.12 3.21 4.84 3.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V6.5C21 6.02 20.83 5.57 20.54 5.23ZM12 17.5L6.5 12H10V10H14V12H17.5L12 17.5ZM5.12 5L5.93 4H17.93L18.87 5H5.12Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-add-person:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-add-person:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-add-outline:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-add-outline:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-ai:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-ai:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9L12,1Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-api-connected:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-api-connected:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M12 12Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M12 12Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-api-disconnected:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-api-disconnected:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19.8 22.6L17.15 20H6.5Q4.2 20 2.6 18.4T1 14.5Q1 12.58 2.19 11.08 3.38 9.57 5.25 9.15 5.33 8.95 5.4 8.76 5.5 8.57 5.55 8.35L1.4 4.2L2.8 2.8L21.2 21.2M6.5 18H15.15L7.1 9.95Q7.05 10.23 7.03 10.5 7 10.73 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M11.13 14M21.6 18.75L20.15 17.35Q20.58 17 20.79 16.54 21 16.08 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 11.33 6 10.7 6.16 10.07 6.33 9.5 6.68L8.05 5.23Q8.93 4.63 9.91 4.31 10.9 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 16.5 22.63 17.31 22.25 18.15 21.6 18.75M14.83 12.03Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-attach:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-attach:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-back:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-back:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-close:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-close:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-checkbox-selected:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-checkbox-selected:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-checkbox-blank:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-checkbox-blank:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-collapsed:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-collapsed:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-date:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-date:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-delete:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-delete:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-download:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-download:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-drilldown:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-drilldown:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M2,3h14v4H2V3 M2,10h20v4H2V10 M2,17h8v4H2V17z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M2,3h14v4H2V3 M2,10h20v4H2V10 M2,17h8v4H2V17z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-edit:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-edit:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-error:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-error:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-expand-less:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-expand-less:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-expand-more:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-expand-more:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-expanded:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-expanded:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-filter:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-filter:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-forward:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-forward:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-help-center:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-help-center:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-hide:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-hide:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-info:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-info:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-locked:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-locked:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-menu:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-menu:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-more-options:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-more-options:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-move-down:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-move-down:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-move-up:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-move-up:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-navigator-icon:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-navigator-icon:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' fill-rule='evenodd' clip-rule='evenodd' d='M21.9,11.5c0,5.5-4.4,9.9-9.9,9.9c-5.5,0-9.9-4.4-9.9-9.9C2.1,6,6.5,1.6,12,1.6 C17.5,1.6,21.9,6,21.9,11.5z M22.5,11.5C22.5,17.3,17.8,22,12,22C6.2,22,1.5,17.3,1.5,11.5C1.5,5.7,6.2,1,12,1 C17.8,1,22.5,5.7,22.5,11.5z M7.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3s0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S7.4,15.6,7.7,15.8z M11.2,15.8c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S10.9,15.6,11.2,15.8z M14.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,15.6,14.7,15.8z M7.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S7.4,12.1,7.7,12.3z M11.2,12.3c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,12.1,11.2,12.3z M14.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S14.4,12.1,14.7,12.3z M7.7,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3S9.7,8.3,9.7,8S9.6,7.4,9.3,7.2S8.8,6.8,8.5,6.8 S7.9,6.9,7.7,7.2S7.3,7.7,7.3,8S7.4,8.6,7.7,8.8z M11.2,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8 s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,8.6,11.2,8.8z M14.7,8.8 c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3 c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,8.6,14.7,8.8z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' fill-rule='evenodd' clip-rule='evenodd' d='M21.9,11.5c0,5.5-4.4,9.9-9.9,9.9c-5.5,0-9.9-4.4-9.9-9.9C2.1,6,6.5,1.6,12,1.6 C17.5,1.6,21.9,6,21.9,11.5z M22.5,11.5C22.5,17.3,17.8,22,12,22C6.2,22,1.5,17.3,1.5,11.5C1.5,5.7,6.2,1,12,1 C17.8,1,22.5,5.7,22.5,11.5z M7.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3s0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S7.4,15.6,7.7,15.8z M11.2,15.8c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S10.9,15.6,11.2,15.8z M14.7,15.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,15.6,14.7,15.8z M7.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S7.4,12.1,7.7,12.3z M11.2,12.3c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8 c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,12.1,11.2,12.3z M14.7,12.3c0.2,0.2,0.5,0.3,0.8,0.3 s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8 S14.4,12.1,14.7,12.3z M7.7,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3S9.7,8.3,9.7,8S9.6,7.4,9.3,7.2S8.8,6.8,8.5,6.8 S7.9,6.9,7.7,7.2S7.3,7.7,7.3,8S7.4,8.6,7.7,8.8z M11.2,8.8c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8 s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3c-0.2,0.2-0.3,0.5-0.3,0.8S10.9,8.6,11.2,8.8z M14.7,8.8 c0.2,0.2,0.5,0.3,0.8,0.3s0.6-0.1,0.8-0.3c0.2-0.2,0.3-0.5,0.3-0.8s-0.1-0.6-0.3-0.8c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3 c-0.2,0.2-0.3,0.5-0.3,0.8S14.4,8.6,14.7,8.8z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-next:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-next:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-notifications:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-notifications:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-open-in-new:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-open-in-new:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-pending:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-pending:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.3,19.3l1.1,1.8c-1,0.5-2.1,0.8-3.3,0.9v-2.1C13.8,19.8,14.6,19.6,15.3,19.3z M3.6,12.6H1.5 c0.1,1.2,0.4,2.3,0.9,3.3l1.8-1.1C3.9,14.1,3.7,13.3,3.6,12.6z M15.3,3.7l1.1-1.8c-1-0.5-2.1-0.8-3.3-0.9v2.1 C13.8,3.2,14.6,3.4,15.3,3.7z M20.4,10.4h2.1c-0.1-1.2-0.4-2.3-0.9-3.3l-1.8,1.1C20.1,8.9,20.3,9.7,20.4,10.4z M8.7,19.3l-1.1,1.8 c1,0.5,2.1,0.8,3.3,0.9v-2.1C10.2,19.8,9.4,19.6,8.7,19.3z M10.9,3.1V1C9.8,1.1,8.7,1.4,7.7,1.9l1.1,1.8C9.4,3.4,10.2,3.2,10.9,3.1 z M18.7,6.4l1.8-1.1c-0.7-0.9-1.5-1.7-2.4-2.4l-1.1,1.8C17.7,5.3,18.2,5.8,18.7,6.4z M4.2,8.2L2.4,7.2c-0.5,1-0.8,2.1-0.9,3.3h2.1 C3.7,9.7,3.9,8.9,4.2,8.2z M20.4,12.6c-0.1,0.8-0.3,1.5-0.6,2.2l1.8,1.1c0.5-1,0.8-2.1,0.9-3.3H20.4z M17.1,18.2l1.1,1.8 c0.9-0.7,1.7-1.5,2.4-2.4l-1.8-1.1C18.2,17.2,17.7,17.7,17.1,18.2z M6.9,4.8L5.8,2.9C4.9,3.6,4.1,4.4,3.5,5.3l1.8,1.1 C5.8,5.8,6.3,5.3,6.9,4.8z M5.3,16.6l-1.8,1.1c0.7,0.9,1.5,1.7,2.4,2.4l1.1-1.8C6.3,17.7,5.8,17.2,5.3,16.6z M13.1,6.2h-2.1v5.7 l4.5,4.5L17,15l-3.9-3.9V6.2z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.3,19.3l1.1,1.8c-1,0.5-2.1,0.8-3.3,0.9v-2.1C13.8,19.8,14.6,19.6,15.3,19.3z M3.6,12.6H1.5 c0.1,1.2,0.4,2.3,0.9,3.3l1.8-1.1C3.9,14.1,3.7,13.3,3.6,12.6z M15.3,3.7l1.1-1.8c-1-0.5-2.1-0.8-3.3-0.9v2.1 C13.8,3.2,14.6,3.4,15.3,3.7z M20.4,10.4h2.1c-0.1-1.2-0.4-2.3-0.9-3.3l-1.8,1.1C20.1,8.9,20.3,9.7,20.4,10.4z M8.7,19.3l-1.1,1.8 c1,0.5,2.1,0.8,3.3,0.9v-2.1C10.2,19.8,9.4,19.6,8.7,19.3z M10.9,3.1V1C9.8,1.1,8.7,1.4,7.7,1.9l1.1,1.8C9.4,3.4,10.2,3.2,10.9,3.1 z M18.7,6.4l1.8-1.1c-0.7-0.9-1.5-1.7-2.4-2.4l-1.1,1.8C17.7,5.3,18.2,5.8,18.7,6.4z M4.2,8.2L2.4,7.2c-0.5,1-0.8,2.1-0.9,3.3h2.1 C3.7,9.7,3.9,8.9,4.2,8.2z M20.4,12.6c-0.1,0.8-0.3,1.5-0.6,2.2l1.8,1.1c0.5-1,0.8-2.1,0.9-3.3H20.4z M17.1,18.2l1.1,1.8 c0.9-0.7,1.7-1.5,2.4-2.4l-1.8-1.1C18.2,17.2,17.7,17.7,17.1,18.2z M6.9,4.8L5.8,2.9C4.9,3.6,4.1,4.4,3.5,5.3l1.8,1.1 C5.8,5.8,6.3,5.3,6.9,4.8z M5.3,16.6l-1.8,1.1c0.7,0.9,1.5,1.7,2.4,2.4l1.1-1.8C6.3,17.7,5.8,17.2,5.3,16.6z M13.1,6.2h-2.1v5.7 l4.5,4.5L17,15l-3.9-3.9V6.2z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-previous:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-previous:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-remove:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-remove:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-remove-tag:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-remove-tag:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-reset:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-reset:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-restore:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-restore:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-rotate-right:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-rotate-right:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-save:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-save:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-search:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-search:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-shape-circle:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-shape-circle:before {
+  -webkit-mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z '/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z '/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-shape-pentagon:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-shape-pentagon:before {
+  -webkit-mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2.5L2,9.8L5.8,21.5H18.2L22,9.8L12,2.5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,2.5L2,9.8L5.8,21.5H18.2L22,9.8L12,2.5Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-shape-rhombus:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-shape-rhombus:before {
+  -webkit-mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-shape-star:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-shape-star:before {
+  -webkit-mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-shape-square:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-shape-square:before {
+  -webkit-mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M3,3V21H21V3'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M3,3V21H21V3'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-shape-triangle:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-shape-triangle:before {
+  -webkit-mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1,21H23L12,2'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1,21H23L12,2'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-shape-triangle-inverted:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-shape-triangle-inverted:before {
+  -webkit-mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1 3H23L12 22'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path style='fill: var(--icon-fill, currentColor)' d='M1 3H23L12 22'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-show:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-show:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-sort-a-to-z:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-sort-a-to-z:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5 9L6.41 10.41L11 5.83V22H13V5.83L17.59 10.42L19 9L12 2L5 9Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M5 9L6.41 10.41L11 5.83V22H13V5.83L17.59 10.42L19 9L12 2L5 9Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-sort-z-to-a:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-sort-z-to-a:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19 15L17.59 13.59L13 18.17V2H11V18.17L6.41 13.58L5 15L12 22L19 15Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M19 15L17.59 13.59L13 18.17V2H11V18.17L6.41 13.58L5 15L12 22L19 15Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-success:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-success:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-time:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-time:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-undo:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-undo:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-upload:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-upload:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z'/%3E%3C/svg%3E%0A");
+}
+
+.svg-icon.svg-wrong:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.svg-icon.svg-wrong:before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
+  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
+}