amis-ui 6.9.0 → 6.10.0-beta.1

package/scss/components/form/_checks.scss

@@ -1,66 +1,22 @@
 .#{$ns}Checkbox {
   margin: 0 var(--gap-sm) 0 0;
   font-weight: var(--fontWeightNormal);
-  user-select: none;
-  pointer-events: none;
+  display: inline-block;
+  cursor: pointer;
 
-  input {
-    position: absolute;
-    clip: rect(1px 1px 1px 1px);
-    clip: rect(1px, 1px, 1px, 1px);
-    pointer-events: none;
-  }
-
-  &:hover input:not(:disabled) + i {
-    border-color: var(--Checkbox-onHover-color);
-    // box-shadow: 0 0 px2rem(1px) var(--Checkbox-onHover-color) inset;
+  &.disabled {
+    cursor: not-allowed;
   }
 
-  &.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--button {
-    > i + span {
-      margin-left: 0;
-    }
+  > input {
+    display: none;
   }
 
   > i {
-    cursor: pointer;
     line-height: 1;
-    background: var(--Checkbox-gb);
     display: inline-block;
     vertical-align: text-bottom;
     position: relative;
-    pointer-events: all;
-
-    + span {
-      pointer-events: all;
-      margin-left: var(--gap-sm);
-      cursor: pointer;
-      display: inline-block;
-      vertical-align: top;
-
-      > a {
-        // float: right;
-        margin-left: var(--gap-xs);
-        display: none;
-      }
-
-      &:empty {
-        display: none;
-      }
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 0px;
-      height: 0px;
-      background: transparent;
-      transition: all var(--animation-duration);
-      transform-origin: 50% 50%;
-      transform: translate(-50%, -50%);
-    }
   }
 
   &.is-mobile {
@@ -71,530 +27,295 @@
     }
   }
 
-  &:hover > i + span > a {
-    display: inline-block;
-  }
-
-  &--checkbox {
-    padding-left: var(--Checkbox-size);
-    font-weight: var(--checkbox-checkbox-default-fontWeight);
-    font-size: var(--checkbox-checkbox-default-fontSize);
-    color: var(--checkbox-checkbox-default-text-color);
-
-    &:hover {
-      color: var(--checkbox-checkbox-hover-text-color);
+  &--partial {
+    .checkbox-icon {
+      content: var(--checkbox-default-partial-default-icon);
     }
-    &:active {
-      color: var(--checkbox-checkbox-active-text-color);
-    }
-
-    input {
-      margin-left: calc(var(--Checkbox-size) * -1);
-
-      &:checked + i {
-        border-width: var(--checkbox-checked-default-top-border-width)
-          var(--checkbox-checked-default-right-border-width)
-          var(--checkbox-checked-default-bottom-border-width)
-          var(--checkbox-checked-default-left-border-width);
-        border-style: var(--checkbox-checked-default-top-border-style)
-          var(--checkbox-checked-default-right-border-style)
-          var(--checkbox-checked-default-bottom-border-style)
-          var(--checkbox-checked-default-left-border-style);
-        border-color: var(--checkbox-checked-default-top-border-color)
-          var(--checkbox-checked-default-right-border-color)
-          var(--checkbox-checked-default-bottom-border-color)
-          var(--checkbox-checked-default-left-border-color);
-        border-radius: var(--checkbox-checked-default-top-left-border-radius)
-          var(--checkbox-checked-default-top-right-border-radius)
-          var(--checkbox-checked-default-bottom-right-border-radius)
-          var(--checkbox-checked-default-bottom-left-border-radius);
-
-        &:hover {
-          border-width: var(--checkbox-checkbox-hover-top-border-width)
-            var(--checkbox-checkbox-hover-right-border-width)
-            var(--checkbox-checkbox-hover-bottom-border-width)
-            var(--checkbox-checkbox-hover-left-border-width);
-          border-style: var(--checkbox-checkbox-hover-top-border-style)
-            var(--checkbox-checkbox-hover-right-border-style)
-            var(--checkbox-checkbox-hover-bottom-border-style)
-            var(--checkbox-checkbox-hover-left-border-style);
-          border-color: var(--checkbox-checkbox-hover-top-border-color)
-            var(--checkbox-checkbox-hover-right-border-color)
-            var(--checkbox-checkbox-hover-bottom-border-color)
-            var(--checkbox-checkbox-hover-left-border-color);
-          border-radius: var(--checkbox-checkbox-hover-top-left-border-radius)
-            var(--checkbox-checkbox-hover-top-right-border-radius)
-            var(--checkbox-checkbox-hover-bottom-right-border-radius)
-            var(--checkbox-checkbox-hover-bottom-left-border-radius);
-        }
-
-        &:before {
-          width: var(--Checkbox-inner-size);
-          height: var(--Checkbox-inner-size);
-        }
-      }
-
-      &[disabled] + i {
-        border-color: var(--Checkbox-color) !important;
-        cursor: not-allowed;
-        background-color: var(--checkbox-checkbox-disabled-bg-color);
-        &:before {
-          border-width: 0;
-        }
-      }
+  }
 
-      &[disabled] + i + span {
-        cursor: not-allowed;
-        color: var(--checkbox-checkbox-disabled-text-color);
-      }
+  @mixin checkbox-default-style($type) {
+    font-size: var(#{$type}-fontSize);
+    color: var(#{$type}-text-color);
+    > i {
+      width: var(#{$type}-height);
+      height: var(#{$type}-height);
+      border-width: borderWidth(#{$type});
+      border-style: borderStyle(#{$type});
+      border-color: borderColor(#{$type});
+      border-radius: radius(#{$type});
+      background: var(#{$type}-bg-color);
     }
+  }
 
+  &--checkbox--default {
+    font-weight: var(--checkbox-default-default-fontWeight);
+    @include checkbox-default-style(--checkbox-default-default);
     > i {
-      width: var(--Checkbox-size);
-      height: var(--Checkbox-size);
-      border: px2rem(1px) solid var(--Checkbox-color);
-      border-radius: var(--Checkbox-borderRadius);
-      margin-left: calc(var(--Checkbox-size) * -1);
-
-      border-width: var(--checkbox-checkbox-default-top-border-width)
-        var(--checkbox-checkbox-default-right-border-width)
-        var(--checkbox-checkbox-default-bottom-border-width)
-        var(--checkbox-checkbox-default-left-border-width);
-      border-style: var(--checkbox-checkbox-default-top-border-style)
-        var(--checkbox-checkbox-default-right-border-style)
-        var(--checkbox-checkbox-default-bottom-border-style)
-        var(--checkbox-checkbox-default-left-border-style);
-      border-color: var(--checkbox-checkbox-default-top-border-color)
-        var(--checkbox-checkbox-default-right-border-color)
-        var(--checkbox-checkbox-default-bottom-border-color)
-        var(--checkbox-checkbox-default-left-border-color);
-      border-radius: var(--checkbox-checkbox-default-top-left-border-radius)
-        var(--checkbox-checkbox-default-top-right-border-radius)
-        var(--checkbox-checkbox-default-bottom-right-border-radius)
-        var(--checkbox-checkbox-default-bottom-left-border-radius);
-      background: var(--checkbox-checkbox-default-bg-color);
-
-      &:hover {
-        border-width: var(--checkbox-checkbox-hover-top-border-width)
-          var(--checkbox-checkbox-hover-right-border-width)
-          var(--checkbox-checkbox-hover-bottom-border-width)
-          var(--checkbox-checkbox-hover-left-border-width);
-        border-style: var(--checkbox-checkbox-hover-top-border-style)
-          var(--checkbox-checkbox-hover-right-border-style)
-          var(--checkbox-checkbox-hover-bottom-border-style)
-          var(--checkbox-checkbox-hover-left-border-style);
-        border-color: var(--checkbox-checkbox-hover-top-border-color)
-          var(--checkbox-checkbox-hover-right-border-color)
-          var(--checkbox-checkbox-hover-bottom-border-color)
-          var(--checkbox-checkbox-hover-left-border-color);
-        border-radius: var(--checkbox-checkbox-hover-top-left-border-radius)
-          var(--checkbox-checkbox-hover-top-right-border-radius)
-          var(--checkbox-checkbox-hover-bottom-right-border-radius)
-          var(--checkbox-checkbox-hover-bottom-left-border-radius);
-        background: var(--checkbox-checkbox-hover-bg-color);
-      }
-      &:active {
-        border-width: var(--checkbox-checkbox-active-top-border-width)
-          var(--checkbox-checkbox-active-right-border-width)
-          var(--checkbox-checkbox-active-bottom-border-width)
-          var(--checkbox-checkbox-active-left-border-width);
-        border-style: var(--checkbox-checkbox-active-top-border-style)
-          var(--checkbox-checkbox-active-right-border-style)
-          var(--checkbox-checkbox-active-bottom-border-style)
-          var(--checkbox-checkbox-active-left-border-style);
-        border-color: var(--checkbox-checkbox-active-top-border-color)
-          var(--checkbox-checkbox-active-right-border-color)
-          var(--checkbox-checkbox-active-bottom-border-color)
-          var(--checkbox-checkbox-active-left-border-color);
-        border-radius: var(--checkbox-checkbox-active-top-left-border-radius)
-          var(--checkbox-checkbox-active-top-right-border-radius)
-          var(--checkbox-checkbox-active-bottom-right-border-radius)
-          var(--checkbox-checkbox-active-bottom-left-border-radius);
-        background: var(--checkbox-checkbox-active-bg-color);
+      margin-right: var(--checkbox-default-default-distance);
+      .icon {
+        height: var(--checkbox-default-checked-default-icon-size);
+        width: var(--checkbox-default-checked-default-icon-size);
+        color: var(--checkbox-default-checked-default-icon-color);
+        transition: all var(--animation-duration);
+        transform: scale(0);
       }
     }
 
-    &.#{$ns}Checkbox {
-      &:hover {
-        & > input + i {
-          border-color: var(--button-primary-hover-top-border-color)
-            var(--button-primary-hover-right-border-color)
-            var(--button-primary-hover-bottom-border-color)
-            var(--button-primary-hover-left-border-color);
-        }
-      }
-
-      &:active {
-        & > i:before {
-          background: var(--Checkbox-checked-onHover-bgColor);
-        }
-      }
+    &:hover:not(.disabled):not(.checked) {
+      @include checkbox-default-style(--checkbox-default-hover);
     }
-  }
-
-  &--full.#{$ns}Checkbox--checkbox {
-    &:not(:disabled) + i:hover {
-      border-color: var(--Checkbox-color);
+    &:active:not(.disabled):not(.checked) {
+      @include checkbox-default-style(--checkbox-default-active);
     }
-
-    &:hover {
-      input:checked + i {
-        background: var(--button-primary-hover-bg-color);
-        border-color: transparent;
-      }
-
-      & > i:before {
-        background: transparent;
+  }
+  &--checkbox--default--checked {
+    @include checkbox-default-style(--checkbox-default-checked-default);
+    > i {
+      .icon {
+        transform: scale(1);
       }
     }
-
-    &:active {
-      input:checked + i {
-        background: var(--Checkbox-checked-onHover-bgColor);
-      }
+    &:hover:not(.disabled) {
+      @include checkbox-default-style(--checkbox-default-checked-hover);
     }
-
-    input {
-      &:checked + i {
-        border-color: var(--Checkbox-onHover-color);
-        background: var(--Checkbox-onHover-color);
-
-        &:before {
-          width: var(--Checkbox--full-inner-size);
-          height: calc(var(--Checkbox--full-inner-size) / 2);
-          border-color: #fff;
-        }
-      }
-
-      &[disabled] + i {
-        border-color: var(--Checkbox-color);
-        background: var(--checkbox-checkbox-disabled-bg-color);
-      }
-
-      &[disabled]:checked + i {
-        &:before {
-          border-color: var(--Checkbox-onDisabled-color);
-          border-width: 0 0 px2rem(1px) px2rem(1px);
-        }
-      }
-
-      &:checked[disabled] + i {
-        border-color: var(--Checkbox-color);
-      }
+    &:active:not(.disabled) {
+      @include checkbox-default-style(--checkbox-default-checked-active);
     }
-
+  }
+  &--checkbox--default--disabled--unchecked {
+    @include checkbox-default-style(--checkbox-default-disabled);
+  }
+  &--checkbox--default--disabled--checked {
+    @include checkbox-default-style(--checkbox-default-checked-disabled);
     > i {
-      position: relative;
-      cursor: pointer;
-
-      &:before {
-        content: '';
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        transition: width var(--animation-duration),
-          height var(--animation-duration), transform var(--animation-duration);
-        border-width: 0 0 px2rem(1px) px2rem(1px);
-        transform: translate(-50%, -90%) rotate(-40deg);
-        border-style: solid;
+      .icon {
+        transform: scale(1);
+        color: var(--checkbox-default-checked-disabled-icon-color);
       }
     }
   }
 
-  &--partial.#{$ns}Checkbox--checkbox {
-    input {
-      margin-left: calc(var(--Checkbox-size) * -1);
-
-      & + i {
-        border-color: var(--Checkbox-onHover-color);
-
-        &:before {
-          width: var(--Checkbox-inner-size);
-          height: var(--Checkbox-inner-size);
-        }
-      }
-
-      &[disabled] + i {
-        border-color: var(--Checkbox-onDisabled-color);
-
-        &:before {
-          width: var(--Checkbox-inner-size);
-          height: var(--Checkbox-inner-size);
-          background: var(--Checkbox-inner-onDisabled-bg);
-        }
-      }
-
-      &:checked[disabled] + i {
-        width: var(--Checkbox-inner-size);
-        height: var(--Checkbox-inner-size);
-        background: var(--Checkbox-onDisabled-bg);
+  @mixin checkbox-button-style($type) {
+    border-color: borderColor(#{$type});
+    color: var(#{$type}-text-color);
+    > i {
+      width: var(#{$type}-icon-bg-size);
+      height: var(#{$type}-icon-bg-size);
+      background-color: var(#{$type}-icon-bg-color);
+      .icon {
+        width: var(#{$type}-icon-size);
+        height: var(#{$type}-icon-size);
+        color: var(#{$type}-icon-color);
       }
     }
   }
-  &--button.#{$ns}Checkbox--checkbox {
+
+  &--checkbox--button {
     text-align: center;
-    height: var(--Checkbox-button-height);
-    line-height: var(--Checkbox-button-line-height);
-    padding-left: var(--Checkbox-paddingX);
-    padding-right: var(--Checkbox-paddingX);
-    font-size: var(--fontSizeSm);
-    border: var(--Checkbox-border-width) solid;
-    cursor: pointer;
+    height: var(--checkbox-button-default-height);
+    line-height: var(--checkbox-button-default-lineHeight);
+    padding: padding(--checkbox-button-default);
+    min-width: px2rem(80px);
+    font-size: var(--checkbox-button-default-fontSize);
+    color: var(--checkbox-button-default-text-color);
+    border-radius: 0;
+    border-color: borderColor(--checkbox-button-default);
+    border-width: borderWidth(--checkbox-button-default);
+    border-style: borderStyle(--checkbox-button-default);
+    margin-right: calc(
+      var(--checkbox-button-default-right-border-width) * -1
+    ) !important;
     position: relative;
-    display: inline-block;
-    background-color: var(--Checkbox-gb);
-    border-color: var(--Checkbox-color);
-    margin-right: 0;
-    border-radius: calc(var(--Checkbox-borderRadius) * 2);
-    min-width: var(--Checkbox-button-min-width);
-    > span {
-      line-height: var(--Checkbox-button-line-height);
-    }
-    &:hover:not(:disabled) {
-      color: var(--Checkbox-onHover-color);
-      border-color: var(--Checkbox-onHover-color);
-      box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color);
-      &:first-child {
-        box-shadow: none;
-      }
+    &.first {
+      border-radius: var(--checkbox-button-default-top-left-border-radius) 0 0
+        var(--checkbox-button-default-bottom-left-border-radius);
     }
-
-    &:hover {
-      input:checked + i {
-        background: transparent;
-        border-color: var(--button-primary-hover-top-border-color) transparent
-          transparent var(--button-primary-hover-left-border-color);
-      }
+    &.last {
+      border-radius: 0 var(--checkbox-button-default-top-right-border-radius)
+        var(--checkbox-button-default-bottom-right-border-radius) 0;
     }
-
-    &:active {
-      input:checked + i {
-        background: transparent;
-        border-color: var(--Checkbox-checked-onHover-bgColor) transparent
-          transparent var(--Checkbox-checked-onHover-bgColor);
-      }
+    &.first.last {
+      border-radius: var(--checkbox-button-default-top-left-border-radius)
+        var(--checkbox-button-default-top-right-border-radius)
+        var(--checkbox-button-default-bottom-right-border-radius)
+        var(--checkbox-button-default-bottom-left-border-radius);
     }
-
-    input {
-      &:checked + i {
-        background: transparent;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 0;
-        border-width: px2rem(8px);
-        border-color: var(--Checkbox-onHover-color) transparent transparent
-          var(--Checkbox-onHover-color);
-        border-radius: 0;
-
-        &:before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: var(--Checkbox--full-inner-size);
-          height: calc(var(--Checkbox--full-inner-size) / 2);
-          transform: translate(-80%, -160%) rotate(-50deg) scale(0.8);
-          background: transparent;
-        }
-      }
-
-      &[disabled] + i {
-        border-color: var(--Checkbox-onDisabled-color);
-        background: transparent;
-        &:before {
-          background: transparent;
-        }
-      }
-
-      &:checked[disabled] + i {
-        background: transparent;
-        border-width: px2rem(7px);
-        border-color: var(--Checkbox-inner-disabled-checked-bg) transparent
-          transparent var(--Checkbox-inner-disabled-checked-bg);
-        &:before {
-          background: transparent;
-          border-color: var(--Checkbox-inner-onDisabled-color) !important;
-        }
-      }
+    &.last-line {
+      margin-bottom: 0 !important;
+    }
+    &:hover:not(.disabled):not(.checked) {
+      color: var(--checkbox-button-hover-text-color);
+      border-color: borderColor(--checkbox-button-hover);
+      z-index: 1;
     }
+  }
+  &--checkbox--button--checked {
+    z-index: 1;
+    @include checkbox-button-style(--checkbox-button-checked-default);
     > i {
       position: absolute;
       top: 0;
       left: 0;
-      margin-left: 0;
-      border: 0;
-      border-style: solid;
-      background: transparent;
-
-      + span {
-        max-width: px2rem(100px);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
+      clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
+      .icon {
+        transform: scale(0.8) translate(-20%, -20%);
       }
     }
-  }
-  &--button--checked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--button {
-    border-color: var(--Checkbox-onHover-color);
-    color: var(--Checkbox-onHover-color);
-    box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color);
-    &:first-child {
-      box-shadow: none;
-    }
 
     &:hover {
-      border-color: var(--menu-active-color);
-      color: var(--menu-active-color);
-      box-shadow: -1px 0 0 0 var(--menu-active-color);
+      @include checkbox-button-style(--checkbox-button-checked-hover);
     }
     &:active {
-      border-color: var(--Checkbox-checked-onHover-bgColor);
-      color: var(--Checkbox-checked-onHover-bgColor);
-      box-shadow: -1px 0 0 0 var(--Checkbox-checked-onHover-bgColor);
+      @include checkbox-button-style(--checkbox-button-checked-active);
     }
   }
-  &--button--disabled--unchecked.#{$ns}Checkbox--checkbox {
-    background: var(--Checkbox-disabled-unchecked-bg);
-    border-color: var(--Checkbox-color);
-    &:hover {
-      border-color: var(--Checkbox-color) !important;
-      box-shadow: -1px 0 0 0 var(--Checkbox-color) !important;
-      &:first-child {
-        box-shadow: none !important;
-      }
-    }
+  &--checkbox--button--disabled--unchecked {
+    color: var(--checkbox-button-disabled-text-color);
+    background: var(--checkbox-button-disabled-bg-color);
+    border-color: borderColor(--checkbox-button-disabled);
   }
-  &--button--disabled--checked.#{$ns}Checkbox--checkbox {
-    background: var(--Checkbox-onDisabled-bg);
-    border-color: var(--Checkbox-color) !important;
-    box-shadow: none !important;
-    &:hover {
-      border-color: var(--Checkbox-color) !important;
+  &--checkbox--button--disabled--checked {
+    background: var(--checkbox-button-checked-disabled-bg-color);
+    @include checkbox-button-style(--checkbox-button-checked-disabled);
+    > i {
+      position: absolute;
+      top: 0;
+      left: 0;
+      clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
+      .icon {
+        transform: scale(0.8) translate(-20%, -20%);
+      }
     }
   }
-  &--radio {
-    padding-left: var(--Radio-size);
 
-    input {
-      margin-left: calc(var(--Radio-size) * -1);
-
-      &:checked + i {
-        border-color: var(--Radio-onHover-color);
-        background-color: var(--radio-default-active-bg-color);
-
-        + span {
-          color: var(--radio-default-active-text-color);
-        }
-
-        &:before {
-          width: var(--Radio-inner-size);
-          height: var(--Radio-inner-size);
-          background: var(--Radio-onHover-color);
-          border-radius: 50%;
-        }
-      }
-
-      &[disabled] + i {
-        border-color: var(--Radio-onDisabled-color);
-        background: var(--Radio-onDisabled-bg);
-        cursor: not-allowed;
-
-        &:before {
-          background: var(--Radio-onDisabled-color);
-        }
-      }
-
-      &[disabled] + i + span {
-        cursor: not-allowed;
-        color: var(--radio-default-disabled-text-color);
-      }
-
-      &:focus + i {
-        box-shadow: var(--Radio-onFocus-boxShadow);
-      }
-    }
+  &--radio--default {
+    color: var(--radio-default-default-text-color);
+    font-size: var(--radio-default-default-fontSize);
+    font-weight: var(--radio-default-default-fontWeight);
+    line-height: var(--radio-default-default-lineHeight);
 
     > i {
-      cursor: pointer;
-      width: var(--Radio-size);
-      height: var(--Radio-size);
-      border: px2rem(1px) solid var(--Radio-color);
-      margin-left: calc(var(--Radio-size) * -1);
+      width: var(--radio-default-default-point-size);
+      height: var(--radio-default-default-point-size);
+      border: var(--borders-width-2) var(--borders-style-2)
+        var(--radio-default-default-border-color);
       margin-top: px2rem(-2px);
-      border-radius: 50%;
+      border-radius: var(--borders-radius-7);
       background: var(--radio-default-default-bg-color);
-
-      + span {
-        color: var(--radio-default-default-text-color);
-        font-size: var(--radio-default-default-fontSize);
-        font-weight: var(--radio-default-default-fontWeight);
-        line-height: var(--radio-default-default-lineHeight);
-        margin-left: var(--radio-default-default-distance);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      .icon {
+        width: var(--radio-default-checked-icon-size);
+        height: var(--radio-default-checked-icon-size);
+        color: var(--radio-default-checked-icon-color);
+        transition: all var(--animation-duration);
+        transform: scale(0);
+        display: flex;
       }
     }
+    > span {
+      margin-left: var(--radio-default-default-distance);
+    }
 
-    &:hover input:not(:disabled) + i {
-      border-color: var(--radio-default-hover-color);
-      background-color: var(--radio-default-hover-bg-color);
-
-      &:before {
-        background: var(--radio-default-hover-color);
-      }
-
-      + span {
-        color: var(--radio-default-hover-text-color);
+    &:hover:not(.disabled) {
+      color: var(--radio-default-hover-text-color);
+      > i {
+        border-color: var(--radio-default-hover-border-color);
+        background-color: var(--radio-default-hover-bg-color);
       }
     }
-
-    &.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full {
-      background: none;
-
-      i {
-        background: var(--FileControl-onDisabled-bg);
-        border: 1px solid var(--menu-border-color);
-
-        &:before {
-          background: var(--Checkbox-inner-onDisabled-bg);
-        }
+  }
+  &--radio--default--checked {
+    color: var(--radio-default-checked-text-color);
+    > i {
+      border-color: var(--radio-default-checked-border-color);
+      background-color: var(--radio-default-checked-bg-color);
+      .icon {
+        transform: scale(1);
       }
     }
   }
+  &--radio--default--disabled--unchecked {
+    color: var(--radio-default-disabled-text-color);
+    > i {
+      border-color: var(--radio-default-disabled-border-color);
+      background-color: var(--radio-default-disabled-bg-color);
+    }
+  }
+  &--radio--default--disabled--checked {
+    color: var(--radio-default-disabled-text-color);
+    > i {
+      border-color: var(--radio-default-disabled-border-color);
+      background-color: var(--radio-default-disabled-bg-color);
 
-  &--sm {
-    padding-left: var(--Checkbox--sm-size);
-
-    input {
-      margin-left: calc(var(--Checkbox--sm-size) * -1);
-
-      &:checked + i {
-        &:before {
-          width: var(--Checkbox--sm-inner-size);
-          height: var(--Checkbox--sm-inner-size);
-        }
+      .icon {
+        color: var(--radio-default-disabled-icon-color);
+        transform: scale(1);
       }
     }
+  }
 
+  &--radio--button {
+    text-align: center;
+    height: var(--radio-button-default-height);
+    padding: padding(--radio-button-default);
+    min-width: px2rem(80px);
+    font-size: var(--radio-button-default-fontSize);
+    color: var(--radio-button-default-text-color);
+    line-height: var(--radio-button-default-lineHeight);
+    border-radius: radius(--radio-button-default);
+    border-color: borderColor(--radio-button-default);
+    border-width: borderWidth(--radio-button-default);
+    border-style: borderStyle(--radio-button-default);
+
+    &:hover:not(.disabled):not(.checked) {
+      color: var(--radio-button-hover-text-color);
+      border-color: borderColor(--radio-button-hover);
+    }
     > i {
-      width: var(--Checkbox--sm-size);
-      height: var(--Checkbox--sm-size);
-      margin-left: calc(var(--Checkbox--sm-size) * -1);
-      margin-top: 0;
-
-      + span {
-        margin-left: var(--gap-xs);
-      }
+      display: none;
     }
+    span {
+      margin-left: 0;
+    }
+  }
+  &--radio--button--checked {
+    color: var(--radio-button-checked-text-color);
+    border-color: borderColor(--radio-button-checked);
+    background-color: var(--radio-button-checked-bg-color);
+  }
+  &--radio--button--disabled--unchecked {
+    color: var(--radio-button-disabled-unchecked-text-color);
+    border-color: borderColor(--radio-button-disabled-unchecked);
+    background: var(--radio-button-disabled-unchecked-bg-color);
+  }
+  &--radio--button--disabled--checked {
+    color: var(--radio-button-disabled-checked-text-color);
+    border-color: borderColor(--radio-button-disabled-checked);
+    background: var(--radio-button-disabled-checked-bg-color);
   }
 
-  &--sm.#{$ns}Checkbox--full {
-    input[type='checkbox'] {
-      &:checked + i {
-        &:before {
-          width: var(--Checkbox--sm--full-inner-size);
-          height: calc(var(--Checkbox--sm--full-inner-size) / 2);
+  &--sm {
+    &.#{$ns}Checkbox {
+      display: inline-flex;
+      align-items: center;
+    }
+    > i {
+      width: var(--checkbox-default-sm-size);
+      height: var(--checkbox-default-sm-size);
+      .icon {
+        width: var(--checkbox-default-sm-icon-size);
+        height: var(--checkbox-default-sm-icon-size);
+      }
+    }
+    &.#{$ns}Checkbox.#{$ns}Checkbox--checkbox--default:hover {
+      > i {
+        width: var(--checkbox-default-sm-size);
+        height: var(--checkbox-default-sm-size);
+        .icon {
+          width: var(--checkbox-default-sm-icon-size);
+          height: var(--checkbox-default-sm-icon-size);
         }
       }
     }
@@ -602,7 +323,7 @@
 
   &-desc {
     color: var(--text--muted-color);
-    margin-left: var(--Checkbox-gap);
+    margin-left: var(--gap-xs);
     margin-top: var(--gap-xs);
     pointer-events: all;
   }
@@ -637,20 +358,6 @@
       var(--radio-default-vertical-marginLeft);
   }
 
-  .#{$ns}Checkbox--button {
-    margin-bottom: 0;
-
-    &--disabled--unchecked {
-      background: var(--FileControl-onDisabled-bg);
-    }
-
-    &-checked {
-      &:active {
-        border-color: var(--Checkbox-checked-onHover-bgColor);
-      }
-    }
-  }
-
   &.is-inline .#{$ns}Checkbox {
     display: inline-block;
     margin: var(--radio-default-default-marginTop)
@@ -672,20 +379,6 @@
     margin-bottom: var(--Form-label-paddingTop);
   }
 
-  .#{$ns}Checkbox--button {
-    margin-bottom: 0;
-
-    &--disabled--unchecked {
-      background: var(--FileControl-onDisabled-bg);
-    }
-
-    &-checked {
-      &:active {
-        border-color: var(--Checkbox-checked-onHover-bgColor);
-      }
-    }
-  }
-
   &.is-inline .#{$ns}Checkbox {
     display: inline-block;
     margin-right: var(--gap-md);
@@ -726,3 +419,16 @@
     background: var(--ButtonGroup--primary-isActive-bg);
   }
 }
+.#{$ns}Grid {
+  > div > .#{$ns}Checkbox--checkbox--button {
+    border-radius: radius(--checkbox-button-default);
+  }
+}
+
+.checkbox-icon {
+  content: var(--checkbox-default-checked-default-icon);
+}
+
+.radio-icon {
+  content: var(--radio-default-checked-icon);
+}