rsuite 5.1.0 → 5.2.3

package/dist/rsuite.css

@@ -2057,6 +2057,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-700);
   --rs-btn-link-hover-text: var(--rs-red-800);
   --rs-btn-link-active-text: var(--rs-red-900);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-800);
 }
 .rs-theme-dark .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2075,6 +2078,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-red-500);
   --rs-btn-link-hover-text: var(--rs-red-400);
   --rs-btn-link-active-text: var(--rs-red-200);
+  --rs-iconbtn-primary-addon: var(--rs-red-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-red-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-red-400);
 }
 .rs-theme-high-contrast .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-700);
@@ -2111,6 +2117,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-700);
   --rs-btn-link-hover-text: var(--rs-orange-800);
   --rs-btn-link-active-text: var(--rs-orange-900);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-800);
 }
 .rs-theme-dark .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2129,6 +2138,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-orange-500);
   --rs-btn-link-hover-text: var(--rs-orange-400);
   --rs-btn-link-active-text: var(--rs-orange-200);
+  --rs-iconbtn-primary-addon: var(--rs-orange-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-orange-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-orange-400);
 }
 .rs-theme-high-contrast .rs-btn-orange {
   --rs-btn-primary-bg: var(--rs-orange-700);
@@ -2165,6 +2177,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-700);
   --rs-btn-link-hover-text: var(--rs-yellow-800);
   --rs-btn-link-active-text: var(--rs-yellow-900);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-800);
 }
 .rs-theme-dark .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2183,6 +2198,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-yellow-500);
   --rs-btn-link-hover-text: var(--rs-yellow-400);
   --rs-btn-link-active-text: var(--rs-yellow-200);
+  --rs-iconbtn-primary-addon: var(--rs-yellow-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-yellow-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-yellow-400);
 }
 .rs-theme-high-contrast .rs-btn-yellow {
   --rs-btn-primary-bg: var(--rs-yellow-700);
@@ -2219,6 +2237,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-700);
   --rs-btn-link-hover-text: var(--rs-green-800);
   --rs-btn-link-active-text: var(--rs-green-900);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-800);
 }
 .rs-theme-dark .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2237,6 +2258,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-green-500);
   --rs-btn-link-hover-text: var(--rs-green-400);
   --rs-btn-link-active-text: var(--rs-green-200);
+  --rs-iconbtn-primary-addon: var(--rs-green-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-green-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-green-400);
 }
 .rs-theme-high-contrast .rs-btn-green {
   --rs-btn-primary-bg: var(--rs-green-700);
@@ -2273,6 +2297,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-700);
   --rs-btn-link-hover-text: var(--rs-cyan-800);
   --rs-btn-link-active-text: var(--rs-cyan-900);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-800);
 }
 .rs-theme-dark .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2291,6 +2318,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-cyan-500);
   --rs-btn-link-hover-text: var(--rs-cyan-400);
   --rs-btn-link-active-text: var(--rs-cyan-200);
+  --rs-iconbtn-primary-addon: var(--rs-cyan-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-cyan-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-cyan-400);
 }
 .rs-theme-high-contrast .rs-btn-cyan {
   --rs-btn-primary-bg: var(--rs-cyan-700);
@@ -2327,6 +2357,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-700);
   --rs-btn-link-hover-text: var(--rs-blue-800);
   --rs-btn-link-active-text: var(--rs-blue-900);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-800);
 }
 .rs-theme-dark .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2345,6 +2378,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-blue-500);
   --rs-btn-link-hover-text: var(--rs-blue-400);
   --rs-btn-link-active-text: var(--rs-blue-200);
