@fkui/design 6.12.0 → 6.14.0

package/src/components/label/_label.scss

@@ -3,9 +3,7 @@
 @use "../icon/icon";
 @use "variables" as *;
 
-$LABEL_SELECTOR: ".label" !default;
-
-#{$LABEL_SELECTOR} {
+.label {
     color: $label-color-text;
     display: inline-block;
     font-size: var(--f-font-size-standard);
@@ -14,6 +12,10 @@ $LABEL_SELECTOR: ".label" !default;
     margin-bottom: core.densify(size.$margin-025);
     width: var(--f-width-full);
 
+    &.sr-only {
+        width: auto;
+    }
+
     &__message {
         display: block;
         font-weight: var(--f-font-weight-normal);

package/src/components/label/_variables.scss

@@ -1,4 +1,4 @@
-$label-color-text: var(--fkds-color-text-primary);
-$label-color-text-description: var(--fkds-color-text-primary);
-$label-color-text-description-format: var(--fkds-color-text-secondary);
-$label-color-text-message-error: var(--fkds-color-feedback-text-negative);
+$label-color-text: var(--fkds-color-text-primary) !default;
+$label-color-text-description: var(--fkds-color-text-primary) !default;
+$label-color-text-description-format: var(--fkds-color-text-secondary) !default;
+$label-color-text-message-error: var(--fkds-color-feedback-text-negative) !default;

package/src/components/layout-application-template/_index.scss

@@ -0,0 +1 @@
+@use "layout-application-template";

package/src/components/layout-application-template/_layout-application-template.scss

@@ -3,10 +3,9 @@
 @use "../../core/config-variables" as vars;
 @use "../z-index";
 
-$LAYOUT_APPLICATION_SELECTOR: ".layout-application-template" !default;
 $ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
 
-#{$LAYOUT_APPLICATION_SELECTOR} {
+.layout-application-template {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -34,17 +33,17 @@ $ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
     }
 }
 
-#{$LAYOUT_APPLICATION_SELECTOR}__body {
+.layout-application-template__body {
     margin: 0;
     padding: 0;
     min-height: 100vh;
 }
 
-#{$LAYOUT_APPLICATION_SELECTOR}__body > div {
+.layout-application-template__body > div {
     height: 100%;
 }
 
-#{$LAYOUT_APPLICATION_SELECTOR}__html {
+.layout-application-template__html {
     height: 100%;
 }
 

package/src/components/layout-application-template/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/layout-navigation/_index.scss

@@ -0,0 +1 @@
+@use "layout-navigation";

package/src/components/layout-navigation/_layout-navigation.scss

@@ -1,6 +1,5 @@
 @use "../z-index";
 
-$LAYOUT_NAVIGATION_SELECTOR: ".layout-navigation" !default;
 $ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
 
 // parameters
@@ -20,7 +19,7 @@ $border-hover-navigation: #{$palette-color-bluebell-15};
 $border-dots-navigation: #{$palette-color-fk-black-50};
 $scrollbar-navigation: #{$palette-color-fk-black-50};
 
-#{$LAYOUT_NAVIGATION_SELECTOR} {
+.layout-navigation {
     min-height: 100%;
     width: 100%;
 

package/src/components/layout-navigation/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/layout-secondary/_index.scss

@@ -0,0 +1 @@
+@use "layout-secondary";

package/src/components/layout-secondary/_layout-secondary.scss

@@ -1,6 +1,5 @@
 @use "../z-index";
 
-$LAYOUT_SECONDARY_SELECTOR: ".layout-secondary" !default;
 $ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;
 
 // parameters
@@ -20,7 +19,7 @@ $border-hover-secondary: #{$palette-color-bluebell-15};
 $border-dots-secondary: #{$palette-color-fk-black-50};
 $scrollbar-secondary: #{$palette-color-fk-black-50};
 
-#{$LAYOUT_SECONDARY_SELECTOR} {
+.layout-secondary {
     width: 100%;
     min-height: 100%;
 
@@ -120,7 +119,6 @@ $scrollbar-secondary: #{$palette-color-fk-black-50};
 
     @media (width <=1280px) {
         &__secondary {
-            /* stylelint-disable-next-line color-function-notation, alpha-value-notation -- technical debt */
             box-shadow:
                 4px 0 2px rgb(0, 0, 0, 0.5),
                 -4px 0 2px rgb(0, 0, 0, 0.5);

package/src/components/layout-secondary/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/list/_index.scss

@@ -0,0 +1 @@
+@use "list";

package/src/components/list/_list.scss

@@ -2,8 +2,6 @@
 @use "../../core/config-variables";
 @use "../../core/size";
 
-$LIST_SELECTOR: ".list" !default;
-
 // list item specific variables
 $list-border: var(--f-border-width-medium) solid var(--f-border-color-grid);
 $list-padding: size.$padding-075;
@@ -27,7 +25,7 @@ $list-selectpane-padding: calc(var(--f-list-item-itempane-padding) - 0.2rem);
     background: var(--f-background-grid-active);
 }
 
-#{$LIST_SELECTOR} {
+.list {
     margin: $list-margin;
     padding-left: 0;
 
@@ -90,12 +88,12 @@ $list-selectpane-padding: calc(var(--f-list-item-itempane-padding) - 0.2rem);
     }
 
     &--hover {
-        #{$LIST_SELECTOR}__item:focus-within,
-        #{$LIST_SELECTOR}__item:hover {
+        .list__item:focus-within,
+        .list__item:hover {
             cursor: pointer;
             @extend %list-item-hover;
 
-            &#{$LIST_SELECTOR}__item {
+            &.list__item {
                 &--active {
                     @extend %list-item-active;
                 }

package/src/components/list/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/loader/_index.scss

@@ -0,0 +1 @@
+@use "loader";

package/src/components/loader/_loader.scss

@@ -1,8 +1,6 @@
 @use "../../core/size";
 @use "../z-index";
 
-$LOADER_SELECTOR: ".loader" !default;
-
 @keyframes bouncedelay {
     0%,
     80%,
@@ -25,7 +23,7 @@ $LOADER_SELECTOR: ".loader" !default;
     }
 }
 
-#{$LOADER_SELECTOR} {
+.loader {
     div[tabindex] {
         outline: none;
     }
@@ -66,7 +64,7 @@ $LOADER_SELECTOR: ".loader" !default;
     }
 
     &--overlay {
-        #{$LOADER_SELECTOR}__backdrop {
+        .loader__backdrop {
             align-items: center;
             background: var(--f-background-overlay);
             display: flex;
@@ -80,11 +78,11 @@ $LOADER_SELECTOR: ".loader" !default;
             z-index: z-index.$LOADER_OVERLAY_ZINDEX;
         }
 
-        #{$LOADER_SELECTOR}__wait-text {
+        .loader__wait-text {
             color: var(--f-text-color-default-inverted);
         }
 
-        #{$LOADER_SELECTOR}__circle {
+        .loader__circle {
             background-color: var(--f-icon-color-white);
         }
     }

package/src/components/loader/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/logo/_index.scss

@@ -0,0 +1 @@
+@use "logo";

package/src/components/logo/_logo.scss

@@ -1,8 +1,6 @@
 @use "../../core/mixins/breakpoints";
 
-$LOGO_SELECTOR: ".logo" !default;
-
-#{$LOGO_SELECTOR} {
+.logo {
     display: inline-block;
 
     &--small {

package/src/components/logo/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/message-box/_index.scss

@@ -0,0 +1 @@
+@use "message-box";

package/src/components/message-box/_message-box.scss

@@ -3,9 +3,7 @@
 @use "../../core/mixins/breakpoints";
 @use "variables" as *;
 
-$MESSAGE_BOX_SELECTOR: ".message-box" !default;
-
-@mixin make-box-variant($MESSAGE_BOX_SELECTOR, $background-color, $border-color, $short-layout: false) {
+@mixin make-box-variant($background-color, $border-color, $short-layout: false, $selector: ".message-box") {
     border: var(--f-border-width-medium) solid;
     border-color: $border-color;
     background-color: $background-color;
@@ -14,7 +12,7 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default;
     @if $short-layout {
         border-left: size.$padding-100 solid $border-color;
 
-        #{$MESSAGE_BOX_SELECTOR} {
+        #{$selector} {
             &__icon {
                 font-size: 0; // ignore any whitespaces in template affecting height
 
@@ -47,20 +45,20 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default;
     }
 }
 
-@mixin messagebox-banner-variant($selector, $short-layout: false) {
+@mixin messagebox-banner-variant($short-layout: false, $selector: ".message-box") {
     width: var(--f-width-full);
     box-shadow: var(--f-box-modal-shadow);
     border-collapse: separate;
     padding: core.densify(size.$padding-100) size.$padding-100;
 
-    @include make-box-variant($selector, $messagebox-error-color-background, $messagebox-error-color-border, $short-layout);
+    @include make-box-variant($messagebox-error-color-background, $messagebox-error-color-border, $short-layout, $selector: $selector);
 
     .iflex__item > p {
         margin-bottom: 0;
     }
 }
 
-#{$MESSAGE_BOX_SELECTOR} {
+.message-box {
     padding: core.densify(size.$padding-150) size.$padding-150;
     margin: size.$margin-050 0 core.densify(size.$margin-200) 0;
 
@@ -79,39 +77,39 @@ $MESSAGE_BOX_SELECTOR: ".message-box" !default;
     }
 
     &--info {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-info-color-background, $messagebox-info-color-border);
+        @include make-box-variant($messagebox-info-color-background, $messagebox-info-color-border);
     }
 
     &--info-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-info-color-background, $messagebox-info-color-border, $short-layout: true);
+        @include make-box-variant($messagebox-info-color-background, $messagebox-info-color-border, $short-layout: true);
     }
 
     &--error {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-error-color-background, $messagebox-error-color-border);
+        @include make-box-variant($messagebox-error-color-background, $messagebox-error-color-border);
     }
 
     &--error-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-error-color-background, $messagebox-error-color-border, $short-layout: true);
+        @include make-box-variant($messagebox-error-color-background, $messagebox-error-color-border, $short-layout: true);
     }
 
     &--warning {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-warning-color-background, $messagebox-warning-color-border);
+        @include make-box-variant($messagebox-warning-color-background, $messagebox-warning-color-border);
     }
 
     &--warning-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-warning-color-background, $messagebox-warning-color-border, $short-layout: true);
+        @include make-box-variant($messagebox-warning-color-background, $messagebox-warning-color-border, $short-layout: true);
     }
 
     &--success {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-success-color-background, $messagebox-success-color-border);
+        @include make-box-variant($messagebox-success-color-background, $messagebox-success-color-border);
     }
 
     &--success-short {
-        @include make-box-variant($MESSAGE_BOX_SELECTOR, $messagebox-success-color-background, $messagebox-success-color-border, $short-layout: true);
+        @include make-box-variant($messagebox-success-color-background, $messagebox-success-color-border, $short-layout: true);
     }
 
     &--banner {
-        @include messagebox-banner-variant($MESSAGE_BOX_SELECTOR);
+        @include messagebox-banner-variant;
     }
 
     @include breakpoints.breakpoint-down(sm) {

package/src/components/message-box/_variables.scss

@@ -1,10 +1,10 @@
-$messagebox-info-color-background: var(--fkds-color-feedback-background-info);
-$messagebox-info-color-border: var(--fkds-color-feedback-border-info);
-$messagebox-error-color-background: var(--fkds-color-feedback-background-negative);
-$messagebox-error-color-border: var(--fkds-color-feedback-border-negative);
-$messagebox-warning-color-background: var(--fkds-color-feedback-background-warning);
-$messagebox-warning-color-border: var(--fkds-color-feedback-border-warning);
-$messagebox-success-color-background: var(--fkds-color-feedback-background-positive);
-$messagebox-success-color-border: var(--fkds-color-feedback-border-positive);
-$messagebox-info-color-heading: var(--fkds-color-text-primary);
-$messagebox-error-icon-error-color-border: var(--fkds-icon-color-feedback-content-negative);
+$messagebox-info-color-background: var(--fkds-color-feedback-background-info) !default;
+$messagebox-info-color-border: var(--fkds-color-feedback-border-info) !default;
+$messagebox-error-color-background: var(--fkds-color-feedback-background-negative) !default;
+$messagebox-error-color-border: var(--fkds-color-feedback-border-negative) !default;
+$messagebox-warning-color-background: var(--fkds-color-feedback-background-warning) !default;
+$messagebox-warning-color-border: var(--fkds-color-feedback-border-warning) !default;
+$messagebox-success-color-background: var(--fkds-color-feedback-background-positive) !default;
+$messagebox-success-color-border: var(--fkds-color-feedback-border-positive) !default;
+$messagebox-info-color-heading: var(--fkds-color-text-primary) !default;
+$messagebox-error-icon-error-color-border: var(--fkds-icon-color-feedback-content-negative) !default;

package/src/components/modal/_index.scss

@@ -0,0 +1 @@
+@use "modal";

package/src/components/modal/_modal.scss

@@ -4,7 +4,6 @@
 @use "../../core/mixins/breakpoints";
 @use "variables" as *;
 
-$MODAL_SELECTOR: ".modal" !default;
 $modal-sizes: (
     "small": var(--f-modal-size-small),
     "medium": var(--f-modal-size-medium),
@@ -13,7 +12,7 @@ $modal-sizes: (
 ) !default;
 $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
 
-#{$MODAL_SELECTOR} {
+.modal {
     &__backdrop {
         background: var(--f-background-overlay);
         display: flex;
@@ -55,7 +54,7 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
         margin-bottom: size.$margin-050;
         width: 100%;
 
-        #{$MODAL_SELECTOR}__title {
+        .modal__title {
             font-size: var(--f-modal-title-font-size);
             margin-bottom: 0;
             margin-top: 0;
@@ -86,17 +85,17 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
                 width: 100%;
                 max-width: none;
 
-                #{$MODAL_SELECTOR}__dialog {
+                .modal__dialog {
                     min-height: 100vh;
                 }
 
-                #{$MODAL_SELECTOR}__dialog-inner {
+                .modal__dialog-inner {
                     flex: 1 1 auto;
                     display: flex;
                     flex-direction: column;
                 }
 
-                #{$MODAL_SELECTOR}__content {
+                .modal__content {
                     flex: 1 1 auto;
                 }
             }
@@ -115,7 +114,7 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
         position: relative;
         z-index: z-index.$MODAL_ZINDEX;
 
-        #{$MODAL_SELECTOR}__dialog-inner {
+        .modal__dialog-inner {
             height: auto;
             margin: 0 size.$margin-150 size.$margin-150;
 
@@ -124,7 +123,7 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
             }
         }
 
-        #{$MODAL_SELECTOR}__footer {
+        .modal__footer {
             margin-top: size.$margin-200;
 
             > .button-group {
@@ -153,18 +152,18 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
         }
     }
 
-    &--information #{$MODAL_SELECTOR}__shelf {
+    &--information .modal__shelf {
         background-color: $modal-shelf-info-color-background;
         .close-button {
             color: $modal-color-closebutton-text-inverted;
         }
     }
 
-    &--warning #{$MODAL_SELECTOR}__shelf {
+    &--warning .modal__shelf {
         background-color: $modal-shelf-warning-color-background;
     }
 
-    &--error #{$MODAL_SELECTOR}__shelf {
+    &--error .modal__shelf {
         background-color: $modal-shelf-error-color-background;
         .close-button {
             color: $modal-color-closebutton-text-inverted;

package/src/components/modal/_variables.scss

@@ -1,7 +1,7 @@
-$modal-shelf-color-background: var(--fkds-color-background-primary);
-$modal-shelf-info-color-background: var(--fkds-color-feedback-background-info-strong);
-$modal-shelf-warning-color-background: var(--fkds-color-feedback-background-warning-strong);
-$modal-shelf-error-color-background: var(--fkds-color-feedback-background-negative-strong);
-$modal-color-background: var(--fkds-color-background-primary);
-$modal-color-closebutton-text-inverted: var(--fkds-color-action-text-inverted-default);
-$modal-text-color-default: var(--fkds-color-text-primary);
+$modal-shelf-color-background: var(--fkds-color-background-primary) !default;
+$modal-shelf-info-color-background: var(--fkds-color-feedback-background-info-strong) !default;
+$modal-shelf-warning-color-background: var(--fkds-color-feedback-background-warning-strong) !default;
+$modal-shelf-error-color-background: var(--fkds-color-feedback-background-negative-strong) !default;
+$modal-color-background: var(--fkds-color-background-primary) !default;
+$modal-color-closebutton-text-inverted: var(--fkds-color-action-text-inverted-default) !default;
+$modal-text-color-default: var(--fkds-color-text-primary) !default;

package/src/components/navigation-menu/_index.scss

@@ -0,0 +1 @@
+@use "navigation-menu";

package/src/components/navigation-menu/_navigation-menu.scss

@@ -2,9 +2,7 @@
 @use "../../core/mixins/breakpoints";
 @use "../../core/config-variables";
 
-$IMENU_SELECTOR: ".imenu" !default;
-
-#{$IMENU_SELECTOR} {
+.imenu {
     &__list {
         background-color: var(--f-background-menu);
         margin: 0;
@@ -43,7 +41,7 @@ $IMENU_SELECTOR: ".imenu" !default;
     }
 }
 
-#{$IMENU_SELECTOR}--vertical {
+.imenu--vertical {
     .imenu__list {
         display: block;
 
@@ -68,7 +66,7 @@ $IMENU_SELECTOR: ".imenu" !default;
     }
 }
 
-#{$IMENU_SELECTOR}--horizontal {
+.imenu--horizontal {
     overflow: hidden;
 
     .imenu__list {

package/src/components/navigation-menu/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/offline/_index.scss

@@ -0,0 +1 @@
+@use "offline";

package/src/components/offline/_offline.scss

@@ -3,16 +3,12 @@
 @use "../z-index";
 @use "../icon/icon";
 
-$OFFLINE_SELECTOR: ".offline" !default;
-
 // @at-root is used to set these classes globally due to styling scope issue where the component is used out of the styling scope
 @at-root {
-    #{$OFFLINE_SELECTOR} {
-        @include message-box.messagebox-banner-variant($selector: $OFFLINE_SELECTOR, $short-layout: true);
+    .offline {
+        @include message-box.messagebox-banner-variant($selector: ".offline", $short-layout: true);
 
-        & {
-            padding: size.$padding-150;
-        }
+        padding: size.$padding-150;
 
         // Since @at-root is used also icon classes being used by the component must be redefined,
         // because they might not exist at the global scope.

package/src/components/offline/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/output-field/_index.scss

@@ -0,0 +1 @@
+@use "output-field";

package/src/components/output-field/_output-field.scss

@@ -1,9 +1,7 @@
 @use "../../core";
 @use "../../core/config-variables";
 
-$OUTPUT_FIELD_SELECTOR: ".output-field" !default;
-
-#{$OUTPUT_FIELD_SELECTOR} {
+.output-field {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;

package/src/components/output-field/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/page-header/_index.scss

@@ -0,0 +1 @@
+@use "page-header";

package/src/components/page-header/_page-header.scss

@@ -1,9 +1,8 @@
 @use "../../core/size";
 
-$PAGE_HEADER_SELECTOR: ".page-header" !default;
 $page-header-separator-width: 1px !default;
 
-#{$PAGE_HEADER_SELECTOR} {
+.page-header {
     display: flex;
     flex-direction: row;
     width: 100%;

package/src/components/page-header/_variables.scss

@@ -0,0 +1 @@
+// stylelint-disable no-empty-source -- placeholder file

package/src/components/progressbar/_index.scss

@@ -0,0 +1 @@
+@use "progressbar";

package/src/components/progressbar/_progressbar.scss

@@ -1,11 +1,10 @@
 @use "../../core/size";
 @use "variables" as *;
 
-$PROGRESS_BAR_SELECTOR: ".progress" !default;
 $progressbar-height: var(--f-height-small);
 $progressbar-border-width: var(--f-border-width-medium);
 
-#{$PROGRESS_BAR_SELECTOR} {
+.progress {
     background-color: $progressbar-color-background;
     border-radius: var(--f-border-radius-medium);
     height: $progressbar-height;

package/src/components/progressbar/_variables.scss

@@ -1,4 +1,4 @@
-$progressbar-color-background: var(--fkds-color-background-primary);
-$progressbar-color-meter-inprogress: var(--fkds-color-feedback-background-positive-strong);
-$progressbar-color-meter-finished: var(--fkds-color-feedback-background-positive-strong);
-$progressbar-color-border: var(--fkds-color-feedback-border-positive);
+$progressbar-color-background: var(--fkds-color-background-primary) !default;
+$progressbar-color-meter-inprogress: var(--fkds-color-feedback-background-positive-strong) !default;
+$progressbar-color-meter-finished: var(--fkds-color-feedback-background-positive-strong) !default;
+$progressbar-color-border: var(--fkds-color-feedback-border-positive) !default;

package/src/components/radio-button/_item.scss

@@ -1,8 +1,5 @@
 @use ".././list/list";
 
-$RADIO_BUTTON_SELECTOR: ".radio-button" !default;
-$CHECKBOX_SELECTOR: ".checkbox" !default;
-
 %selectable-item {
     border: list.$list-border;
     margin-bottom: 0;
@@ -39,8 +36,8 @@ $CHECKBOX_SELECTOR: ".checkbox" !default;
     }
 }
 
-#{$RADIO_BUTTON_SELECTOR,
-$CHECKBOX_SELECTOR} {
+.radio-button,
+.checkbox {
     &__details {
         display: block;
     }

package/src/components/radio-button/_radio-button-group.scss

@@ -3,33 +3,31 @@
 @use "./radio-button";
 @use "./item";
 
-$RADIO_BUTTON_GROUP_SELECTOR: ".radio-button-group" !default;
-
-#{$RADIO_BUTTON_GROUP_SELECTOR} {
+.radio-button-group {
     &__content {
         display: flex;
         flex-direction: column;
     }
 
     &--horizontal {
-        #{$RADIO_BUTTON_GROUP_SELECTOR}__content {
+        .radio-button-group__content {
             flex-direction: row;
 
-            #{radio-button.$RADIO_BUTTON_SELECTOR} {
+            .radio-button {
                 margin-bottom: 0;
             }
 
             @include bp.breakpoint-down(sm) {
                 flex-direction: column;
 
-                #{radio-button.$RADIO_BUTTON_SELECTOR} {
+                .radio-button {
                     margin-bottom: size.$margin-100;
                 }
             }
         }
     }
     &--border {
-        #{$RADIO_BUTTON_GROUP_SELECTOR}__content {
+        .radio-button-group__content {
             .radio-button {
                 @extend %selectable-item;
             }