@wizco/fenixds-core 1.0.15 → 1.0.19

package/styles/core.css

@@ -283,290 +283,101 @@
   --tooltip-background: var(--wco-color-info-500);
   --tooltip-color: var(--wco-color-info-900); }
 
-.form-field {
-  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
-  --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
-  --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
-  --wco-input-color-text: var(--wco-color-neutral-900, #080809);
-  --wco-input-color-placeholder: var(--wco-color-neutral-600, #6d747a);
-  --wco-input-color-bg: var(--wco-color-neutral-50, #fcfcfc);
-  --wco-input-radius: var(--wco-radius-sm, 4px);
-  --wco-input-border: var(--wco-borderwidth-thin, 1px) solid var(--wco-input-color-outline);
-  --wco-input-size: var(--wco-font-size-xs, 16px);
-  --wco-input-shadow: var(--wco-shadow-level-0, 0px 0px 0px 0px rgba(0, 0, 0, 0.2));
-  --wco-input-color-required: var(--wco-color-danger-600, #e00707);
-  --wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
-  --wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
-  --wco-input-padding: 16px; }
+.display-1,
+.display-2,
+.display-3,
+.display-4,
+.display-5,
+.display-6 {
+  font-family: var(--wco-font-family);
+  line-height: var(--wco-font-lineheight-500);
+  color: var(--wco-color-neutral-900);
+  font-weight: var(--wco-font-weight-500); }
+  .display-1 strong, .display-1.bold,
+  .display-2 strong,
+  .display-2.bold,
+  .display-3 strong,
+  .display-3.bold,
+  .display-4 strong,
+  .display-4.bold,
+  .display-5 strong,
+  .display-5.bold,
+  .display-6 strong,
+  .display-6.bold {
+    font-weight: var(--wco-font-weight-bold); }
 
-.form-field * {
-  box-sizing: border-box; }
+.display-1 {
+  font-size: var(--wco-font-size-huge);
+  font-weight: var(--wco-font-weight-bold); }
+  @media (max-width: 768px) {
+    .display-1 {
+      font-size: var(--wco-font-size-xxl); } }
 
-.form-field {
-  display: flex;
-  position: relative;
-  accent-color: var(--wco-input-color-text);
-  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out; }
-  .form-field input:required + label::after,
-  .form-field textarea:required + label::after,
-  .form-field input:invalid:not(:placeholder-shown):required + label {
-    content: " *";
-    color: var(--wco-input-color-required); }
-  .form-field .form-field__input,
-  .form-field .form-field__textarea,
-  .form-field .form-field__select {
-    border: var(--wco-input-border);
-    border-radius: var(--wco-input-radius);
-    font-size: var(--wco-input-size, 16px);
-    box-shadow: var(--wco-input-shadow);
-    padding: var(--wco-input-padding, 16px);
-    font-family: var(--wco-font-family);
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.375;
-    letter-spacing: 0.4px;
-    color: var(--wco-input-color-text);
-    outline: none;
-    width: 100%;
-    background-color: var(--wco-input-color-bg); }
-    .form-field .form-field__input::placeholder,
-    .form-field .form-field__textarea::placeholder,
-    .form-field .form-field__select::placeholder {
-      color: var(--wco-input-color-placeholder);
-      font-family: var(--wco-font-family); }
-    .form-field .form-field__input:invalid:not(:placeholder-shown), .form-field .form-field__input.form-field--error:not(:placeholder-shown),
-    .form-field .form-field__textarea:invalid:not(:placeholder-shown),
-    .form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
-    .form-field .form-field__select:invalid:not(:placeholder-shown),
-    .form-field .form-field__select.form-field--error:not(:placeholder-shown) {
-      --input-border: 1px solid var(--input-color-error);
-      --input-shadow: 0px 2px 0px 1px var(--input-color-error);
-      color: var(--input-color-error); }
-    .form-field .form-field__input.input-sm,
-    .form-field .form-field__textarea.input-sm,
-    .form-field .form-field__select.input-sm {
-      height: 32px; }
-    .form-field .form-field__input.input-md,
-    .form-field .form-field__textarea.input-md,
-    .form-field .form-field__select.input-md {
-      height: 40px; }
-    .form-field .form-field__input.input-lg,
-    .form-field .form-field__textarea.input-lg,
-    .form-field .form-field__select.input-lg {
-      height: 48px; }
-  .form-field label {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93, 118, 137, 0) 44%);
-    color: var(--wco-input-color-label);
-    font-family: var(--wco-input-font);
-    font-size: var(--wco-input-size);
-    font-weight: 400;
-    padding: 0 4px;
-    margin-left: 20px;
-    transition: 100ms linear;
-    transform-origin: left top;
-    pointer-events: none; }
-  .form-field:has(input:focus, textarea:focus, select:focus) {
-    --wco-input-color-label: var(--wco-color-primary-700);
-    --wco-input-color-outline: var(--wco-color-primary-600);
-    --wco-input-color-icon: var(--wco-color-primary-600);
-    --wco-input-color-text: var(--wco-color-neutral-900);
-    --wco-input-color-placeholder: var(--wco-color-neutral-600);
-    --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
-  .form-field:hover {
-    --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
-    --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399); }
-  .form-field:has(input:disabled, textarea:disabled, select:disabled) {
-    --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
-    --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
-    --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
-    --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
-    --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
-    --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
-  .form-field:has(
-  input:read-only:not(:disabled),
-  textarea:read-only:not(:disabled),
-  select:read-only:not(:disabled)
-),
-  .form-field .form-field--readonly:not(.form-field--disabled) {
-    --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
-    --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
-    --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
-    --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
-    --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
-  .form-field.form-field--error:not(:placeholder-shown) ~ label, .form-field.form-field--error, .form-field:has(input:is(:placeholder-shown):invalid), .form-field:has(.form-field--error) {
-    --wco-input-color-label: var(--wco-color-danger-600, #e00707);
-    --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
-    --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
-    --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
-    --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
-  .form-field textarea ~ label {
-    top: 16px;
-    transform: translateY(0); }
-  .form-field select[value=""]:focus + label,
-  .form-field textarea:focus + label,
-  .form-field input:focus + label {
-    color: var(--wco-input-color-label);
-    top: 0;
-    transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
-  .form-field select:not([value=""]) ~ label,
-  .form-field textarea:not(:placeholder-shown) + label,
-  .form-field input:not(:placeholder-shown) + label {
-    top: 0;
-    transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
-    font-weight: 500; }
-  .form-field textarea:not(:focus)::placeholder,
-  .form-field input:not(:focus)::placeholder {
-    opacity: 0; }
-  .form-field > span:first-child {
-    position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translateY(-50%);
-    color: var(--wco-input-color-icon); }
-  .form-field > span ~ .form-field__input + label,
-  .form-field > span ~ .form-field__select + label {
-    margin-left: 44px; }
-  .form-field > span ~ .form-field__select,
-  .form-field > span ~ .form-field__input {
-    padding-left: 44px; }
-  .form-field > .form-field__select + label + span,
-  .form-field > .form-field__input + label + span {
-    position: absolute;
-    top: 50%;
-    right: 12px;
-    transform: translateY(-50%); }
-    .form-field > .form-field__select + label + span::before,
-    .form-field > .form-field__input + label + span::before {
-      content: '';
-      position: relative;
-      top: 2px;
-      width: 30px;
-      height: 30px; }
-  .form-field.form-field--suffixe label + span {
-    color: var(--wco-input-color-icon); }
-  .form-field.form-field--suffixe > .form-field__select,
-  .form-field.form-field--suffixe > .form-field__input {
-    padding-right: 44px; }
-  .form-field .form-field__select {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none; }
-    .form-field .form-field__select ~ label ~ span {
-      color: var(--input-default-color); }
+.display-2 {
+  font-size: var(--wco-font-size-xxxl);
+  color: var(--wco-color-neutral-900); }
+  @media (max-width: 768px) {
+    .display-2 {
+      font-size: var(--wco-font-size-xl); } }
 
-label.form-radio, .form-radio {
-  --accent-color: var(--wco-color-primary-700);
-  --radio-size: 16px;
-  --radio-gap: 8px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--radio-gap); }
-  label.form-radio label, .form-radio label {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--radio-gap); }
-  label.form-radio input[type="radio"], .form-radio input[type="radio"] {
-    display: none; }
-  label.form-radio input[type="radio"] ~ .radio, .form-radio input[type="radio"] ~ .radio {
-    height: var(--radio-size);
-    width: var(--radio-size);
-    display: inline-flex;
-    position: relative;
-    border-radius: 50%;
-    border: 1px solid var(--wco-color-neutral-500); }
-    label.form-radio input[type="radio"] ~ .radio::before, .form-radio input[type="radio"] ~ .radio::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 50%;
-      height: 50%;
-      border-radius: 50%;
-      transition: box-shadow 300ms ease-in-out;
-      box-shadow: inset 0px 0px 0px 0px var(--accent-color); }
-  label.form-radio input[type="radio"]:checked ~ .radio, .form-radio input[type="radio"]:checked ~ .radio {
-    border: 1px solid var(--accent-color); }
-    label.form-radio input[type="radio"]:checked ~ .radio::before, .form-radio input[type="radio"]:checked ~ .radio::before {
-      box-shadow: inset 0px 0px 12px 12px var(--accent-color); }
-  label.form-radio .label, .form-radio .label {
-    color: var(--wco-color-primary-700);
-    font-size: var(--wco-font-size-xs);
-    font-weight: 400; }
-  label.form-radio input[type="radio"]:disabled ~ .radio, .form-radio input[type="radio"]:disabled ~ .radio {
-    --accent-color: var(--wco-color-neutral-600);
-    background-color: var(--wco-color-neutral-100est); }
-  label.form-radio input[type="radio"]:checked:disabled ~ .radio, .form-radio input[type="radio"]:checked:disabled ~ .radio {
-    --accent-color: var(--wco-color-neutral-600);
-    border: 1px solid var(--wco-color-neutral-600); }
-    label.form-radio input[type="radio"]:checked:disabled ~ .radio::before, .form-radio input[type="radio"]:checked:disabled ~ .radio::before {
-      box-shadow: inset 0px 0px 12px 12px var(--wco-color-neutral-600); }
+.display-3 {
+  font-size: var(--wco-font-size-xxl);
+  color: var(--wco-color-neutral-900); }
+  @media (max-width: 768px) {
+    .display-3 {
+      font-size: var(--wco-font-size-xl); } }
 
-label.form-check, .form-check {
-  --accent-color: var(--wco-color-primary-700);
-  --checkbox-size: 16px;
-  --checkbox-gap: 8px;
-  --checkbox-radius: 4px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--checkbox-gap); }
-  label.form-check label, .form-check label {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--checkbox-gap); }
-  label.form-check input[type="checkbox"], .form-check input[type="checkbox"] {
-    display: none; }
-  label.form-check input[type="checkbox"] ~ .check, .form-check input[type="checkbox"] ~ .check {
-    height: var(--checkbox-size);
-    width: var(--checkbox-size);
-    display: inline-flex;
-    position: relative;
-    border-radius: var(--checkbox-radius);
-    border: 1px solid var(--wco-color-neutral-500); }
-    label.form-check input[type="checkbox"] ~ .check::before, .form-check input[type="checkbox"] ~ .check::before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 80%;
-      height: 100%;
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 0px;
-      opacity: 0;
-      transition: background-size 100ms linear;
-      background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A"); }
-  label.form-check input[type="checkbox"]:checked ~ .check, .form-check input[type="checkbox"]:checked ~ .check {
-    border: 1px solid var(--accent-color);
-    background-color: var(--accent-color); }
-    label.form-check input[type="checkbox"]:checked ~ .check::before, .form-check input[type="checkbox"]:checked ~ .check::before {
-      opacity: 1;
-      background-size: 100%; }
-  label.form-check .label, .form-check .label {
-    color: var(--wco-color-neutral-900);
-    font-size: var(--wco-font-size-xs);
-    font-weight: 400; }
-  label.form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check, .form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check {
-    border: 1px solid var(--accent-color); }
-  label.form-check input[type="checkbox"]:disabled ~ .check, .form-check input[type="checkbox"]:disabled ~ .check {
-    --accent-color: var(--wco-color-neutral-600);
-    background-color: var(--wco-color-neutral-100est); }
-  label.form-check input[type="checkbox"]:checked:disabled ~ .check, .form-check input[type="checkbox"]:checked:disabled ~ .check {
-    --accent-color: var(--wco-color-neutral-600);
-    border: 1px solid var(--wco-color-neutral-600); }
-    label.form-check input[type="checkbox"]:checked:disabled ~ .check::before, .form-check input[type="checkbox"]:checked:disabled ~ .check::before {
-      filter: brightness(0.5); }
-  label.form-check input[type="checkbox"]:checked:disabled ~ .label, .form-check input[type="checkbox"]:checked:disabled ~ .label {
-    color: var(--wco-color-neutral-600est); }
+.display-4 {
+  font-size: var(--wco-font-size-xl); }
+  @media (max-width: 768px) {
+    .display-4 {
+      font-size: var(--wco-font-size-lg); } }
+
+.display-5 {
+  font-size: var(--wco-font-size-lg); }
+  @media (max-width: 768px) {
+    .display-5 {
+      font-size: var(--wco-font-size-md); } }
+
+.display-6 {
+  font-size: var(--wco-font-size-md); }
+  @media (max-width: 768px) {
+    .display-6 {
+      font-size: var(--wco-font-size-sm); } }
+
+.display-body {
+  font-size: var(--wco-font-size-sm);
+  line-height: var(--wco-font-lineheight-super-distant); }
+  @media (max-width: 768px) {
+    .display-body {
+      font-size: var(--wco-font-size-sm); } }
+
+.display-text {
+  font-size: var(--wco-font-size-xs);
+  line-height: var(--wco-font-lineheight-500); }
+  @media (max-width: 768px) {
+    .display-text {
+      font-size: var(--wco-font-size-xxs); } }
+
+.display-p {
+  font-size: var(--wco-iconography-size-xxs);
+  line-height: var(--wco-font-lineheight-500); }
+
+.display-caption {
+  font-size: var(--wco-font-size-xxxs);
+  line-height: var(--wco-font-lineheight-500); }
+
+@keyframes skeletonShine {
+  to {
+    background-position: 500px 0; } }
+
+.wco-skeleton *:empty {
+  background: #f6f7f8;
+  background-position: -500px 0;
+  animation: skeletonShine 1s linear 0s infinite normal forwards;
+  background-image: linear-gradient(135deg, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+  background-repeat: no-repeat;
+  background-size: 1000px 100%; }
 
 button.btn,
 a.btn {
@@ -743,183 +554,478 @@ a.btn {
   button.btn.btn-loading,
   a.btn.btn-loading {
     position: relative;
-    overflow: hidden;
-    pointer-events: none;
-    cursor: none; }
-    button.btn.btn-loading:before,
-    a.btn.btn-loading:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 0%;
-      height: 100%; }
-    button.btn.btn-loading:before,
-    a.btn.btn-loading:before {
+    overflow: hidden;
+    pointer-events: none;
+    cursor: none; }
+    button.btn.btn-loading:before,
+    a.btn.btn-loading:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0%;
+      height: 100%; }
+    button.btn.btn-loading:before,
+    a.btn.btn-loading:before {
+      content: "";
+      background-color: rgba(33, 29, 29, 0.15);
+      animation: loadingButton 2s ease infinite;
+      z-index: 22; }
+
+@keyframes loadingButton {
+  to {
+    width: 100%; } }
+  button.btn.btn-icon,
+  a.btn.btn-icon {
+    --btn-padding: 4px;
+    min-height: var(--btn-min-h, 48px);
+    min-width: var(--btn-min-h, 48px); }
+  button.btn.btn.btn-notification,
+  a.btn.btn.btn-notification {
+    --btn-notification-size: var(--wco-spacing-xxs);
+    --btn-notification-time: 2s;
+    --btn-notification-count: infinite;
+    --btn-notification-color: var(--bgBtn); }
+    button.btn.btn.btn-notification:not(.btn-outline):before,
+    a.btn.btn.btn-notification:not(.btn-outline):before {
+      outline: 2px solid var(--textBtn); }
+    button.btn.btn.btn-notification:before,
+    a.btn.btn.btn-notification:before {
+      content: "";
+      position: absolute;
+      top: calc(var(--btn-notification-size) / -2);
+      right: calc(var(--btn-notification-size) / -2);
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background-color: var(--btn-notification-color);
+      filter: saturate(0.8);
+      opacity: 1;
+      transition: all 300ms ease;
+      animation: btnNotificationAnimation var(--btn-notification-time, 300ms) ease var(--btn-notification-count) alternate;
+      box-shadow: var(--wco-shadow-level-1); }
+
+@keyframes btnNotificationAnimation {
+  0% {
+    transform: scale(1); }
+  50% {
+    transform: scale(1.2);
+    box-shadow: var(--wco-shadow-level-2); }
+  100% {
+    transform: scale(1); } }
+
+.wco-card, .wco-content {
+  display: block;
+  padding: var(--wco-spacing-xs);
+  border-radius: var(--wco-radius-md);
+  background-color: var(--wco-color-panel);
+  width: 100%; }
+
+.form-field {
+  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
+  --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
+  --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
+  --wco-input-color-text: var(--wco-color-neutral-900, #080809);
+  --wco-input-color-placeholder: var(--wco-color-neutral-600, #6d747a);
+  --wco-input-color-bg: var(--wco-color-neutral-50, #fcfcfc);
+  --wco-input-radius: var(--wco-radius-sm, 4px);
+  --wco-input-border: var(--wco-borderwidth-thin, 1px) solid var(--wco-input-color-outline);
+  --wco-input-size: var(--wco-font-size-xs, 16px);
+  --wco-input-shadow: var(--wco-shadow-level-0, 0px 0px 0px 0px rgba(0, 0, 0, 0.2));
+  --wco-input-color-required: var(--wco-color-danger-600, #e00707);
+  --wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
+  --wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
+  --wco-input-padding: 16px; }
+
+.form-field * {
+  box-sizing: border-box; }
+
+.form-field {
+  display: flex;
+  position: relative;
+  accent-color: var(--wco-input-color-text);
+  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out; }
+  .form-field input:required + label::after,
+  .form-field textarea:required + label::after,
+  .form-field input:invalid:not(:placeholder-shown):required + label {
+    content: " *";
+    color: var(--wco-input-color-required); }
+  .form-field .form-field__input,
+  .form-field .form-field__textarea,
+  .form-field .form-field__select {
+    border: var(--wco-input-border);
+    border-radius: var(--wco-input-radius);
+    font-size: var(--wco-input-size, 16px);
+    box-shadow: var(--wco-input-shadow);
+    padding: var(--wco-input-padding, 16px);
+    font-family: var(--wco-font-family);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.375;
+    letter-spacing: 0.4px;
+    color: var(--wco-input-color-text);
+    outline: none;
+    width: 100%;
+    background-color: var(--wco-input-color-bg); }
+    .form-field .form-field__input::placeholder,
+    .form-field .form-field__textarea::placeholder,
+    .form-field .form-field__select::placeholder {
+      color: var(--wco-input-color-placeholder);
+      font-family: var(--wco-font-family); }
+    .form-field .form-field__input:invalid:not(:placeholder-shown), .form-field .form-field__input.form-field--error:not(:placeholder-shown),
+    .form-field .form-field__textarea:invalid:not(:placeholder-shown),
+    .form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
+    .form-field .form-field__select:invalid:not(:placeholder-shown),
+    .form-field .form-field__select.form-field--error:not(:placeholder-shown) {
+      --input-border: 1px solid var(--input-color-error);
+      --input-shadow: 0px 2px 0px 1px var(--input-color-error);
+      color: var(--input-color-error); }
+    .form-field .form-field__input.input-sm,
+    .form-field .form-field__textarea.input-sm,
+    .form-field .form-field__select.input-sm {
+      height: 32px; }
+    .form-field .form-field__input.input-md,
+    .form-field .form-field__textarea.input-md,
+    .form-field .form-field__select.input-md {
+      height: 40px; }
+    .form-field .form-field__input.input-lg,
+    .form-field .form-field__textarea.input-lg,
+    .form-field .form-field__select.input-lg {
+      height: 48px; }
+  .form-field label {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93, 118, 137, 0) 44%);
+    color: var(--wco-input-color-label);
+    font-family: var(--wco-input-font);
+    font-size: var(--wco-input-size);
+    font-weight: 400;
+    padding: 0 4px;
+    margin-left: 20px;
+    transition: 100ms linear;
+    transform-origin: left top;
+    pointer-events: none; }
+  .form-field:has(input:focus, textarea:focus, select:focus) {
+    --wco-input-color-label: var(--wco-color-primary-700);
+    --wco-input-color-outline: var(--wco-color-primary-600);
+    --wco-input-color-icon: var(--wco-color-primary-600);
+    --wco-input-color-text: var(--wco-color-neutral-900);
+    --wco-input-color-placeholder: var(--wco-color-neutral-600);
+    --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
+  .form-field:hover {
+    --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
+    --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399); }
+  .form-field:has(input:disabled, textarea:disabled, select:disabled, .form-field__input.form-field--disabled) {
+    --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
+    --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
+    --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
+    --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
+    --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
+    --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
+  .form-field:has(
+  input:read-only:not(:disabled),
+  textarea:read-only:not(:disabled),
+  select:read-only:not(:disabled)
+),
+  .form-field .form-field--readonly:not(.form-field--disabled) {
+    --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
+    --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
+    --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
+    --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
+    --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
+  .form-field.form-field--error:not(:placeholder-shown) ~ label, .form-field.form-field--error, .form-field:has(input:is(:placeholder-shown):invalid), .form-field:has(.form-field--error) {
+    --wco-input-color-label: var(--wco-color-danger-600, #e00707);
+    --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
+    --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
+    --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
+    --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
+  .form-field textarea ~ label {
+    top: 16px;
+    transform: translateY(0); }
+  .form-field select[value=""]:focus + label,
+  .form-field textarea:focus + label,
+  .form-field input:focus + label,
+  .form-field .readonly + label {
+    color: var(--wco-input-color-label);
+    top: 0;
+    transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
+  .form-field select:not([value=""]) ~ label,
+  .form-field textarea:not(:placeholder-shown) + label,
+  .form-field input:not(:placeholder-shown) + label,
+  .form-field .readonly + label {
+    top: 0;
+    transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
+    font-weight: 500; }
+  .form-field textarea:not(:focus)::placeholder,
+  .form-field input:not(:focus)::placeholder {
+    opacity: 0; }
+  .form-field > span:first-child {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    color: var(--wco-input-color-icon); }
+  .form-field > span ~ .form-field__input + label,
+  .form-field > span ~ .form-field__select + label {
+    margin-left: 44px; }
+  .form-field > span ~ .form-field__select,
+  .form-field > span ~ .form-field__input {
+    padding-left: 44px; }
+  .form-field > .form-field__select + label + span,
+  .form-field > .form-field__input + label + span {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%); }
+    .form-field > .form-field__select + label + span::before,
+    .form-field > .form-field__input + label + span::before {
+      content: '';
+      position: relative;
+      top: 2px;
+      width: 30px;
+      height: 30px; }
+  .form-field.form-field--suffixe label + span {
+    color: var(--wco-input-color-icon); }
+  .form-field.form-field--suffixe > .form-field__select,
+  .form-field.form-field--suffixe > .form-field__input {
+    padding-right: 44px; }
+  .form-field .form-field__select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none; }
+    .form-field .form-field__select ~ label ~ span {
+      color: var(--input-default-color); }
+
+label.form-radio, .form-radio {
+  --accent-color: var(--wco-color-primary-700);
+  --radio-size: 16px;
+  --radio-gap: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--radio-gap); }
+  label.form-radio label, .form-radio label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--radio-gap); }
+  label.form-radio input[type="radio"], .form-radio input[type="radio"] {
+    display: none; }
+  label.form-radio input[type="radio"] ~ .radio, .form-radio input[type="radio"] ~ .radio {
+    height: var(--radio-size);
+    width: var(--radio-size);
+    display: inline-flex;
+    position: relative;
+    border-radius: 50%;
+    border: 1px solid var(--wco-color-neutral-500); }
+    label.form-radio input[type="radio"] ~ .radio::before, .form-radio input[type="radio"] ~ .radio::before {
       content: "";
-      background-color: rgba(33, 29, 29, 0.15);
-      animation: loadingButton 2s ease infinite;
-      z-index: 22; }
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      transition: box-shadow 300ms ease-in-out;
+      box-shadow: inset 0px 0px 0px 0px var(--accent-color); }
+  label.form-radio input[type="radio"]:checked ~ .radio, .form-radio input[type="radio"]:checked ~ .radio {
+    border: 1px solid var(--accent-color); }
+    label.form-radio input[type="radio"]:checked ~ .radio::before, .form-radio input[type="radio"]:checked ~ .radio::before {
+      box-shadow: inset 0px 0px 12px 12px var(--accent-color); }
+  label.form-radio .label, .form-radio .label {
+    color: var(--wco-color-primary-700);
+    font-size: var(--wco-font-size-xs);
+    font-weight: 400; }
+  label.form-radio input[type="radio"]:disabled ~ .radio, .form-radio input[type="radio"]:disabled ~ .radio {
+    --accent-color: var(--wco-color-neutral-600);
+    background-color: var(--wco-color-neutral-100est); }
+  label.form-radio input[type="radio"]:checked:disabled ~ .radio, .form-radio input[type="radio"]:checked:disabled ~ .radio {
+    --accent-color: var(--wco-color-neutral-600);
+    border: 1px solid var(--wco-color-neutral-600); }
+    label.form-radio input[type="radio"]:checked:disabled ~ .radio::before, .form-radio input[type="radio"]:checked:disabled ~ .radio::before {
+      box-shadow: inset 0px 0px 12px 12px var(--wco-color-neutral-600); }
 
-@keyframes loadingButton {
-  to {
-    width: 100%; } }
-  button.btn.btn-icon,
-  a.btn.btn-icon {
-    --btn-padding: 4px;
-    min-height: var(--btn-min-h, 48px);
-    min-width: var(--btn-min-h, 48px); }
-  button.btn.btn.btn-notification,
-  a.btn.btn.btn-notification {
-    --btn-notification-size: var(--wco-spacing-xxs);
-    --btn-notification-time: 2s;
-    --btn-notification-count: infinite;
-    --btn-notification-color: var(--bgBtn); }
-    button.btn.btn.btn-notification:not(.btn-outline):before,
-    a.btn.btn.btn-notification:not(.btn-outline):before {
-      outline: 2px solid var(--textBtn); }
-    button.btn.btn.btn-notification:before,
-    a.btn.btn.btn-notification:before {
+label.form-check, .form-check {
+  --wco-checkbox-default-color-label: var(--wco-color-neutral-900);
+  --wco-checkbox-default-color-iconunchecked: var(--wco-color-neutral-500);
+  --wco-checkbox-default-color-iconchecked: var(--wco-color-primary-600);
+  --wco-checkbox-hover-color-label: var(--wco-color-neutral-900);
+  --wco-checkbox-hover-color-iconunchecked: var(--wco-color-primary-700);
+  --wco-checkbox-hover-color-iconchecked: var(--wco-color-primary-600);
+  --wco-checkbox-hover-color-bg: var(--wco-color-primary-50);
+  --wco-checkbox-disabled-color-label: var(--wco-color-neutral-700);
+  --wco-checkbox-disabled-color-iconunchecked: var(--wco-color-neutral-700);
+  --wco-checkbox-disabled-color-iconchecked: var(--wco-color-neutral-500);
+  --wco-checkbox-disabled-color-bg: var(--wco-color-neutral-700);
+  --wco-checkbox-checkbox-size: 18px;
+  --wco-checkbox-checkbox-gap: 12px;
+  --wco-checkbox-checkbox-radius: 4px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--wco-checkbox-checkbox-gap); }
+  label.form-check label, .form-check label {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--wco-checkbox-checkbox-gap); }
+  label.form-check input[type="checkbox"], .form-check input[type="checkbox"] {
+    display: none; }
+  label.form-check input[type="checkbox"] ~ .check, .form-check input[type="checkbox"] ~ .check {
+    height: var(--wco-checkbox-checkbox-size);
+    width: var(--wco-checkbox-checkbox-size);
+    display: inline-flex;
+    position: relative;
+    border-radius: var(--wco-checkbox-checkbox-radius);
+    border: 2px solid var(--wco-checkbox-default-color-iconunchecked); }
+    label.form-check input[type="checkbox"] ~ .check::before, .form-check input[type="checkbox"] ~ .check::before {
       content: "";
       position: absolute;
-      top: calc(var(--btn-notification-size) / -2);
-      right: calc(var(--btn-notification-size) / -2);
-      height: 16px;
-      width: 16px;
-      border-radius: 50%;
-      background-color: var(--btn-notification-color);
-      filter: saturate(0.8);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 80%;
+      height: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 0px;
+      opacity: 0;
+      transition: background-size 100ms linear;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -3 12 15' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00009 6.77988L1.68676 4.46655C1.42676 4.20655 1.00676 4.20655 0.746758 4.46655C0.486758 4.72655 0.486758 5.14655 0.746758 5.40655L3.53342 8.19322C3.79342 8.45322 4.21342 8.45322 4.47342 8.19322L11.5268 1.13988C11.7868 0.879883 11.7868 0.459883 11.5268 0.199883C11.2668 -0.0601172 10.8468 -0.0601172 10.5868 0.199883L4.00009 6.77988Z' fill='%23F9F7F7'/%3E%3C/svg%3E%0A"); }
+  label.form-check input[type="checkbox"]:checked ~ .check, .form-check input[type="checkbox"]:checked ~ .check {
+    border: 2px solid var(--wco-checkbox-default-color-iconchecked);
+    background-color: var(--wco-checkbox-default-color-iconchecked); }
+    label.form-check input[type="checkbox"]:checked ~ .check::before, .form-check input[type="checkbox"]:checked ~ .check::before {
       opacity: 1;
-      transition: all 300ms ease;
-      animation: btnNotificationAnimation var(--btn-notification-time, 300ms) ease var(--btn-notification-count) alternate;
-      box-shadow: var(--wco-shadow-level-1); }
+      background-size: 100%; }
+  label.form-check .label, .form-check .label {
+    color: var(--wco-checkbox-default-color-label);
+    font-size: var(--wco-font-size-xs);
+    font-family: var(--wco-font-family);
+    font-weight: 400;
+    letter-spacing: 0.4px; }
+  label.form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check, .form-check:hover:has(input[type="checkbox"]:not(:checked):not(:disabled)) .check {
+    border: 2px solid var(--wco-checkbox-default-color-iconchecked); }
+  label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .check::after {
+    background-color: var(--wco-checkbox-hover-color-bg);
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    width: calc(var(--wco-checkbox-checkbox-size) * 2);
+    height: calc(var(--wco-checkbox-checkbox-size) * 2);
+    border-radius: 50%;
+    z-index: -1;
+    transition: transform 300ms ease-in-out;
+    animation: introScaleCheckboxWco 300ms ease-in-out forwards; }
+  label.form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label, .form-check:hover:has(input[type="checkbox"]:not(:disabled)) .label {
+    cursor: pointer; }
 
-@keyframes btnNotificationAnimation {
+@keyframes introScaleCheckboxWco {
   0% {
-    transform: scale(1); }
-  50% {
-    transform: scale(1.2);
-    box-shadow: var(--wco-shadow-level-2); }
+    transform: translate(-50%, -50%) scale(0); }
+  70% {
+    transform: translate(-50%, -50%) scale(1.1); }
   100% {
-    transform: scale(1); } }
-
-.wco-card, .wco-content {
-  display: block;
-  padding: var(--wco-spacing-xs);
-  border-radius: var(--wco-radius-md);
-  background-color: var(--wco-color-panel);
-  width: 100%; }
-
-.display-1,
-.display-2,
-.display-3,
-.display-4,
-.display-5,
-.display-6 {
+    transform: translate(-50%, -50%) scale(1); } }
+  label.form-check:has(input[type="checkbox"]:disabled), .form-check:has(input[type="checkbox"]:disabled) {
+    opacity: 0.3; }
+  label.form-check input[type="checkbox"]:disabled ~ .check, .form-check input[type="checkbox"]:disabled ~ .check {
+    border: 2px solid var(--wco-checkbox-disabled-color-iconchecked);
+    background-color: var(--wco-color-neutral-50); }
+  label.form-check input[type="checkbox"]:disabled ~ .label, .form-check input[type="checkbox"]:disabled ~ .label {
+    color: var(--wco-checkbox-disabled-color-label); }
+  label.form-check input[type="checkbox"]:checked:disabled ~ .check, .form-check input[type="checkbox"]:checked:disabled ~ .check {
+    --accent-color: var(--wco-color-neutral-600);
+    border: 2px solid var(--wco-color-neutral-600);
+    background-color: var(--wco-checkbox-disabled-color-iconchecked); }
+  label.form-check input[type="checkbox"]:checked:disabled ~ .label, .form-check input[type="checkbox"]:checked:disabled ~ .label {
+    color: var(--wco-checkbox-disabled-color-label); }
+  label.form-check.form-field--error, .form-check.form-field--error {
+    --wco-checkbox-default-color-label: var(--wco-color-danger-900);
+    --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
+    --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }
+
+.wco-chip {
+  --wco-chip-size: 21px;
+  --wco-chip-spacing: var(--wco-spacing-none) var(--wco-spacing-nano);
+  --wco-chip-gap: var(--wco-spacing-nano, 8px);
+  --wco-chip-border-radius: var(--wco-radius-md, 8px);
+  --wco-chip-background-color: transparent;
+  --wco-chip-color: var(--wco-color-primary-600);
+  --wco-chip-font-size: var(--wco-font-size-xxs);
+  --wco-chip-line-height: var(--wco-font-lineheight-500);
+  --wco-chip-icon-size: var(--wco-icon-size-small);
+  --wco-chip-icon-color: var(--wco-color-gray-800);
+  font-size: var(--wco-chip-font-size, 14px);
+  color: var(--wco-chip-color, #333);
+  background-color: var(--wco-chip-background-color, #fff);
+  border-radius: var(--wco-chip-border-radius, 4px);
+  gap: var(--wco-chip-gap, 4px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--wco-chip-spacing, 0 4px);
+  min-height: var(--wco-chip-size, 24px);
+  width: fit-content;
+  font-style: normal;
+  font-weight: 600;
+  text-align: center;
   font-family: var(--wco-font-family);
-  line-height: var(--wco-font-lineheight-500);
-  font-weight: var(--wco-font-weight-500); }
-  .display-1 strong, .display-1.bold,
-  .display-2 strong,
-  .display-2.bold,
-  .display-3 strong,
-  .display-3.bold,
-  .display-4 strong,
-  .display-4.bold,
-  .display-5 strong,
-  .display-5.bold,
-  .display-6 strong,
-  .display-6.bold {
-    font-weight: var(--wco-font-weight-bold); }
-  .display-1:not([class*="text-neutral-"]), .display-1:not([class*="text-primary-500"]), .display-1:not([class*="text-secondary-"]),
-  .display-2:not([class*="text-neutral-"]),
-  .display-2:not([class*="text-primary-500"]),
-  .display-2:not([class*="text-secondary-"]),
-  .display-3:not([class*="text-neutral-"]),
-  .display-3:not([class*="text-primary-500"]),
-  .display-3:not([class*="text-secondary-"]),
-  .display-4:not([class*="text-neutral-"]),
-  .display-4:not([class*="text-primary-500"]),
-  .display-4:not([class*="text-secondary-"]),
-  .display-5:not([class*="text-neutral-"]),
-  .display-5:not([class*="text-primary-500"]),
-  .display-5:not([class*="text-secondary-"]),
-  .display-6:not([class*="text-neutral-"]),
-  .display-6:not([class*="text-primary-500"]),
-  .display-6:not([class*="text-secondary-"]) {
-    color: var(--wco-color-neutral-900); }
-
-.display-1 {
-  font-size: var(--wco-font-size-huge);
-  font-weight: var(--wco-font-weight-bold); }
-  @media (max-width: 768px) {
-    .display-1 {
-      font-size: var(--wco-font-size-xxl); } }
-
-.display-2 {
-  font-size: var(--wco-font-size-xxxl);
-  color: var(--wco-color-neutral-900); }
-  @media (max-width: 768px) {
-    .display-2 {
-      font-size: var(--wco-font-size-xl); } }
-
-.display-3 {
-  font-size: var(--wco-font-size-xxl);
-  color: var(--wco-color-neutral-900); }
-  @media (max-width: 768px) {
-    .display-3 {
-      font-size: var(--wco-font-size-xl); } }
-
-.display-4 {
-  font-size: var(--wco-font-size-xl); }
-  @media (max-width: 768px) {
-    .display-4 {
-      font-size: var(--wco-font-size-lg); } }
-
-.display-5 {
-  font-size: var(--wco-font-size-lg); }
-  @media (max-width: 768px) {
-    .display-5 {
-      font-size: var(--wco-font-size-md); } }
-
-.display-6 {
-  font-size: var(--wco-font-size-md); }
-  @media (max-width: 768px) {
-    .display-6 {
-      font-size: var(--wco-font-size-sm); } }
-
-.display-body {
-  font-size: var(--wco-font-size-sm);
-  line-height: var(--wco-font-lineheight-super-distant); }
-  @media (max-width: 768px) {
-    .display-body {
-      font-size: var(--wco-font-size-sm); } }
-
-.display-text {
-  font-size: var(--wco-font-size-xs);
-  line-height: var(--wco-font-lineheight-500); }
-  @media (max-width: 768px) {
-    .display-text {
-      font-size: var(--wco-font-size-xxs); } }
-
-.display-p {
-  font-size: var(--wco-iconography-size-xxs);
-  line-height: var(--wco-font-lineheight-500); }
-
-.display-caption {
-  font-size: var(--wco-font-size-xxxs);
-  line-height: var(--wco-font-lineheight-500); }
-
-@keyframes skeletonShine {
-  to {
-    background-position: 500px 0; } }
-
-.wco-skeleton *:empty {
-  background: #f6f7f8;
-  background-position: -500px 0;
-  animation: skeletonShine 1s linear 0s infinite normal forwards;
-  background-image: linear-gradient(135deg, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
-  background-repeat: no-repeat;
-  background-size: 1000px 100%; }
+  line-height: 150%;
+  letter-spacing: 0.35px;
+  transition: transform 200ms linear, background-color 300ms ease-in-out; }
+  .wco-chip > span, .wco-chip i {
+    font-size: var(--wco-chip-icon-size, 14px); }
+  .wco-chip:not(:disabled):hover, .wco-chip:not(.chip-error):hover, .wco-chip:not(.chip-disabled):hover, .wco-chip:not(.chip-active):hover {
+    cursor: pointer;
+    --wco-chip-background-color: var(--wco-color-primary-50);
+    --wco-chip-color: var(--wco-color-primary-700);
+    transform: scale(1); }
+  .wco-chip:not(:disabled):focus, .wco-chip:not(.chip-error):focus, .wco-chip:not(.chip-disabled):focus, .wco-chip:not(.chip-active):focus {
+    transform: scale(0.99) translateY(0.5px);
+    box-shadow: var(--wco-shadow-level-0);
+    --wco-chip-background-color: var(--wco-color-primary-100);
+    --wco-chip-color: var(--wco-color-primary-900); }
+  .wco-chip.chip-disabled, .wco-chip:disabled {
+    --wco-chip-background-color: transparent;
+    --wco-chip-color: var(--wco-color-neutral-700);
+    pointer-events: none;
+    opacity: 0.4; }
+  .wco-chip.chip-selected, .wco-chip.chip-active {
+    --wco-chip-background-color: var(--wco-color-primary-100);
+    --wco-chip-color: var(--wco-color-primary-900); }
+    .wco-chip.chip-selected:hover, .wco-chip.chip-active:hover {
+      --wco-chip-background-color: var(--wco-color-primary-100);
+      --wco-chip-color: var(--wco-color-primary-900); }
+    .wco-chip.chip-selected:focus, .wco-chip.chip-active:focus {
+      --wco-chip-background-color: var(--wco-color-primary-100);
+      --wco-chip-color: var(--wco-color-primary-900); }
+  .wco-chip.chip-outline {
+    border: 1px solid var(--wco-chip-color, #333); }
+  .wco-chip.chip-md {
+    --wco-chip-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
+    --wco-chip-size: 29px; }
+  .wco-chip.chip-lg {
+    --wco-chip-spacing: var(--wco-spacing-nano) var(--wco-spacing-xxs);
+    --wco-chip-size: 37px; }
+  .wco-chip.chip-error {
+    --wco-chip-background-color: transparent;
+    --wco-chip-color: var(--wco-color-danger-700); }
+    .wco-chip.chip-error:hover {
+      --wco-chip-background-color: transparent
+            --wco-chip-color: var(--wco-color-danger-600); }
+    .wco-chip.chip-error:focus {
+      --wco-chip-background-color: transparent;
+      --wco-chip-color: var(--wco-color-danger-600); }
+
+.wco-group-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wco-spacing-nano, 12px); }
 
 .m-none {
   margin: var(--wco-spacing-none); }