+  --rs-iconbtn-primary-addon: var(--rs-blue-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-blue-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-blue-400);
 }
 .rs-theme-high-contrast .rs-btn-blue {
   --rs-btn-primary-bg: var(--rs-blue-700);
@@ -2381,6 +2417,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-700);
   --rs-btn-link-hover-text: var(--rs-violet-800);
   --rs-btn-link-active-text: var(--rs-violet-900);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-700);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-800);
 }
 .rs-theme-dark .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -2399,6 +2438,9 @@ tbody.rs-anim-collapse.rs-anim-in {
   --rs-btn-link-text: var(--rs-violet-500);
   --rs-btn-link-hover-text: var(--rs-violet-400);
   --rs-btn-link-active-text: var(--rs-violet-200);
+  --rs-iconbtn-primary-addon: var(--rs-violet-600);
+  --rs-iconbtn-primary-activated-addon: var(--rs-violet-500);
+  --rs-iconbtn-primary-pressed-addon: var(--rs-violet-400);
 }
 .rs-theme-high-contrast .rs-btn-violet {
   --rs-btn-primary-bg: var(--rs-violet-700);
@@ -10033,13 +10075,13 @@ textarea.rs-picker-search-input {
   border: 1px solid #e5e5ea;
   border: 1px solid var(--rs-border-primary);
 }
-.rs-panel-group .rs-panel {
+.rs-panel-group > .rs-panel {
   border: none;
 }
-.rs-panel-group .rs-panel + .rs-panel {
+.rs-panel-group > .rs-panel + .rs-panel {
   position: relative;
 }
-.rs-panel-group .rs-panel + .rs-panel::before {
+.rs-panel-group > .rs-panel + .rs-panel::before {
   content: '';
   position: absolute;
   top: 0;
@@ -12581,6 +12623,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   outline: 0;
   overflow: hidden;
 }
+.rs-sidenav-item:hover {
+  text-decoration: none;
+}
 .rs-sidenav-item:focus-visible,
 .rs-sidenav-item.rs-sidenav-item-focus {
   -webkit-box-shadow: inset var(--rs-state-focus-shadow-slim);
@@ -13144,6 +13189,9 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-transform: scale(1.2);
           transform: scale(1.2);
 }
+.rs-slider-vertical .rs-slider-handle {
+  top: unset;
+}
 .rs-slider-vertical .rs-slider-handle::before {
   left: 3px;
   margin-top: -6px;
@@ -13178,25 +13226,25 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-slider-graduator {
   width: 100%;
 }
-.rs-slider-graduator ul,
+.rs-slider-graduator ol,
 .rs-slider-graduator li {
   list-style: none;
 }
-.rs-slider-graduator > ul {
+.rs-slider-graduator > ol {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding-left: 0;
   width: 100%;
 }
-.rs-slider-graduator > ul > li {
+.rs-slider-graduator > ol > li {
   -webkit-box-flex: 1;
       -ms-flex: 1 1 1%;
           flex: 1 1 1%;
   position: relative;
 }
-.rs-slider-graduator > ul > li:last-child::after,
-.rs-slider-graduator > ul > li::before {
+.rs-slider-graduator > ol > li:last-child::after,
+.rs-slider-graduator > ol > li::before {
   content: '';
   display: block;
   position: absolute;
@@ -13212,43 +13260,44 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   margin-left: -4px;
   top: -1px;
 }
-.rs-slider-vertical .rs-slider-graduator > ul > li:last-child::after,
-.rs-slider-vertical .rs-slider-graduator > ul > li::before {
-  top: -4px;
+.rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after,
+.rs-slider-vertical .rs-slider-graduator > ol > li::before {
+  top: unset;
+  bottom: -4px;
   margin-left: -1px;
 }
-.rs-slider-graduator > ul > li:last-child::after {
+.rs-slider-graduator > ol > li:last-child::after {
   right: -4px;
 }
-.rs-slider-vertical .rs-slider-graduator > ul > li:last-child::after {
+.rs-slider-vertical .rs-slider-graduator > ol > li:last-child::after {
   left: 0;
-  top: auto;
-  bottom: -4px;
+  bottom: unset;
+  top: -4px;
 }
-.rs-slider-graduator > ul > li.rs-slider-pass::before {
+.rs-slider-graduator > ol > li.rs-slider-pass::before {
   border-color: #3498ff;
   border-color: var(--rs-slider-progress);
 }
-.rs-slider-graduator > ul > li.rs-slider-active::before {
+.rs-slider-graduator > ol > li.rs-slider-active::before {
   visibility: hidden;
 }
 .rs-slider-vertical .rs-slider-graduator {
   display: block;
   height: 100%;
 }
-.rs-slider-vertical .rs-slider-graduator > ul {
+.rs-slider-vertical .rs-slider-graduator > ol {
   width: 6px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
   height: 100%;
   padding: 0;
 }
-.rs-slider-vertical .rs-slider-graduator > ul > li {
+.rs-slider-vertical .rs-slider-graduator > ol > li {
   display: block;
   padding: 0;
 }
@@ -13261,21 +13310,22 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-slider-vertical .rs-slider-progress-bar {
   width: 6px;
-  border-radius: 3px 3px 0 0;
+  border-radius: 0 0 3px 3px;
 }
 .rs-slider-vertical {
   height: 100%;
 }
 .rs-slider-vertical .rs-slider-mark {
-  top: -8px;
+  top: unset;
+  bottom: -8px;
   left: 15px;
 }
 .rs-slider-vertical .rs-slider-mark-content {
   margin-left: auto;
 }
 .rs-slider-vertical .rs-slider-mark-last {
-  top: auto;
-  bottom: -8px;
+  bottom: unset;
+  top: -8px;
 }
 .rs-steps {
   min-height: 30px;
@@ -14231,69 +14281,82 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 .rs-timeline-align-alternate .rs-timeline-item:nth-child(2n) .rs-timeline-item-time {
   padding-left: 17px;
 }
-.rs-btn-toggle {
-  height: 24px;
-  min-width: 44px;
-  border-radius: 12px;
+.rs-toggle {
   position: relative;
-  display: inline-block;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  vertical-align: middle;
-  background-color: #d9d9d9;
-  background-color: var(--rs-toggle-bg);
-  color: #fff;
-  color: var(--rs-toggle-thumb);
-  cursor: pointer;
-  -webkit-transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
 }
-.rs-btn-toggle-loader {
+.rs-toggle .rs-toggle-loader {
   width: 18px;
   height: 18px;
   left: 3px;
   top: 3px;
 }
-.rs-btn-toggle::after {
+.rs-toggle .rs-toggle-presentation {
+  height: 24px;
+  min-width: 44px;
+  border-radius: 12px;
+}
+.rs-toggle .rs-toggle-presentation::after {
   width: 18px;
   height: 18px;
   left: 3px;
   top: 3px;
   border-radius: 9px;
 }
-.rs-btn-toggle:active::after {
+.rs-toggle .rs-toggle-presentation:active::after {
   width: 21.6px;
 }
-.rs-btn-toggle .rs-btn-toggle-inner {
+.rs-toggle .rs-toggle-inner {
   margin-left: 24px;
   margin-right: 8px;
   height: 24px;
   line-height: 2;
   font-size: 12px;
 }
-.rs-btn-toggle .rs-btn-toggle-inner .rs-icon {
+.rs-toggle .rs-toggle-inner .rs-icon {
   font-size: 12px;
 }
-.rs-btn-toggle.rs-btn-toggle-checked::after {
+.rs-toggle.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -21px;
 }
-.rs-btn-toggle.rs-btn-toggle-checked:active::after {
+.rs-toggle.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -24.6px;
 }
-.rs-btn-toggle.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 24px;
   margin-left: 8px;
 }
-.rs-btn-toggle.rs-btn-toggle-checked .rs-btn-toggle-loader {
+.rs-toggle.rs-toggle-checked .rs-toggle-loader {
   left: 100%;
   margin-left: -21px;
 }
-.rs-theme-high-contrast .rs-btn-toggle {
+.rs-toggle-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+.rs-toggle-presentation {
+  position: relative;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  vertical-align: middle;
+  background-color: #d9d9d9;
+  background-color: var(--rs-toggle-bg);
+  color: #fff;
+  color: var(--rs-toggle-thumb);
+  cursor: pointer;
+  -webkit-transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, width 0.2s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.rs-theme-high-contrast .rs-toggle-presentation {
   -webkit-transition: none;
   transition: none;
   -webkit-box-shadow: inset 0 0 0 1px #fff;
@@ -14301,24 +14364,23 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
           box-shadow: inset 0 0 0 1px #fff;
           box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb);
 }
-.rs-btn-toggle:hover {
-  background-color: #c5c6c7;
-  background-color: var(--rs-toggle-hover-bg);
-}
-.rs-btn-toggle-loader {
-  position: absolute;
-  -webkit-transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
-  transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
+.rs-toggle-input:focus-visible + .rs-toggle-presentation {
+  -webkit-box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
+  -webkit-box-shadow: var(--rs-state-focus-shadow);
+          box-shadow: 0 0 0 3px rgba(52, 152, 255, 0.25);
+          box-shadow: var(--rs-state-focus-shadow);
 }
-.rs-btn-toggle-loader .rs-loader-spin::before {
-  border-color: rgba(247, 247, 250, 0.3);
-  border-color: var(--rs-toggle-loader-ring);
+.rs-theme-high-contrast .rs-toggle-input:focus-visible + .rs-toggle-presentation {
+  -webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px rgba(52, 152, 255, 0.25);
+  -webkit-box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);
+          box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px rgba(52, 152, 255, 0.25);
+          box-shadow: inset 0 0 0 1px var(--rs-toggle-thumb), var(--rs-state-focus-shadow);
 }
-.rs-btn-toggle-loader .rs-loader-spin::after {
-  border-top-color: #fff;
-  border-top-color: var(--rs-toggle-loader-rotor);
+.rs-toggle-presentation:hover {
+  background-color: #c5c6c7;
+  background-color: var(--rs-toggle-hover-bg);
 }
-.rs-btn-toggle::after {
+.rs-toggle-presentation::after {
   content: '';
   cursor: pointer;
   position: absolute;
@@ -14326,11 +14388,11 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
   transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
 }
-.rs-theme-high-contrast .rs-btn-toggle::after {
+.rs-theme-high-contrast .rs-toggle-presentation::after {
   -webkit-transition: none;
   transition: none;
 }
-.rs-btn-toggle.rs-btn-toggle-disabled {
+.rs-toggle-disabled .rs-toggle-presentation {
   background-color: #f7f7fa;
   background-color: var(--rs-toggle-disabled-bg);
   color: #fff;
@@ -14341,7 +14403,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
           box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
   cursor: not-allowed;
 }
-.rs-btn-toggle.rs-btn-toggle-checked {
+.rs-toggle-checked .rs-toggle-presentation {
   background-color: #3498ff;
   background-color: var(--rs-toggle-checked-bg);
   color: #fff;
@@ -14349,163 +14411,176 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.rs-btn-toggle.rs-btn-toggle-checked:hover {
+.rs-toggle-checked .rs-toggle-presentation:hover {
   background-color: #2589f5;
   background-color: var(--rs-toggle-checked-hover-bg);
 }
-.rs-btn-toggle.rs-btn-toggle-disabled.rs-btn-toggle-checked {
+.rs-toggle-disabled.rs-toggle-checked .rs-toggle-presentation {
   background-color: #cce9ff;
   background-color: var(--rs-toggle-checked-disabled-bg);
   color: #fff;
   color: var(--rs-toggle-checked-disabled-thumb);
 }
-.rs-btn-toggle.rs-btn-toggle-loading::after {
+.rs-toggle-loading .rs-toggle-presentation::after {
   display: none;
 }
-.rs-btn-toggle-inner {
+.rs-toggle-inner {
   display: block;
   -webkit-transition: margin 0.2s ease-in-out;
   transition: margin 0.2s ease-in-out;
 }
-.rs-theme-high-contrast .rs-btn-toggle-inner {
+.rs-theme-high-contrast .rs-toggle-inner {
   -webkit-transition: none;
   transition: none;
 }
-.rs-btn-toggle-sm {
-  height: 14px;
-  min-width: 26px;
-  border-radius: 7px;
+.rs-toggle-loader {
+  position: absolute;
+  -webkit-transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
+  transition: left 0.2s ease-in-out, margin-left 0.2s ease-in-out, width 0.2s ease-in-out;
+}
+.rs-toggle-loader .rs-loader-spin::before {
+  border-color: rgba(247, 247, 250, 0.3);
+  border-color: var(--rs-toggle-loader-ring);
+}
+.rs-toggle-loader .rs-loader-spin::after {
+  border-top-color: #fff;
+  border-top-color: var(--rs-toggle-loader-rotor);
 }
-.rs-btn-toggle-sm-loader {
+.rs-toggle-sm .rs-toggle-loader {
   width: 10px;
   height: 10px;
   left: 2px;
   top: 2px;
 }
-.rs-btn-toggle-sm::after {
+.rs-toggle-sm .rs-toggle-presentation {
+  height: 14px;
+  min-width: 26px;
+  border-radius: 7px;
+}
+.rs-toggle-sm .rs-toggle-presentation::after {
   width: 10px;
   height: 10px;
   left: 2px;
   top: 2px;
   border-radius: 5px;
 }
-.rs-btn-toggle-sm:active::after {
+.rs-toggle-sm .rs-toggle-presentation:active::after {
   width: 12px;
 }
-.rs-btn-toggle-sm .rs-btn-toggle-inner {
+.rs-toggle-sm .rs-toggle-inner {
   margin-left: 14px;
   margin-right: 6px;
   height: 14px;
   line-height: 1.4;
   font-size: 10px;
 }
-.rs-btn-toggle-sm .rs-btn-toggle-inner .rs-icon {
+.rs-toggle-sm .rs-toggle-inner .rs-icon {
   font-size: 10px;
 }
-.rs-btn-toggle-sm.rs-btn-toggle-checked::after {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -12px;
 }
-.rs-btn-toggle-sm.rs-btn-toggle-checked:active::after {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -14px;
 }
-.rs-btn-toggle-sm.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 14px;
   margin-left: 6px;
 }
-.rs-btn-toggle-sm.rs-btn-toggle-checked .rs-btn-toggle-sm-loader {
+.rs-toggle-sm.rs-toggle-checked .rs-toggle-loader {
   left: 100%;
   margin-left: -12px;
 }
-.rs-btn-toggle-md {
-  height: 24px;
-  min-width: 44px;
-  border-radius: 12px;
-}
-.rs-btn-toggle-md-loader {
+.rs-toggle-md .rs-toggle-loader {
   width: 18px;
   height: 18px;
   left: 3px;
   top: 3px;
 }
-.rs-btn-toggle-md::after {
+.rs-toggle-md .rs-toggle-presentation {
+  height: 24px;
+  min-width: 44px;
+  border-radius: 12px;
+}
+.rs-toggle-md .rs-toggle-presentation::after {
   width: 18px;
   height: 18px;
   left: 3px;
   top: 3px;
   border-radius: 9px;
 }
-.rs-btn-toggle-md:active::after {
+.rs-toggle-md .rs-toggle-presentation:active::after {
   width: 21.6px;
 }
-.rs-btn-toggle-md .rs-btn-toggle-inner {
+.rs-toggle-md .rs-toggle-inner {
   margin-left: 24px;
   margin-right: 8px;
   height: 24px;
   line-height: 2;
   font-size: 12px;
 }
-.rs-btn-toggle-md .rs-btn-toggle-inner .rs-icon {
+.rs-toggle-md .rs-toggle-inner .rs-icon {
   font-size: 12px;
 }
-.rs-btn-toggle-md.rs-btn-toggle-checked::after {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -21px;
 }
-.rs-btn-toggle-md.rs-btn-toggle-checked:active::after {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -24.6px;
 }
-.rs-btn-toggle-md.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 24px;
   margin-left: 8px;
 }
-.rs-btn-toggle-md.rs-btn-toggle-checked .rs-btn-toggle-md-loader {
+.rs-toggle-md.rs-toggle-checked .rs-toggle-loader {
   left: 100%;
   margin-left: -21px;
 }
-.rs-btn-toggle-lg {
-  height: 30px;
-  min-width: 55px;
-  border-radius: 15px;
-}
-.rs-btn-toggle-lg-loader {
+.rs-toggle-lg .rs-toggle-loader {
   width: 22px;
   height: 22px;
   left: 4px;
   top: 4px;
 }
-.rs-btn-toggle-lg::after {
+.rs-toggle-lg .rs-toggle-presentation {
+  height: 30px;
+  min-width: 55px;
+  border-radius: 15px;
+}
+.rs-toggle-lg .rs-toggle-presentation::after {
   width: 22px;
   height: 22px;
   left: 4px;
   top: 4px;
   border-radius: 11px;
 }
-.rs-btn-toggle-lg:active::after {
+.rs-toggle-lg .rs-toggle-presentation:active::after {
   width: 26.4px;
 }
-.rs-btn-toggle-lg .rs-btn-toggle-inner {
+.rs-toggle-lg .rs-toggle-inner {
   margin-left: 30px;
   margin-right: 10px;
   height: 30px;
   line-height: 2.14285714;
   font-size: 14px;
 }
-.rs-btn-toggle-lg .rs-btn-toggle-inner .rs-icon {
+.rs-toggle-lg .rs-toggle-inner .rs-icon {
   font-size: 14px;
 }
-.rs-btn-toggle-lg.rs-btn-toggle-checked::after {
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-presentation::after {
   left: 100%;
   margin-left: -26px;
 }
-.rs-btn-toggle-lg.rs-btn-toggle-checked:active::after {
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-presentation:active::after {
   margin-left: -30.4px;
 }
-.rs-btn-toggle-lg.rs-btn-toggle-checked .rs-btn-toggle-inner {
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-presentation .rs-toggle-inner {
   margin-right: 30px;
   margin-left: 10px;
 }
-.rs-btn-toggle-lg.rs-btn-toggle-checked .rs-btn-toggle-lg-loader {
+.rs-toggle-lg.rs-toggle-checked .rs-toggle-loader {
   left: 100%;
   margin-left: -26px;
 }