rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/Drawer/styles/index.css

@@ -1,323 +1,472 @@
-/**
-  * Map mixin
-  * @param {string} @size-name - The size name
-  * @param {string} @suffix - The suffix
-  */
-/* stylelint-disable */
-*[class*='rs-'] {
-  box-sizing: border-box;
-}
-*[class*='rs-']::before,
-*[class*='rs-']::after {
-  box-sizing: border-box;
-}
-:root {
-  --rs-font-size-lg: 1.125rem;
-  --rs-spacing: 0.25rem;
-  --rs-shadow-color: rgba(0, 0, 0, 0.1);
-  --rs-shadow-lg: 0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
-}
-:root,
-.rs-theme-light {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #f2f2f5;
-  --rs-gray-200: #e5e5ea;
-  --rs-gray-600: #717273;
-  --rs-gray-700: #575757;
-  --rs-gray-800: #343434;
-  --rs-gray-900: #121212;
-  --rs-text-heading: var(--rs-gray-900);
-  --rs-border-primary: var(--rs-gray-200);
-  --rs-bg-overlay: var(--rs-gray-0);
-  --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 30%);
-}
-@supports not (color: rgb(from white r g b)) {
-  :root,
-  .rs-theme-light {
-    --rs-bg-backdrop: rgba(18, 18, 18, 0.3);
+*[class*=rs-],*[class*=rs-]::before, *[class*=rs-]::after{
+  box-sizing:border-box;
+}
+
+html{
+  -webkit-tap-highlight-color:transparent;
+  font-size:16px;
+}
+
+body{
+  font-family:var(--rs-font-family-base);
+  font-size:var(--rs-font-size-sm);
+  line-height:var(--rs-line-height-md);
+  color:var(--rs-text-primary);
+  background-color:var(--rs-body);
+}
+:root{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#f7f7fa;
+  --rs-gray-100:#f2f2f5;
+  --rs-gray-200:#e5e5ea;
+  --rs-gray-600:#717273;
+  --rs-gray-700:#575757;
+  --rs-gray-800:#343434;
+  --rs-gray-900:#121212;
+  --rs-body:var(--rs-gray-0);
+  --rs-text-primary:var(--rs-gray-800);
+  --rs-text-heading:var(--rs-gray-900);
+  --rs-border-primary:var(--rs-gray-200);
+  --rs-bg-overlay:var(--rs-gray-0);
+  --rs-bg-backdrop:rgb(from var(--rs-gray-900) r g b / 30%);
+}
+@supports not (color: rgb(from white r g b)){
+  :root{
+    --rs-bg-backdrop:rgba(18, 18, 18, 0.3);
   }
 }
-.rs-theme-dark {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #cbced4;
-  --rs-gray-200: #a4a9b3;
-  --rs-gray-600: #3c3f43;
-  --rs-gray-700: #292d33;
-  --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
-  --rs-text-heading: var(--rs-gray-0);
-  --rs-border-primary: var(--rs-gray-600);
-  --rs-bg-overlay: var(--rs-gray-700);
-  --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
-}
-@supports not (color: rgb(from white r g b)) {
-  .rs-theme-dark {
-    --rs-bg-backdrop: rgba(15, 19, 26, 0.8);
+
+[data-theme=dark],
+.rs-theme-dark{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#e9ebf0;
+  --rs-gray-100:#cbced4;
+  --rs-gray-200:#a4a9b3;
+  --rs-gray-600:#3c3f43;
+  --rs-gray-700:#292d33;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-text-heading:var(--rs-gray-0);
+  --rs-border-primary:var(--rs-gray-600);
+  --rs-bg-overlay:var(--rs-gray-700);
+  --rs-bg-backdrop:rgb(from var(--rs-gray-900) r g b / 80%);
+}
+@supports not (color: rgb(from white r g b)){
+  [data-theme=dark],
+  .rs-theme-dark{
+    --rs-bg-backdrop:rgba(15, 19, 26, 0.8);
   }
 }
-.rs-theme-high-contrast {
-  --rs-gray-0: #fff;
-  --rs-gray-100: #cbced4;
-  --rs-gray-200: #a4a9b3;
-  --rs-gray-600: #3c3f43;
-  --rs-gray-700: #292d33;
-  --rs-gray-800: #1a1d24;
-  --rs-gray-900: #0f131a;
-  --rs-text-heading: var(--rs-gray-0);
-  --rs-border-primary: var(--rs-gray-100);
-  --rs-bg-overlay: var(--rs-gray-800);
-  --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
-  --rs-drawer-bg: var(--rs-gray-700);
-}
-@supports not (color: rgb(from white r g b)) {
-  .rs-theme-high-contrast {
-    --rs-bg-backdrop: rgba(15, 19, 26, 0.8);
+
+[data-theme=high-contrast],
+.rs-theme-high-contrast{
+  --rs-gray-0:#fff;
+  --rs-gray-50:#e9ebf0;
+  --rs-gray-100:#cbced4;
+  --rs-gray-200:#a4a9b3;
+  --rs-gray-600:#3c3f43;
+  --rs-gray-700:#292d33;
+  --rs-gray-800:#1a1d24;
+  --rs-gray-900:#0f131a;
+  --rs-body:var(--rs-gray-900);
+  --rs-text-primary:var(--rs-gray-50);
+  --rs-text-heading:var(--rs-gray-0);
+  --rs-border-primary:var(--rs-gray-100);
+  --rs-bg-overlay:var(--rs-gray-800);
+  --rs-bg-backdrop:rgb(from var(--rs-gray-900) r g b / 80%);
+  --rs-drawer-bg:var(--rs-gray-700);
+}
+@supports not (color: rgb(from white r g b)){
+  [data-theme=high-contrast],
+  .rs-theme-high-contrast{
+    --rs-bg-backdrop:rgba(15, 19, 26, 0.8);
   }
 }
-@keyframes shakeHead {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
+
+:root{
+  --rs-font-family-base:-apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif;
+  --rs-font-size-sm:0.875rem;
+  --rs-font-size-lg:1.125rem;
+  --rs-line-height-md:calc(20 / 14);
+  --rs-spacing:0.25rem;
+  --rs-shadow-color:rgb(0 0 0 / 10%);
+  --rs-shadow-lg:0 10px 15px -3px var(--rs-shadow-color), 0 4px 6px 0 var(--rs-shadow-color);
+  --rs-zindex-drawer:1050;
+}
+[data-rs=box][style*="--rs-box-p"]{
+  padding:var(--rs-box-p);
+}
+[data-rs=box][style*="--rs-box-pt"]{
+  padding-top:var(--rs-box-pt);
+}
+[data-rs=box][style*="--rs-box-pb"]{
+  padding-bottom:var(--rs-box-pb);
+}
+[data-rs=box][style*="--rs-box-pl"]{
+  padding-left:var(--rs-box-pl);
+}
+[data-rs=box][style*="--rs-box-pr"]{
+  padding-right:var(--rs-box-pr);
+}
+[data-rs=box][style*="--rs-box-px"]{
+  padding-inline:var(--rs-box-px);
+}
+[data-rs=box][style*="--rs-box-py"]{
+  padding-block:var(--rs-box-py);
+}
+[data-rs=box][style*="--rs-box-m"]{
+  margin:var(--rs-box-m);
+}
+[data-rs=box][style*="--rs-box-mt"]{
+  margin-top:var(--rs-box-mt);
+}
+[data-rs=box][style*="--rs-box-mb"]{
+  margin-bottom:var(--rs-box-mb);
+}
+[data-rs=box][style*="--rs-box-ml"]{
+  margin-left:var(--rs-box-ml);
+}
+[data-rs=box][style*="--rs-box-mr"]{
+  margin-right:var(--rs-box-mr);
+}
+[data-rs=box][style*="--rs-box-mx"]{
+  margin-inline:var(--rs-box-mx);
+}
+[data-rs=box][style*="--rs-box-my"]{
+  margin-block:var(--rs-box-my);
+}
+[data-rs=box][style*="--rs-box-w"]{
+  width:var(--rs-box-w);
+}
+[data-rs=box][style*="--rs-box-h"]{
+  height:var(--rs-box-h);
+}
+[data-rs=box][style*="--rs-box-maxw"]{
+  max-width:var(--rs-box-maxw);
+}
+[data-rs=box][style*="--rs-box-maxh"]{
+  max-height:var(--rs-box-maxh);
+}
+[data-rs=box][style*="--rs-box-minw"]{
+  min-width:var(--rs-box-minw);
+}
+[data-rs=box][style*="--rs-box-minh"]{
+  min-height:var(--rs-box-minh);
+}
+[data-rs=box][style*="--rs-box-c"]{
+  color:var(--rs-box-c);
+}
+[data-rs=box][style*="--rs-box-bd"]{
+  border:var(--rs-box-bd);
+}
+[data-rs=box][style*="--rs-box-rounded"]{
+  border-radius:var(--rs-box-rounded);
+}
+[data-rs=box][style*="--rs-box-shadow"]{
+  box-shadow:var(--rs-box-shadow);
+}
+[data-rs=box][style*="--rs-box-bg"]{
+  background:var(--rs-box-bg);
+}
+[data-rs=box][style*="--rs-box-display"]{
+  display:var(--rs-box-display);
+}
+
+@media (max-width: calc(576px - 1px)){
+  [data-visible-from=xs]{
+    display:none !important;
+  }
+}
+@media (min-width: 576px){
+  [data-hidden-from=xs]{
+    display:none !important;
   }
-  25%,
-  75% {
-    transform: translate3d(-10px, 0, 0);
+}
+@media (max-width: calc(768px - 1px)){
+  [data-visible-from=sm]{
+    display:none !important;
+  }
+}
+@media (min-width: 768px){
+  [data-hidden-from=sm]{
+    display:none !important;
   }
-  50% {
-    transform: translate3d(10px, 0, 0);
+}
+@media (max-width: calc(992px - 1px)){
+  [data-visible-from=md]{
+    display:none !important;
+  }
+}
+@media (min-width: 992px){
+  [data-hidden-from=md]{
+    display:none !important;
   }
 }
-.rs-drawer {
-  --rs-drawer-shadow: var(--rs-shadow-lg);
-  --rs-drawer-title-font-size: var(--rs-font-size-lg);
-  --rs-drawer-title-line-height: 2.25rem;
-  --rs-drawer-body-padding: calc(var(--rs-spacing) * 7.5) calc(var(--rs-spacing) * 15);
-  --rs-drawer-size-full: 100%;
-  --rs-drawer-inline-size-xs: 400px;
-  --rs-drawer-inline-size-sm: 600px;
-  --rs-drawer-inline-size-md: 800px;
-  --rs-drawer-inline-size-lg: 968px;
-  --rs-drawer-block-size-xs: 290px;
-  --rs-drawer-block-size-sm: 400px;
-  --rs-drawer-block-size-md: 480px;
-  --rs-drawer-block-size-lg: 568px;
-  display: none;
-  overflow: hidden;
-  position: fixed;
-  z-index: 1050;
-  box-shadow: var(--rs-drawer-shadow);
-  pointer-events: auto;
-  outline: 0;
-}
-.rs-drawer-open.rs-drawer-has-backdrop {
-  overflow: hidden;
-}
-.rs-drawer-left,
-.rs-drawer-right {
-  top: 0;
-  height: 100%;
-  width: var(--rs-drawer-inline-size);
-  max-width: 100%;
-}
-.rs-drawer-left.rs-drawer-lg,
-.rs-drawer-right.rs-drawer-lg {
-  --rs-drawer-inline-size: var(--rs-drawer-inline-size-lg);
-}
-.rs-drawer-left.rs-drawer-md,
-.rs-drawer-right.rs-drawer-md {
-  --rs-drawer-inline-size: var(--rs-drawer-inline-size-md);
-}
-.rs-drawer-left.rs-drawer-sm,
-.rs-drawer-right.rs-drawer-sm {
-  --rs-drawer-inline-size: var(--rs-drawer-inline-size-sm);
-}
-.rs-drawer-left.rs-drawer-xs,
-.rs-drawer-right.rs-drawer-xs {
-  --rs-drawer-inline-size: var(--rs-drawer-inline-size-xs);
-}
-.rs-drawer-top,
-.rs-drawer-bottom {
-  width: 100%;
-  height: var(--rs-drawer-block-size);
-}
-.rs-drawer-top.rs-drawer-lg,
-.rs-drawer-bottom.rs-drawer-lg {
-  --rs-drawer-block-size: var(--rs-drawer-block-size-lg);
-}
-.rs-drawer-top.rs-drawer-md,
-.rs-drawer-bottom.rs-drawer-md {
-  --rs-drawer-block-size: var(--rs-drawer-block-size-md);
-}
-.rs-drawer-top.rs-drawer-sm,
-.rs-drawer-bottom.rs-drawer-sm {
-  --rs-drawer-block-size: var(--rs-drawer-block-size-sm);
-}
-.rs-drawer-top.rs-drawer-xs,
-.rs-drawer-bottom.rs-drawer-xs {
-  --rs-drawer-block-size: var(--rs-drawer-block-size-xs);
-}
-.rs-drawer-full {
-  height: var(--rs-drawer-size-full);
-  width: var(--rs-drawer-size-full);
-}
-.rs-drawer-right {
-  inset-inline-end: 0;
-}
-.rs-drawer-left {
-  inset-inline-start: 0;
-}
-.rs-drawer-top {
-  top: 0;
-}
-.rs-drawer-bottom {
-  bottom: 0;
-}
-.rs-drawer-wrapper {
-  position: fixed;
-  z-index: 1050;
-  top: 0;
-  inset-inline-start: 0;
-  width: 100%;
-  height: 100%;
-}
-.rs-drawer-wrapper.rs-drawer-no-backdrop {
-  pointer-events: none;
-}
-.rs-drawer-open .rs-drawer {
-  overflow: visible;
-}
-.rs-drawer-dialog {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: var(--rs-bg-overlay);
-}
-.rs-drawer-shake .rs-drawer-dialog {
-  animation: 0.3s linear shakeHead;
-}
-.rs-theme-high-contrast .rs-drawer-dialog {
-  background-color: var(--rs-drawer-bg);
-}
-.rs-drawer-backdrop {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  inset-inline-end: 0;
-  inset-inline-start: 0;
-  z-index: 1050;
-  background-color: var(--rs-bg-backdrop);
-}
-.rs-drawer-backdrop.rs-anim-fade {
-  opacity: 0;
-  transition: opacity 0.3s ease-in;
-}
-.rs-drawer-backdrop.rs-anim-in {
-  opacity: 1;
-}
-.rs-drawer-header {
-  position: relative;
-  padding: 20px 40px 20px 60px;
-  border-bottom: 1px solid var(--rs-border-primary);
-  display: flex;
-}
-.rs-drawer-header::before,
-.rs-drawer-header::after {
-  content: ' ';
-  display: table;
-}
-.rs-drawer-header::after {
-  clear: both;
-}
-.rs-drawer-header .rs-drawer-header-close {
-  position: absolute;
-  inset-inline-start: 15px;
-  top: 23px;
-}
-.rs-drawer-title {
-  display: inline-flex;
-  align-items: center;
-  flex-grow: 1;
-  flex-shrink: 1;
-  margin: 0;
-  color: var(--rs-text-heading);
-  font-weight: normal;
-  font-size: var(--rs-drawer-title-font-size);
-  line-height: var(--rs-drawer-title-line-height);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.rs-drawer-actions {
-  flex-shrink: 0;
-  text-align: end;
-  border-top: none;
-  margin-inline-start: auto;
-}
-.rs-drawer-actions::before,
-.rs-drawer-actions::after {
-  content: ' ';
-  display: table;
-}
-.rs-drawer-actions::after {
-  clear: both;
-}
-.rs-drawer-title ~ .rs-drawer-actions {
-  margin-inline-start: 10px;
-}
-.rs-drawer-actions .rs-btn + .rs-btn {
-  margin-inline-start: 10px;
-  margin-bottom: 0;
-}
-.rs-drawer-actions .rs-btn-group .rs-btn + .rs-btn {
-  margin-inline-start: -1px;
-}
-.rs-drawer-actions .rs-btn-block + .rs-btn-block {
-  margin-inline-start: 0;
-}
-.rs-drawer-body {
-  position: relative;
-  padding: var(--rs-drawer-body-padding);
-  height: 100%;
-  overflow: auto;
-}
-.rs-drawer-header + .rs-drawer-body {
-  height: calc(100% - 76px);
-}
-.rs-drawer-body-close {
-  position: absolute;
-  inset-inline-start: 15px;
-  top: 25px;
-}
-.rs-drawer-header ~ .rs-drawer-body .rs-drawer-body-close {
-  display: none;
-}
-.rs-drawer-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-.rs-drawer-footer {
-  text-align: end;
-  border-top: none;
-  margin: 0 20px 20px;
-}
-.rs-drawer-footer::before,
-.rs-drawer-footer::after {
-  content: ' ';
-  display: table;
-}
-.rs-drawer-footer::after {
-  clear: both;
-}
-.rs-drawer-footer .rs-btn + .rs-btn {
-  margin-inline-start: 10px;
-  margin-bottom: 0;
-}
-.rs-drawer-footer .rs-btn-group .rs-btn + .rs-btn {
-  margin-inline-start: -1px;
-}
-.rs-drawer-footer .rs-btn-block + .rs-btn-block {
-  margin-inline-start: 0;
+@media (max-width: calc(1200px - 1px)){
+  [data-visible-from=lg]{
+    display:none !important;
+  }
+}
+@media (min-width: 1200px){
+  [data-hidden-from=lg]{
+    display:none !important;
+  }
+}
+@media (max-width: calc(1400px - 1px)){
+  [data-visible-from=xl]{
+    display:none !important;
+  }
+}
+@media (min-width: 1400px){
+  [data-hidden-from=xl]{
+    display:none !important;
+  }
+}
+@keyframes shakeHead{
+  0%, 100%{
+    transform:translate3d(0, 0, 0);
+  }
+  25%, 75%{
+    transform:translate3d(-10px, 0, 0);
+  }
+  50%{
+    transform:translate3d(10px, 0, 0);
+  }
 }
+:root{
+  --rs-drawer-shadow:var(--rs-shadow-lg);
+  --rs-drawer-title-font-size:var(--rs-font-size-lg);
+  --rs-drawer-title-line-height:2.25rem;
+  --rs-drawer-body-padding:calc(var(--rs-spacing) * 7.5) calc(var(--rs-spacing) * 15);
+  --rs-drawer-footer-spacing:calc(var(--rs-spacing) * 5);
+  --rs-drawer-size-full:100%;
+  --rs-drawer-inline-size-xs:400px;
+  --rs-drawer-inline-size-sm:600px;
+  --rs-drawer-inline-size-md:800px;
+  --rs-drawer-inline-size-lg:968px;
+  --rs-drawer-block-size-xs:290px;
+  --rs-drawer-block-size-sm:400px;
+  --rs-drawer-block-size-md:480px;
+  --rs-drawer-block-size-lg:568px;
+}
+
+.rs-drawer{
+  display:none;
+  position:fixed;
+  z-index:var(--rs-zindex-drawer);
+  box-shadow:var(--rs-drawer-shadow);
+  pointer-events:auto;
+  outline:0;
+}
+.rs-drawer,.rs-drawer-open.rs-drawer-has-backdrop{
+  overflow:hidden;
+}
+.rs-drawer-left, .rs-drawer-right{
+  top:0;
+  height:100%;
+  width:var(--rs-drawer-inline-size);
+  max-width:100%;
+}
+.rs-drawer-left.rs-drawer-lg, .rs-drawer-right.rs-drawer-lg{
+  --rs-drawer-inline-size:var(--rs-drawer-inline-size-lg);
+}
+.rs-drawer-left.rs-drawer-md, .rs-drawer-right.rs-drawer-md{
+  --rs-drawer-inline-size:var(--rs-drawer-inline-size-md);
+}
+.rs-drawer-left.rs-drawer-sm, .rs-drawer-right.rs-drawer-sm{
+  --rs-drawer-inline-size:var(--rs-drawer-inline-size-sm);
+}
+.rs-drawer-left.rs-drawer-xs, .rs-drawer-right.rs-drawer-xs{
+  --rs-drawer-inline-size:var(--rs-drawer-inline-size-xs);
+}
+.rs-drawer-top, .rs-drawer-bottom{
+  width:100%;
+  height:var(--rs-drawer-block-size);
+}
+.rs-drawer-top.rs-drawer-lg, .rs-drawer-bottom.rs-drawer-lg{
+  --rs-drawer-block-size:var(--rs-drawer-block-size-lg);
+}
+.rs-drawer-top.rs-drawer-md, .rs-drawer-bottom.rs-drawer-md{
+  --rs-drawer-block-size:var(--rs-drawer-block-size-md);
+}
+.rs-drawer-top.rs-drawer-sm, .rs-drawer-bottom.rs-drawer-sm{
+  --rs-drawer-block-size:var(--rs-drawer-block-size-sm);
+}
+.rs-drawer-top.rs-drawer-xs, .rs-drawer-bottom.rs-drawer-xs{
+  --rs-drawer-block-size:var(--rs-drawer-block-size-xs);
+}
+.rs-drawer-full{
+  height:var(--rs-drawer-size-full);
+  width:var(--rs-drawer-size-full);
+}
+.rs-drawer-right{
+  inset-inline-end:0;
+}
+.rs-drawer-left{
+  inset-inline-start:0;
+}
+.rs-drawer-top{
+  top:0;
+}
+.rs-drawer-bottom{
+  bottom:0;
+}
+
+.rs-drawer-wrapper{
+  position:fixed;
+  z-index:var(--rs-zindex-drawer);
+  top:0;
+  inset-inline-start:0;
+  width:100%;
+  height:100%;
+}
+.rs-drawer-wrapper.rs-drawer-no-backdrop{
+  pointer-events:none;
+}
+
+.rs-drawer-open .rs-drawer{
+  overflow:visible;
+}
+
+.rs-drawer-dialog{
+  position:relative;
+  width:100%;
+  height:100%;
+  background-color:var(--rs-bg-overlay);
+}
+.rs-drawer-shake .rs-drawer-dialog{
+  animation:0.3s linear shakeHead;
+}
+[data-theme=high-contrast] .rs-drawer-dialog, .rs-theme-high-contrast .rs-drawer-dialog{
+  background-color:var(--rs-drawer-bg);
+}
+
+.rs-drawer-backdrop{
+  position:fixed;
+  top:0;
+  bottom:0;
+  inset-inline-end:0;
+  inset-inline-start:0;
+  z-index:var(--rs-zindex-drawer);
+  background-color:var(--rs-bg-backdrop);
+}
+.rs-drawer-backdrop.rs-anim-fade{
+  opacity:0;
+  transition:opacity 0.3s ease-in;
+}
+.rs-drawer-backdrop.rs-anim-in{
+  opacity:1;
+}
+
+.rs-drawer-header{
+  position:relative;
+  padding-block:20px;
+  padding-inline:60px 40px;
+  border-bottom:1px solid var(--rs-border-primary);
+  display:flex;
+}
+.rs-drawer-header::before, .rs-drawer-header::after{
+  content:" ";
+  display:table;
+}
+.rs-drawer-header::after{
+  clear:both;
+}
+.rs-drawer-header .rs-drawer-header-close{
+  position:absolute;
+  inset-inline-start:15px;
+  top:23px;
+}
+
+.rs-drawer-title{
+  display:inline-flex;
+  align-items:center;
+  flex-grow:1;
+  flex-shrink:1;
+  margin:0;
+  color:var(--rs-text-heading);
+  font-weight:normal;
+  font-size:var(--rs-drawer-title-font-size);
+  line-height:var(--rs-drawer-title-line-height);
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.rs-drawer-actions{
+  flex-shrink:0;
+  text-align:end;
+  border-top:none;
+  margin-inline-start:auto;
+}
+.rs-drawer-actions::before, .rs-drawer-actions::after{
+  content:" ";
+  display:table;
+}
+.rs-drawer-actions::after{
+  clear:both;
+}
+.rs-drawer-title ~ .rs-drawer-actions{
+  margin-inline-start:10px;
+}
+.rs-drawer-actions .rs-btn + .rs-btn{
+  margin-inline-start:10px;
+  margin-bottom:0;
+}
+.rs-drawer-actions .rs-btn-group .rs-btn + .rs-btn{
+  margin-inline-start:-1px;
+}
+.rs-drawer-actions .rs-btn-block + .rs-btn-block{
+  margin-inline-start:0;
+}
+
+.rs-drawer-body{
+  position:relative;
+  padding:var(--rs-drawer-body-padding);
+  height:100%;
+  overflow:auto;
+}
+.rs-drawer-header + .rs-drawer-body{
+  height:calc(100% - 76px);
+}
+.rs-drawer-body-close{
+  position:absolute;
+  inset-inline-start:15px;
+  top:25px;
+}
+.rs-drawer-header ~ .rs-drawer-body .rs-drawer-body-close{
+  display:none;
+}
+
+.rs-drawer-scrollbar-measure{
+  position:absolute;
+  top:-9999px;
+  width:50px;
+  height:50px;
+  overflow:scroll;
+}
+
+.rs-drawer-footer{
+  text-align:end;
+  border-top:none;
+  margin:0 var(--rs-drawer-footer-spacing) var(--rs-drawer-footer-spacing);
+}
+.rs-drawer-footer::before, .rs-drawer-footer::after{
+  content:" ";
+  display:table;
+}
+.rs-drawer-footer::after{
+  clear:both;
+}
+.rs-drawer-footer .rs-btn + .rs-btn{
+  margin-inline-start:10px;
+  margin-bottom:0;
+}
+.rs-drawer-footer .rs-btn-group .rs-btn + .rs-btn{
+  margin-inline-start:-1px;
+}
+.rs-drawer-footer .rs-btn-block + .rs-btn-block{
+  margin-inline-start:0;
+}