@simplybusiness/mobius 9.3.4 → 10.1.0

package/src/components/Radio/Radio.css

@@ -1,147 +1,133 @@
-/* stylelint-disable no-descending-specificity -- complex component with many state combinations */
-.mobius-radio-group {
-  box-sizing: border-box;
-  width: 100%;
+@layer atoms {
+  /* stylelint-disable no-descending-specificity -- complex component with many state combinations */
+  .mobius-radio-group {
+    box-sizing: border-box;
+    width: 100%;
 
-  &.--is-horizontal .mobius-radio__label:not(:last-child) {
-    margin-right: var(--radio-gap);
-  }
+    &.--is-horizontal .mobius-radio__label:not(:last-child) {
+      margin-right: var(--radio-gap);
+    }
 
-  &.--is-vertical .mobius-radio__label:not(:last-child) {
-    margin-bottom: var(--radio-gap);
-  }
+    &.--is-vertical .mobius-radio__label:not(:last-child) {
+      margin-bottom: var(--radio-gap);
+    }
 
-  &:where(.--is-optional) > :where(.mobius-label)::after {
-    content: " (optional)";
+    &:where(.--is-optional) > :where(.mobius-label)::after {
+      content: " (optional)";
+    }
   }
-}
 
-.mobius-radio__wrapper {
-  display: flex;
-
-  &.--is-horizontal {
-    flex-direction: row;
-  }
+  .mobius-radio__wrapper {
+    display: flex;
 
-  &.--is-vertical {
-    flex-direction: column;
-  }
-}
+    &.--is-horizontal {
+      flex-direction: row;
+    }
 
-.mobius-radio__input {
-  position: relative;
-  align-self: center;
-  margin: 0 var(--radio-label-gap) 0 0;
-  padding: var(--size-xs);
-  width: var(--radio-size);
-  height: var(--radio-size);
-  border: var(--radio-border-width) solid var(--color-primary-light);
-  border-radius: 50%;
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: transparent;
-
-  /* Overwrite browser default */
-  &:focus-visible {
-    outline-color: var(--color-primary);
-    outline-offset: 0;
+    &.--is-vertical {
+      flex-direction: column;
+    }
   }
 
-  &::after {
-    position: absolute;
-    content: "";
-    display: block;
-    width: var(--radio-inner-size);
-    height: var(--radio-inner-size);
+  .mobius-radio__input {
+    position: relative;
+    align-self: center;
+    margin: 0 var(--radio-label-gap) 0 0;
+    padding: var(--size-xs);
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border: var(--radio-border-width) solid var(--color-primary-light);
     border-radius: 50%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &:checked::after {
-    background-color: var(--color-primary);
-  }
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+
+    /* Overwrite browser default */
+    &:focus-visible {
+      outline-color: var(--color-primary);
+      outline-offset: 0;
+    }
 
-  &:disabled {
-    border-color: var(--radio-input-disabled-border-color);
+    &::after {
+      position: absolute;
+      content: "";
+      display: block;
+      width: var(--radio-inner-size);
+      height: var(--radio-inner-size);
+      border-radius: 50%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
 
     &:checked::after {
-      background-color: var(--radio-input-disabled-inner-color);
+      background-color: var(--color-primary);
     }
-  }
 
-  &.--is-multiline {
-    align-self: flex-start;
-    margin-top: var(--size-xxs);
-    margin-right: var(--radio-label-gap);
-  }
-}
+    &:disabled {
+      border-color: var(--radio-input-disabled-border-color);
 
-.mobius-radio__label {
-  display: flex;
-  align-items: var(--radio-label-align-items);
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--radio-label-padding);
-  font-family: var(--font-family);
-  font-size: var(--font-size-regular);
-  font-weight: var(--font-weight-normal);
-  border: var(--radio-label-border);
-  border-radius: var(--radius-1);
-  color: var(--color-text);
-  outline: 0;
-  position: relative;
-  cursor: pointer;
-  background-color: var(--radio-label-background);
-  overflow-wrap: break-word;
-
-  /* Disabled */
-  &.--is-disabled {
-    background-color: var(--radio-label-background-disabled);
-    border-color: var(--radio-label-disabled-border-color);
-    color: var(--radio-label-disabled-text-color);
-    cursor: not-allowed;
-
-    &.--is-selected {
-      border-color: var(--radio-label-disabled-selected-border-color);
+      &:checked::after {
+        background-color: var(--radio-input-disabled-inner-color);
+      }
     }
-  }
-
-  /* Selected  */
-  &.--is-selected:not(.mobius-radio-group.--is-invalid &):not(.--is-disabled) {
-    border-color: var(--color-primary-light);
 
-    & .mobius-radio__input {
-      border-color: var(--color-primary-light);
+    &.--is-multiline {
+      align-self: flex-start;
+      margin-top: var(--size-xxs);
+      margin-right: var(--radio-label-gap);
+    }
+  }
 
-      &:checked::after {
-        background-color: var(--color-primary-light);
+  .mobius-radio__label {
+    display: flex;
+    align-items: var(--radio-label-align-items);
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--radio-label-padding);
+    font-family: var(--font-family);
+    font-size: var(--font-size-regular);
+    font-weight: var(--font-weight-normal);
+    border: var(--radio-label-border);
+    border-radius: var(--radius-1);
+    color: var(--color-text);
+    outline: 0;
+    position: relative;
+    cursor: pointer;
+    background-color: var(--radio-label-background);
+    overflow-wrap: break-word;
+
+    /* Disabled */
+    &.--is-disabled {
+      background-color: var(--radio-label-background-disabled);
+      border-color: var(--radio-label-disabled-border-color);
+      color: var(--radio-label-disabled-text-color);
+      cursor: not-allowed;
+
+      &.--is-selected {
+        border-color: var(--radio-label-disabled-selected-border-color);
       }
     }
-  }
 
-  /* Hovered  */
-  &:hover:not(.--is-disabled):not(.mobius-radio-group.--is-invalid &) {
-    border-color: var(--color-primary);
-    background-color: var(--radio-label-background-hover);
+    /* Selected  */
+    &.--is-selected:not(.mobius-radio-group.--is-invalid &):not(
+        .--is-disabled
+      ) {
+      border-color: var(--color-primary-light);
 
-    & .mobius-radio__input {
-      border-color: var(--color-primary);
+      & .mobius-radio__input {
+        border-color: var(--color-primary-light);
 
-      &:checked::after {
-        background-color: var(--color-primary);
+        &:checked::after {
+          background-color: var(--color-primary-light);
+        }
       }
     }
-  }
 
-  /* Focused */
-  &:has(:focus-visible):not(.--is-disabled) {
-    box-shadow: var(--radio-box-shadow);
-
-    &:not(.mobius-radio-group.--is-invalid &) {
+    /* Hovered  */
+    &:hover:not(.--is-disabled):not(.mobius-radio-group.--is-invalid &) {
       border-color: var(--color-primary);
-      background-color: var(--radio-label-background-focus);
+      background-color: var(--radio-label-background-hover);
 
       & .mobius-radio__input {
         border-color: var(--color-primary);
@@ -151,66 +137,84 @@
         }
       }
     }
-  }
 
-  /* Multiline */
-  &.--is-multiline {
-    width: 100%;
-  }
+    /* Focused */
+    &:has(:focus-visible):not(.--is-disabled) {
+      box-shadow: var(--radio-box-shadow);
 
-  /* Invalid */
-  .mobius-radio-group.--is-invalid &:not(.--is-disabled) {
-    border-color: var(--radio-label-invalid-border-color);
-    color: var(--radio-label-invalid-text-color);
+      &:not(.mobius-radio-group.--is-invalid &) {
+        border-color: var(--color-primary);
+        background-color: var(--radio-label-background-focus);
 
-    &:hover,
-    &:focus-within {
-      border-color: var(--radio-label-invalid-border-color);
-      background-color: var(--radio-label-background-invalid);
+        & .mobius-radio__input {
+          border-color: var(--color-primary);
+
+          &:checked::after {
+            background-color: var(--color-primary);
+          }
+        }
+      }
+    }
+
+    /* Multiline */
+    &.--is-multiline {
+      width: 100%;
     }
 
-    & .mobius-radio__input {
-      border-color: var(--radio-input-invalid-border-color);
+    /* Invalid */
+    .mobius-radio-group.--is-invalid &:not(.--is-disabled) {
+      border-color: var(--radio-label-invalid-border-color);
+      color: var(--radio-label-invalid-text-color);
 
-      &:checked::after {
-        background-color: var(--radio-input-invalid-inner-color);
+      &:hover,
+      &:focus-within {
+        border-color: var(--radio-label-invalid-border-color);
+        background-color: var(--radio-label-background-invalid);
+      }
+
+      & .mobius-radio__input {
+        border-color: var(--radio-input-invalid-border-color);
+
+        &:checked::after {
+          background-color: var(--radio-input-invalid-inner-color);
+        }
       }
     }
   }
-}
 
-.mobius-radio__content {
-  box-sizing: border-box;
-  flex: 1; /* Stretch to fill remaining space */
-  font-size: var(--radio-content-font-size);
-  color: var(--radio-content-color);
-  line-height: var(--radio-content-line-height);
-}
+  .mobius-radio__content {
+    box-sizing: border-box;
+    flex: 1; /* Stretch to fill remaining space */
+    font-size: var(--radio-content-font-size);
+    color: var(--radio-content-color);
+    line-height: var(--radio-content-line-height);
+  }
 
-.mobius-radio__content--multiline {
-  flex: 1; /* Stretch to fill remaining space */
-  font-size: var(--radio-content-font-size);
-  color: var(--radio-content-color);
-  line-height: var(--radio-content-line-height);
-}
+  .mobius-radio__content--multiline {
+    flex: 1; /* Stretch to fill remaining space */
+    font-size: var(--radio-content-font-size);
+    color: var(--radio-content-color);
+    line-height: var(--radio-content-line-height);
+  }
 
-.mobius-radio__content-first-line {
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--radio-first-line-margin-bottom);
-  padding-top: var(--radio-first-line-padding-top);
-}
+  .mobius-radio__content-first-line {
+    font-weight: var(--font-weight-bold);
+    margin-bottom: var(--radio-first-line-margin-bottom);
+    padding-top: var(--radio-first-line-padding-top);
+  }
 
-.mobius-radio__extra-content {
-  color: var(--radio-extra-content-color);
-}
+  .mobius-radio__extra-content {
+    color: var(--radio-extra-content-color);
+  }
 
-.mobius-radio__label.--has-icon-first .mobius-radio__content {
-  display: grid;
-  align-items: center;
-  grid-template-columns: var(--size-md) 1fr;
-  gap: var(--size-xs);
-}
+  .mobius-radio__label.--has-icon-first .mobius-radio__content {
+    display: grid;
+    align-items: center;
+    grid-template-columns: var(--size-md) 1fr;
+    gap: var(--size-xs);
+  }
 
-.mobius-radio__content .mobius-icon {
-  color: var(--radio-icon-color);
+  .mobius-radio__content .mobius-icon {
+    color: var(--radio-icon-color);
+  }
 }