@rolster/react-components 1.4.0

package/dist/es/assets/lib-7185a838.css

@@ -0,0 +1,2080 @@
+.rls-tabular-text {
+  width: auto;
+}
+.rls-tabular-text__char {
+  display: block;
+  float: left;
+  text-align: center;
+  width: var(--rls-tabulartext-char-width);
+}
+.rls-tabular-text__pointer {
+  display: block;
+  float: left;
+  text-align: center;
+  width: var(--rls-tabulartext-pointer-width);
+}
+
+.rls-amount {
+  display: flex;
+}
+.rls-amount > span {
+  margin-right: var(--sizing-4);
+}
+
+.rls-avatar {
+  position: relative;
+  float: left;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  font-size: var(--rls-avatar-font-size);
+  width: var(--rls-avatar-width);
+  height: var(--rls-avatar-height);
+  background: var(--gradient-rolster-500);
+  color: var(--color-light-500);
+  border-radius: var(--rls-avatar-border-radius);
+}
+.rls-avatar--skeleton {
+  background: var(--color-rolster-100);
+}
+.rls-avatar--skeleton > * {
+  display: none;
+}
+.rls-avatar--rounded {
+  border-radius: 50%;
+}
+.rls-avatar span {
+  font-size: inherit;
+  margin: auto;
+  height: inherit;
+  line-height: inherit;
+}
+
+.rls-breadcrumb {
+  --pvt-link-font-color: var(--color-theme-300);
+  display: -webkit-box;
+  width: 100%;
+  height: var(--rls-breadcrumb-height);
+  line-height: var(--rls-breadcrumb-height);
+  padding: 0rem var(--sizing-16);
+  box-sizing: border-box;
+  user-select: none;
+  overflow: auto;
+  overflow-y: hidden;
+  color: var(--color-theme-300);
+  font-weight: var(--font-weight-medium);
+}
+.rls-breadcrumb::-webkit-scrollbar {
+  width: 0rem;
+  height: 0rem;
+}
+.rls-breadcrumb__label {
+  display: block;
+  height: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  font-weight: inherit;
+  color: inherit;
+  font-size: var(--body-font-size);
+  letter-spacing: var(--body-letter-spacing);
+}
+.rls-breadcrumb__label:first-child::before {
+  display: none;
+}
+.rls-breadcrumb__label::before {
+  font-family: -rolster-icons;
+  display: inline-block;
+  content: '\e911';
+  margin: 0rem var(--sizing-4);
+  cursor: default;
+  color: inherit;
+  font-size: var(--sizing-24);
+  font-weight: normal;
+  font-style: normal;
+  letter-spacing: normal;
+  vertical-align: top;
+  -webkit-font-smoothing: antialiased;
+}
+.rls-breadcrumb__label--active {
+  --pvt-link-font-color: var(--color-rolster-500);
+}
+.rls-breadcrumb__label__a {
+  display: inline-block;
+  cursor: pointer;
+  color: var(--pvt-link-font-color);
+}
+.rls-breadcrumb__label__a:hover {
+  color: var(--color-rolster-500);
+  text-decoration: underline;
+}
+
+.rls-icon {
+  --pvt-icon-display: block;
+  position: relative;
+  float: left;
+  font-size: var(--rls-icon-font-size);
+  width: var(--rls-icon-width);
+  height: var(--rls-icon-height);
+  line-height: var(--rls-icon-height);
+}
+.rls-icon--skeleton {
+  --pvt-icon-display: none;
+  background: var(--theme-rolster-300);
+  border-radius: var(--sizing-4);
+}
+.rls-icon > i {
+  display: var(--pvt-icon-display);
+  color: inherit;
+  float: left;
+  width: 100%;
+  height: 100%;
+  line-height: inherit;
+  font-size: inherit;
+}
+
+.rls-button {
+  --pvt-button-content-background: none;
+  --pvt-button-content-border: none;
+  --pvt-button-content-font-color: var(--color-rolster-500);
+  --pvt-button-content-animation: none;
+  --pvt-button-content-visibility: hidden;
+  --pvt-button-ripple-background: var(--color-rolster-700);
+  --pvt-ghost-background: none;
+  --pvt-ghost-font-color: var(--color-rolster-500);
+  --pvt-ghost-border: none;
+  --pvt-flat-background: var(--color-rolster-100);
+  --pvt-flat-font-color: var(--color-rolster-500);
+  --pvt-flat-border: none;
+  --pvt-outline-background: transparent;
+  --pvt-outline-font-color: var(--color-theme-300);
+  --pvt-outline-border: var(--border-1-theme-300);
+  --pvt-raised-background: var(--color-rolster-500);
+  --pvt-raised-font-color: var(--color-light-500);
+  --pvt-raised-border: none;
+  position: relative;
+  float: left;
+  padding: 0rem;
+  overflow: hidden;
+  outline: none;
+  background: transparent;
+}
+.rls-button:not(:disabled):not(:active) {
+  --pvt-button-content-animation: ripple-squarecenter 1000ms
+    var(--standard-curve);
+}
+.rls-button:not(:disabled):focus {
+  --pvt-button-content-visibility: visible;
+}
+.rls-button:not(:disabled):hover {
+  --pvt-ghost-background: var(--color-rolster-100);
+  --pvt-ghost-font-color: var(--color-rolster-500);
+  --pvt-ghost-border: none;
+  --pvt-flat-background: var(--color-rolster-100);
+  --pvt-flat-font-color: var(--color-rolster-700);
+  --pvt-flat-border: none;
+  --pvt-outline-background: transparent;
+  --pvt-outline-font-color: var(--color-rolster-500);
+  --pvt-outline-border: var(--border-1-rolster-500);
+  --pvt-raised-background: var(--color-rolster-700);
+  --pvt-raised-font-color: var(--color-light-500);
+  --pvt-raised-border: none;
+}
+.rls-button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-button__content {
+  display: flex;
+  justify-content: center;
+  line-height: var(--sizing-40);
+  height: var(--sizing-40);
+  padding: var(--rls-button-content-padding);
+  box-sizing: border-box;
+  border-radius: var(--rls-button-content-radius);
+  color: var(--pvt-button-content-font-color);
+  border: var(--pvt-button-content-border);
+  background: var(--pvt-button-content-background);
+}
+.rls-button__content::before {
+  position: absolute;
+  display: block;
+  content: '';
+  top: 50%;
+  left: 50%;
+  padding-top: calc(100% - var(--sizing-16));
+  padding-left: calc(100% - var(--sizing-16));
+  margin-top: calc(-50% + var(--sizing-8));
+  margin-left: calc(-50% + var(--sizing-8));
+  border-radius: 50%;
+  opacity: 0.26;
+  transform: scale(0);
+  z-index: var(--z-index-2);
+  background: var(--pvt-button-ripple-background);
+  animation: var(--pvt-button-content-animation);
+  visibility: var(--pvt-button-content-visibility);
+}
+.rls-button__content--ghost {
+  --pvt-button-content-font-color: var(--pvt-ghost-font-color);
+  --pvt-button-content-background: var(--pvt-ghost-background);
+  --pvt-button-content-border: var(--pvt-ghost-border);
+}
+.rls-button__content--flat {
+  --pvt-button-content-font-color: var(--pvt-flat-font-color);
+  --pvt-button-content-background: var(--pvt-flat-background);
+  --pvt-button-content-border: var(--pvt-flat-border);
+  --pvt-button-ripple-background: var(--color-rolster-500);
+}
+.rls-button__content--outline {
+  --pvt-button-content-font-color: var(--pvt-outline-font-color);
+  --pvt-button-content-background: var(--pvt-outline-background);
+  --pvt-button-content-border: var(--pvt-outline-border);
+}
+.rls-button__content--raised {
+  --pvt-button-content-background: var(--pvt-raised-background);
+  --pvt-button-content-font-color: var(--pvt-raised-font-color);
+  --pvt-button-content-border: var(--pvt-raised-border);
+  --pvt-button-ripple-background: var(--color-light-500);
+}
+.rls-button .rls-icon {
+  margin: auto var(--sizing-4);
+}
+.rls-button__label {
+  padding: 0rem var(--sizing-4);
+  line-height: initial;
+  width: auto;
+  margin: auto 0rem;
+  font-size: 0.825rem;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.825px;
+  text-transform: var(--rls-button-label-text-transform);
+}
+.rls-button__label a {
+  text-decoration: none;
+  color: inherit;
+}
+
+@keyframes ripple-squarecenter {
+  0% {
+    transform: scale(0);
+  }
+  20% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+.rls-button-action {
+  --pvt-tooltip-transition-delay: 0ms;
+  --pvt-tooltip-opacity: 0;
+  position: relative;
+  width: var(--sizing-32);
+  height: var(--sizing-32);
+  border: none;
+  outline: none;
+  padding: var(--sizing-4);
+  box-sizing: border-box;
+  user-select: none;
+  cursor: default;
+  background: transparent;
+  color: var(--rls-buttonaction-color);
+}
+.rls-button-action::before {
+  position: absolute;
+  display: block;
+  content: '';
+  top: 50%;
+  left: 50%;
+  opacity: 0.32;
+  visibility: hidden;
+  border-radius: 50%;
+  transform: scale(0);
+  background: var(--rls-buttonaction-ripple-color);
+  padding-top: calc(120% - var(--sizing-8));
+  padding-left: calc(120% - var(--sizing-8));
+  margin-top: calc(-60% + var(--sizing-4));
+  margin-left: calc(-60% + var(--sizing-4));
+}
+.rls-button-action:not(:active)::before {
+  animation: ripple-button-action 1000ms var(--standard-curve);
+}
+.rls-button-action:focus::before {
+  visibility: visible;
+}
+.rls-button-action::after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  opacity: 0.24;
+  width: var(--rls-buttonaction-ripple-dimension);
+  height: var(--rls-buttonaction-ripple-dimension);
+  margin-top: var(--rls-buttonaction-ripple-position);
+  margin-left: var(--rls-buttonaction-ripple-position);
+  border-radius: 50%;
+  background: var(--rls-buttonaction-ripple-color);
+  transform: scale(0);
+  transition: transform 160ms 0ms var(--sharp-curve);
+}
+.rls-button-action:not(:disabled):hover {
+  --pvt-tooltip-opacity: 1;
+  --pvt-tooltip-transition-delay: 480ms;
+}
+.rls-button-action:not(:disabled):hover::after {
+  transform: scale(1);
+}
+.rls-button-action:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-button-action__tooltip {
+  position: absolute;
+  top: calc(100% + var(--sizing-12));
+  left: 50%;
+  width: auto;
+  float: initial;
+  padding: var(--sizing-8);
+  border-radius: var(--sizing-4);
+  white-space: nowrap;
+  pointer-events: none;
+  transform: translateX(-50%);
+  background: var(--color-dark-500);
+  color: var(--color-light-500);
+  transition: opacity 200ms 0ms var(--deceleration-curve);
+  opacity: var(--pvt-tooltip-opacity);
+  transition-delay: var(--pvt-tooltip-transition-delay);
+}
+
+@keyframes ripple-button-action {
+  0% {
+    transform: scale(0);
+  }
+  20% {
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+.rls-checkbox {
+  --pvt-component-transform: scale(0);
+  position: relative;
+  float: left;
+  display: flex;
+  width: var(--sizing-24);
+  height: var(--sizing-24);
+  box-sizing: border-box;
+  outline: none;
+  border-radius: var(--sizing-4);
+  border: var(--border-1-theme-300);
+}
+.rls-checkbox:hover {
+  cursor: pointer;
+}
+.rls-checkbox--checked {
+  --pvt-component-transform: scale(1);
+  border: var(--border-1-rolster-500);
+}
+.rls-checkbox--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-checkbox__component {
+  border-radius: var(--sizing-2);
+  width: 0.875rem;
+  height: 0.875rem;
+  margin: auto;
+  background: var(--gradient-rolster-500);
+  transform: var(--pvt-component-transform);
+  transform-origin: 50% 50%;
+  transition: all 160ms 0ms var(--standard-curve);
+}
+
+.rls-input {
+  --pvt-value-font-color: var(--rls-input-font-color);
+  --pvt-value-opacity: 1;
+  --pvt-component-font-color: transparent;
+  position: relative;
+  float: left;
+  width: 100%;
+}
+.rls-input--active {
+  --pvt-component-font-color: var(--rls-input-font-color);
+  --pvt-value-font-color: transparent;
+}
+.rls-input--disabled {
+  --pvt-value-opacity: 0.5;
+}
+.rls-input__component {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: var(--rls-input-height);
+  line-height: var(--rls-input-height);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--pvt-component-font-color);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--rls-input-font-size);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+.rls-input__component::-webkit-outer-spin-button,
+.rls-input__component::-webkit-inner-spin-button {
+  margin: 0rem;
+  -webkit-appearance: none;
+}
+.rls-input__component::placeholder {
+  color: var(--color-theme-100);
+}
+.rls-input__component::selection {
+  background: var(--color-rolster-700);
+  color: var(--color-light-500);
+}
+.rls-input__component:disabled {
+  opacity: 0.5;
+}
+.rls-input__value {
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: var(--rls-input-height);
+  line-height: var(--rls-input-height);
+  background: transparent;
+  pointer-events: none;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: var(--pvt-value-opacity);
+  color: var(--pvt-value-font-color);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--rls-input-font-size);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+
+.rls-input-money {
+  position: relative;
+  float: left;
+  width: 100%;
+  padding: var(--rls-input-parent-padding);
+  box-sizing: border-box;
+}
+
+.rls-input-number {
+  position: relative;
+  float: left;
+  width: 100%;
+  padding: var(--rls-input-parent-padding);
+  box-sizing: border-box;
+}
+
+.rls-input-password {
+  position: relative;
+  float: left;
+  width: 100%;
+  padding: var(--rls-input-parent-padding);
+  box-sizing: border-box;
+}
+.rls-input-password__component {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--rls-input-font-color);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--rls-input-font-size);
+  letter-spacing: var(--rls-input-letter-spacing);
+}
+.rls-input-password__component::-webkit-outer-spin-button,
+.rls-input-password__component::-webkit-inner-spin-button {
+  margin: 0rem;
+  -webkit-appearance: none;
+}
+.rls-input-password__component::placeholder {
+  color: var(--color-theme-100);
+}
+.rls-input-password__component::selection {
+  background: var(--color-rolster-700);
+  color: var(--color-light-500);
+}
+.rls-input-password__component:disabled {
+  opacity: 0.5;
+}
+
+.rls-input-text {
+  position: relative;
+  float: left;
+  width: 100%;
+  padding: var(--rls-input-parent-padding);
+  box-sizing: border-box;
+}
+
+.rls-poster {
+  position: relative;
+  float: left;
+  width: auto;
+  height: var(--rls-poster-height);
+  line-height: var(--rls-poster-height);
+  padding: var(--rls-poster-padding);
+  box-sizing: border-box;
+  border-radius: var(--sizing-4);
+  color: var(--color-light-500);
+  background: var(--gradient-rolster-500);
+}
+
+.rls-progress-bar {
+  --pvt-component-display: block;
+  position: relative;
+  float: left;
+  width: 100%;
+  height: var(--sizing-4);
+  overflow: hidden;
+  background: var(--color-rolster-100);
+}
+.rls-progress-bar--indeterminate {
+  --pvt-component-display: none;
+}
+.rls-progress-bar--indeterminate::after,
+.rls-progress-bar--indeterminate::before {
+  position: absolute;
+  content: '';
+  top: 0rem;
+  width: 0%;
+  height: var(--sizing-4);
+  background: var(--gradient-rolster-500);
+}
+.rls-progress-bar--indeterminate::after {
+  animation: progress-bar-indeterminate-after 2000ms infinite;
+}
+.rls-progress-bar--indeterminate::before {
+  animation: progress-bar-indeterminate-before 2000ms infinite;
+}
+.rls-progress-bar__component {
+  position: absolute;
+  top: 0rem;
+  width: 0%;
+  height: var(--sizing-8);
+  display: var(--pvt-component-display);
+  background: var(--gradient-rolster-500);
+  transition: width 320ms 0ms var(--standard-curve);
+}
+
+@keyframes progress-bar-indeterminate-before {
+  0% {
+    width: 100%;
+    left: -125%;
+  }
+  20% {
+    width: 100%;
+    left: -125%;
+  }
+  100% {
+    width: 12.5%;
+    left: 100%;
+  }
+}
+
+@keyframes progress-bar-indeterminate-after {
+  0% {
+    width: 12.5%;
+    left: -12.5%;
+  }
+  80% {
+    width: 100%;
+    left: 125%;
+  }
+  100% {
+    width: 100%;
+    left: 125%;
+  }
+}
+
+.rls-radiobutton {
+  --pvt-component-transform: scale(0);
+  position: relative;
+  float: left;
+  display: flex;
+  outline: none;
+  width: var(--sizing-24);
+  height: var(--sizing-24);
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: var(--border-1-theme-300);
+}
+.rls-radiobutton:hover {
+  cursor: pointer;
+}
+.rls-radiobutton--checked {
+  --pvt-component-transform: scale(1);
+  border: var(--border-1-rolster-500);
+}
+.rls-radiobutton--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-radiobutton__component {
+  border-radius: 50%;
+  width: 0.875rem;
+  height: 0.875rem;
+  margin: auto;
+  background: var(--gradient-rolster-500);
+  transform: var(--pvt-component-transform);
+  transform-origin: 50% 50%;
+  transition: all 160ms 0ms var(--standard-curve);
+}
+
+.rls-search-input {
+  --rls-input-height: var(--sizing-28);
+  position: relative;
+  float: left;
+  display: flex;
+  padding: var(--sizing-8) var(--sizing-12);
+  box-sizing: border-box;
+  border: var(--border-1-theme-300);
+  border-radius: var(--sizing-8);
+}
+
+.rls-skeleton {
+  position: relative;
+  float: left;
+  width: 100%;
+  max-height: inherit;
+  min-height: inherit;
+  height: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  overflow: hidden;
+  background: var(--color-rolster-100);
+  border-radius: var(--sizing-4);
+}
+.rls-skeleton::after {
+  position: absolute;
+  content: '';
+  top: 0rem;
+  right: 0rem;
+  bottom: 0rem;
+  left: 0rem;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    var(--skeleton-rolster-100) 0%,
+    var(--skeleton-rolster-100) 20%,
+    var(--skeleton-rolster-300) 60%,
+    var(--skeleton-rolster-100)
+  );
+  animation: skeleton-animation 1600ms infinite;
+}
+
+@keyframes skeleton-animation {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.rls-skeleton-text {
+  --pvt-value-visibility: visible;
+  position: relative;
+  float: left;
+  width: 100%;
+  max-height: inherit;
+  min-height: inherit;
+  height: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  overflow: hidden;
+}
+.rls-skeleton-text--active {
+  --pvt-value-visibility: hidden;
+  background: var(--color-rolster-100);
+  border-radius: var(--sizing-4);
+}
+.rls-skeleton-text--active::after {
+  animation: skeleton-text-animation 1600ms infinite;
+}
+.rls-skeleton-text::after {
+  position: absolute;
+  content: '';
+  top: 0rem;
+  right: 0rem;
+  bottom: 0rem;
+  left: 0rem;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    var(--skeleton-rolster-100) 0%,
+    var(--skeleton-rolster-100) 20%,
+    var(--skeleton-rolster-300) 60%,
+    var(--skeleton-rolster-100)
+  );
+}
+.rls-skeleton-text__value {
+  position: relative;
+  display: block;
+  float: left;
+  width: 100%;
+  height: inherit;
+  max-height: inherit;
+  min-height: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: inherit;
+  letter-spacing: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  visibility: var(--pvt-value-visibility);
+}
+
+@keyframes skeleton-text-animation {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.rls-switch {
+  --pvt-component-background: var(--border-theme-300);
+  --pvt-component-left: calc(var(--sizing-2) + 1px);
+  position: relative;
+  float: left;
+  outline: none;
+  box-sizing: border-box;
+  width: var(--sizing-40);
+  height: var(--sizing-24);
+  box-sizing: border-box;
+  border-radius: var(--sizing-12);
+  border: var(--border-1-theme-300);
+}
+.rls-switch:hover {
+  cursor: pointer;
+}
+.rls-switch--checked {
+  --pvt-component-background: var(--gradient-rolster-500);
+  --pvt-component-left: 1.125rem;
+  border: var(--border-1-rolster-500);
+}
+.rls-switch--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rls-switch__component {
+  position: absolute;
+  top: calc(var(--sizing-2) + 1px);
+  left: var(--pvt-component-left);
+  width: var(--sizing-16);
+  height: var(--sizing-16);
+  background: var(--pvt-component-background);
+  transition: left 160ms 0ms var(--standard-curve);
+  border-radius: var(--sizing-12);
+}
+
+.rls-ballot {
+  --rls-avatar-width: var(--sizing-40);
+  --rls-avatar-height: var(--sizing-40);
+  position: relative;
+  float: left;
+  display: flex;
+  width: 100%;
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rls-ballot--bordered {
+  border-radius: var(--sizing-8);
+  border: var(--border-1-theme-300);
+}
+.rls-ballot--skeleton {
+  --subtitle-width: 60%;
+}
+.rls-ballot > .rls-avatar {
+  margin: auto 0rem;
+}
+.rls-ballot > .rls-avatar + .rls-ballot__component {
+  width: calc(100% - var(--sizing-56));
+  margin-left: var(--sizing-8);
+}
+.rls-ballot__component {
+  overflow: hidden;
+  margin: auto;
+}
+.rls-ballot__title {
+  position: relative;
+  float: left;
+  width: 100%;
+  color: var(--color-theme-500);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: var(--font-weight-medium);
+  font-size: var(--label-font-size);
+  letter-spacing: var(--label-letter-spacing);
+  min-height: var(--label-line-height);
+  line-height: var(--label-line-height);
+}
+.rls-ballot__subtitle {
+  position: relative;
+  float: left;
+  width: var(--rls-ballot-subtitle-width);
+  color: var(--color-theme-300);
+  margin-top: var(--sizing-4);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--smalltext-font-size);
+  letter-spacing: var(--smalltext-letter-spacing);
+  min-height: var(--rls-ballot-subtitle-height);
+  line-height: var(--rls-ballot-subtitle-height);
+  overflow: var(--rls-ballot-subtitle-overflow);
+  text-overflow: var(--rls-ballot-subtitle-text-overflow);
+  white-space: var(--rls-ballot-subtitle-white-space);
+}
+
+.rls-button-toggle {
+  width: auto;
+}
+.rls-button-toggle__content {
+  display: flex;
+  justify-content: center;
+}
+.rls-button-toggle__action {
+  --rls-button-content-radius: var(--sizing-4) 0rem 0rem var(--sizing-4);
+  width: auto;
+}
+.rls-button-toggle__icon {
+  --rls-button-content-radius: 0rem var(--sizing-4) var(--sizing-4) 0rem;
+  --rls-button-content-padding: var(--sizing-4);
+  width: auto;
+}
+.rls-button-toggle__list {
+  --rls-button-toggle-ul-height: 0rem;
+  --rls-button-toggle-ul-opacity: 0;
+  --rls-button-toggle-ul-transform: none;
+  position: absolute;
+  top: 2.8125rem;
+  left: 0rem;
+  width: 100%;
+  height: 0rem;
+  overflow: hidden;
+  z-index: var(--z-index-4);
+}
+.rls-button-toggle__list--hide {
+  --rls-button-toggle-ul-opacity: 0;
+  --rls-button-toggle-ul-transform: scale(0, 0);
+}
+.rls-button-toggle__list--visible {
+  --rls-button-toggle-ul-height: auto;
+  --rls-button-toggle-ul-opacity: 1;
+  --rls-button-toggle-ul-transform: scale(1, 1);
+  overflow: initial;
+  opacity: 1;
+  height: auto;
+}
+.rls-button-toggle__list ul {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  float: left;
+  width: 100%;
+  height: var(--rls-button-toggle-ul-height);
+  opacity: var(--rls-button-toggle-ul-opacity);
+  padding: var(--sizing-8) 0rem;
+  border-radius: var(--sizing-8);
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: var(--z-index-2);
+  background: var(--background-theme-500);
+  border: var(--border-3) solid var(--color-rolster-300);
+  transform: var(--rls-button-toggle-ul-transform);
+  transform-origin: 0% 0%;
+  transition: transform 240ms 0ms var(--standard-curve),
+    opacity 240ms 0ms var(--standard-curve);
+  will-change: opacity, transform;
+}
+.rls-button-toggle__list ul li {
+  padding: 0rem var(--sizing-12);
+  box-sizing: border-box;
+  height: var(--sizing-40);
+  line-height: var(--sizing-40);
+  cursor: default;
+  font-weight: var(--font-weight-bold);
+  font-size: 0.825rem;
+  letter-spacing: 0.825px;
+  text-transform: uppercase;
+  color: var(--color-theme-300);
+}
+.rls-button-toggle__list ul li:hover {
+  background: var(--background-theme-300);
+  color: var(--color-theme-500);
+}
+
+.rls-checkbox-label {
+  --pvt-text-opacity: 1;
+  --pvt-text-height: var(--sizing-24);
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  position: relative;
+  float: left;
+  width: 100%;
+  display: flex;
+}
+.rls-checkbox-label--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-checkbox-label--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+  --pvt-text-height: auto;
+}
+.rls-checkbox-label__component {
+  margin-right: var(--sizing-8);
+  width: auto;
+}
+.rls-checkbox-label__text {
+  float: left;
+  max-width: calc(100% - var(--sizing-32));
+  height: var(--pvt-text-height);
+  line-height: var(--sizing-24);
+  color: var(--color-theme-300);
+  font-size: var(--label-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--label-letter-spacing);
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: var(--pvt-text-overflow);
+  white-space: var(--pvt-text-white-space);
+  text-overflow: var(--pvt-text-text-overflow);
+}
+
+.rls-day-picker {
+  --pvt-span-nothover-background: transparent;
+  --pvt-span-nothover-font-color: inherit;
+  --pvt-span-background: transparent;
+  position: relative;
+  float: left;
+  width: 100%;
+  max-width: 17.5rem;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rls-day-picker__header {
+  display: flex;
+  margin-bottom: var(--sizing-8);
+  background: var(--background-theme-100);
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-4);
+}
+.rls-day-picker__label {
+  padding: var(--sizing-12) 0rem;
+  text-align: center;
+  width: 100%;
+  font-size: var(--sizing-12);
+  font-weight: var(--font-weight-bold);
+}
+.rls-day-picker__week {
+  display: flex;
+}
+.rls-day-picker__day {
+  text-align: center;
+  padding: var(--sizing-2);
+  box-sizing: border-box;
+}
+.rls-day-picker__day__span {
+  position: relative;
+  display: block;
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-8);
+  height: var(--sizing-36);
+  line-height: var(--sizing-36);
+  margin: var(--sizing-2) 0rem;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+  background: var(--pvt-span-background);
+}
+.rls-day-picker__day__span:not(:hover) {
+  background: var(--pvt-span-nothover-background);
+  color: var(--pvt-span-nothover-font-color);
+}
+.rls-day-picker__day__span:hover {
+  background: var(--color-rolster-900);
+  color: var(--color-light-500);
+}
+.rls-day-picker__day--selected {
+  --pvt-span-nothover-background: var(--color-rolster-500);
+  --pvt-span-nothover-font-color: var(--color-light-500);
+}
+.rls-day-picker__day--forbidden {
+  --pvt-span-background: var(--background-theme-100);
+  pointer-events: none;
+  opacity: 0.5;
+}
+.rls-day-picker__day--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.rls-day-range-picker {
+  --pvt-span-nothover-background: transparent;
+  --pvt-span-nothover-font-color: inherit;
+  --pvt-span-background: transparent;
+  position: relative;
+  float: left;
+  width: 100%;
+  max-width: 17.5rem;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rls-day-range-picker__header {
+  display: flex;
+  margin-bottom: var(--sizing-8);
+  background: var(--background-theme-100);
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-4);
+}
+.rls-day-range-picker__label {
+  padding: var(--sizing-12) 0rem;
+  text-align: center;
+  width: 100%;
+  font-size: var(--sizing-12);
+  font-weight: var(--font-weight-bold);
+}
+.rls-day-range-picker__week {
+  display: flex;
+}
+.rls-day-range-picker__day {
+  text-align: center;
+  padding: var(--sizing-2);
+  box-sizing: border-box;
+}
+.rls-day-range-picker__day__span {
+  position: relative;
+  display: block;
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-8);
+  height: var(--sizing-36);
+  line-height: var(--sizing-36);
+  margin: var(--sizing-2) 0rem;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+}
+.rls-day-range-picker__day__span:not(:hover) {
+  background: var(--pvt-span-nothover-background);
+  color: var(--pvt-span-nothover-font-color);
+}
+.rls-day-range-picker__day__span:hover {
+  color: var(--color-light-500);
+  background: var(--color-rolster-900);
+}
+.rls-day-range-picker__day--selected {
+  --pvt-span-nothover-background: var(--color-rolster-500);
+  --pvt-span-nothover-font-color: var(--color-light-500);
+}
+.rls-day-range-picker__day--ranged {
+  --pvt-span-nothover-background: var(--color-rolster-100);
+}
+.rls-day-range-picker__day--forbidden {
+  --pvt-span-background: var(--background-theme-100);
+  pointer-events: none;
+  opacity: 0.5;
+}
+.rls-day-range-picker__day--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.rls-money-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.rls-month-picker {
+  position: relative;
+  float: left;
+  width: 100%;
+  max-width: 17.5rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--sizing-4);
+  padding: var(--sizing-2);
+  box-sizing: border-box;
+}
+.rls-month-picker__component {
+  position: relative;
+  float: left;
+  display: flex;
+  box-sizing: border-box;
+  text-align: center;
+  height: var(--sizing-36);
+  border-radius: var(--sizing-8);
+  color: var(--color-theme-300);
+}
+.rls-month-picker__component:hover {
+  background: var(--color-rolster-900);
+  color: var(--color-light-500);
+}
+.rls-month-picker__component--selected:not(:hover) {
+  background: var(--color-rolster-500);
+  color: var(--color-light-500);
+}
+.rls-month-picker__component--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.rls-month-picker__component__span {
+  font-size: 0.725rem;
+  margin: auto;
+  cursor: default;
+  pointer-events: none;
+  font-weight: var(--font-weight-semibold);
+}
+
+.rls-month-title-picker {
+  display: flex;
+  justify-content: space-between;
+}
+.rls-month-title-picker span {
+  color: var(--color-theme-300);
+  cursor: default;
+  margin: auto 0rem;
+  height: var(--sizing-28);
+  line-height: var(--sizing-28);
+  font-size: var(--sizing-20);
+  font-weight: var(--font-weight-bold);
+}
+.rls-month-title-picker span:hover {
+  color: var(--color-rolster-500);
+}
+
+.rls-number-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.rls-pagination {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  float: left;
+  width: 100%;
+  overflow: hidden;
+  height: var(--sizing-40);
+  padding: 0rem var(--sizing-12);
+  box-sizing: border-box;
+}
+.rls-pagination__pages {
+  display: flex;
+  gap: var(--sizing-8);
+  width: auto;
+  margin: 0rem var(--sizing-8);
+}
+.rls-pagination__page {
+  background: var(--background-theme-100);
+  color: var(--color-theme-500);
+  cursor: default;
+  margin: auto 0rem;
+  text-align: center;
+  width: var(--sizing-32);
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  border-radius: var(--sizing-4);
+}
+.rls-pagination__page:hover {
+  background: var(--color-xofttion-300);
+  color: var(--color-xofttion-900);
+}
+.rls-pagination__page--active {
+  background: var(--gradient-xofttion-500);
+  color: var(--color-light-500);
+}
+.rls-pagination__description {
+  color: var(--font-primary-900);
+  margin: 0rem var(--sizing-8);
+  width: auto;
+  height: var(--sizing-40);
+  line-height: var(--sizing-40);
+  font-size: var(--body-1-size);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--body-1-letter-spacing);
+}
+.rls-pagination__actions {
+  width: auto;
+}
+.rls-pagination__action {
+  background: none;
+  outline: none;
+  color: var(--color-theme-300);
+  height: var(--sizing-36);
+  width: var(--sizing-36);
+  padding: var(--sizing-6);
+  margin: var(--sizing-2) 0rem;
+}
+.rls-pagination__action:hover {
+  color: var(--color-xofttion-300);
+  cursor: pointer;
+}
+.rls-pagination__action:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.rls-password-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  --rls-buttonaction-ripple-dimension: var(--sizing-32);
+  --rls-buttonaction-ripple-position: -1rem;
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-password-field .rls-button-action {
+  margin: auto var(--sizing-4) auto 0rem;
+}
+
+.rls-radiobutton-label {
+  --pvt-text-opacity: 1;
+  --pvt-text-height: var(--sizing-24);
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  position: relative;
+  float: left;
+  width: 100%;
+  display: flex;
+}
+.rls-radiobutton-label--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-radiobutton-label--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+  --pvt-text-height: auto;
+}
+.rls-radiobutton-label__component {
+  margin-right: var(--sizing-8);
+  width: auto;
+}
+.rls-radiobutton-label__text {
+  float: left;
+  max-width: calc(100% - var(--sizing-32));
+  height: var(--pvt-text-height);
+  line-height: var(--sizing-24);
+  color: var(--color-theme-300);
+  font-size: var(--label-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--label-letter-spacing);
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: var(--pvt-text-overflow);
+  white-space: var(--pvt-text-white-space);
+  text-overflow: var(--pvt-text-text-overflow);
+}
+
+.rls-switch-label {
+  --pvt-text-opacity: 1;
+  --pvt-text-height: var(--sizing-24);
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  position: relative;
+  float: left;
+  width: 100%;
+  display: flex;
+}
+.rls-switch-label--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-switch-label--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+  --pvt-text-height: auto;
+}
+.rls-switch-label__component {
+  margin-right: var(--sizing-8);
+  width: auto;
+}
+.rls-switch-label__text {
+  float: left;
+  max-width: calc(100% - var(--sizing-56));
+  height: var(--pvt-text-height);
+  line-height: var(--sizing-24);
+  color: var(--color-theme-300);
+  font-size: var(--label-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--label-letter-spacing);
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: var(--pvt-text-overflow);
+  white-space: var(--pvt-text-white-space);
+  text-overflow: var(--pvt-text-text-overflow);
+}
+
+.rls-text-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.rls-toolbar {
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--sizing-12);
+  height: var(--rls-toolbar-height);
+}
+.rls-toolbar > * {
+  width: auto;
+}
+.rls-toolbar__content {
+  display: flex;
+  height: 100%;
+  padding: var(--sizing-4) var(--sizing-12);
+  box-sizing: border-box;
+  margin: auto 0rem;
+}
+.rls-toolbar__description {
+  overflow: hidden;
+  padding: 0rem var(--sizing-4);
+  box-sizing: border-box;
+  margin: auto 0rem;
+}
+.rls-toolbar__description > label {
+  position: relative;
+  float: left;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-toolbar__title {
+  color: var(--color-theme-500);
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  font-size: 1.0125rem;
+  letter-spacing: var(--label-letter-spacing);
+  font-weight: var(--font-weight-bold);
+}
+.rls-toolbar__subtitle {
+  color: var(--color-theme-300);
+}
+.rls-toolbar__actions {
+  display: flex;
+  box-sizing: border-box;
+  margin: auto 0rem;
+  column-gap: var(--sizing-16);
+}
+.rls-toolbar__actions > * {
+  margin: auto 0rem;
+}
+
+.rls-year-picker {
+  position: relative;
+  float: left;
+  width: 100%;
+  max-width: 17.5rem;
+  box-sizing: border-box;
+  overflow: hidden;
+  user-select: none;
+}
+.rls-year-picker__header {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--sizing-8) var(--sizing-12);
+  color: var(--color-theme-500);
+  background: var(--background-theme-100);
+}
+.rls-year-picker__title {
+  width: 100%;
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  text-align: center;
+  font-weight: var(--font-weight-bold);
+}
+.rls-year-picker__action {
+  width: var(--sizing-32);
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+}
+.rls-year-picker__action button {
+  color: var(--color-theme-500);
+  background: transparent;
+  outline: none;
+  width: inherit;
+  height: inherit;
+}
+.rls-year-picker__action button:disabled {
+  opacity: 0.5;
+}
+.rls-year-picker__component {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--sizing-8);
+  width: 100%;
+  float: left;
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+}
+.rls-year-picker__year {
+  position: relative;
+  float: left;
+  display: flex;
+  box-sizing: border-box;
+  text-align: center;
+  height: var(--sizing-36);
+  border-radius: var(--sizing-8);
+  color: var(--color-theme-300);
+}
+.rls-year-picker__year:hover {
+  background: var(--color-rolster-900);
+  color: var(--color-light-500);
+}
+.rls-year-picker__year--selected:not(:hover) {
+  background: var(--color-rolster-500);
+  color: var(--color-light-500);
+}
+.rls-year-picker__year--disabled {
+  pointer-events: none;
+  border: none;
+  opacity: 0.5;
+}
+.rls-year-picker__year__span {
+  margin: auto;
+  cursor: default;
+  pointer-events: none;
+  font-weight: var(--font-weight-medium);
+}
+
+.rls-autocomplete-field.rls-box-field--selected .rls-list-field__control {
+  width: calc(100% - var(--sizing-28));
+}
+
+.rls-autocomplete-field .rls-list-field__control {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rls-autocomplete-field .rls-list-field__ul__search {
+  display: flex;
+  width: calc(100% - var(--sizing-24));
+  margin: var(--sizing-4) var(--sizing-12) var(--sizing-12) var(--sizing-12);
+  overflow: hidden;
+  background: var(--background-theme-300);
+  border-radius: var(--sizing-8);
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+}
+.rls-autocomplete-field .rls-list-field__ul__search button {
+  color: var(--color-theme-300);
+  background: transparent;
+}
+.rls-autocomplete-field
+  .rls-list-field__ul__search
+  button:not(:disabled):hover {
+  color: var(--color-xofttion-300);
+}
+.rls-autocomplete-field .rls-list-field__ul__search button:disabled {
+  opacity: 0.5;
+}
+
+.rls-autocomplete-field .rls-list-field__ul__control {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-theme-input);
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--input-letter-spacing);
+}
+.rls-autocomplete-field .rls-list-field__ul__control::placeholder {
+  color: var(--color-theme-100);
+}
+.rls-autocomplete-field .rls-list-field__ul__control::selection {
+  background: var(--color-xofttion-700);
+  color: var(--color-light-500);
+}
+.rls-autocomplete-field .rls-list-field__ul__control:disabled {
+  opacity: 0.5;
+}
+
+.rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
+  margin-bottom: var(--sizing-16);
+}
+
+.rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
+  background: var(--color-xofttion-100);
+  color: var(--color-xofttion-500);
+  padding: 0rem var(--sizing-4);
+  border-radius: var(--sizing-4);
+}
+
+.rls-card {
+  background: var(--background-theme-500);
+  border-radius: var(--sizing-8);
+  border: var(--border-1-theme-100);
+}
+.rls-card__content {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sizing-16);
+  box-sizing: border-box;
+}
+
+.rls-confirmation {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0rem;
+  left: 0rem;
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--z-index-24);
+  visibility: hidden;
+}
+.rls-confirmation--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-confirmation__component {
+  position: absolute;
+  width: calc(100% - var(--sizing-32));
+  max-width: 20rem;
+  height: var(--pvt-component-height);
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  padding: var(--sizing-8) 0rem;
+  box-sizing: border-box;
+  z-index: var(--z-index-2);
+  border-radius: var(--sizing-8);
+  background: var(--background-theme-500);
+  box-shadow: var(--shadow-4);
+  will-change: transform;
+  transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--deceleration-curve),
+    transform 125ms 0ms var(--deceleration-curve),
+    visibility 125ms 0ms var(--deceleration-curve);
+}
+.rls-confirmation__header {
+  position: relative;
+  float: left;
+  width: 100%;
+  padding: var(--sizing-8) var(--sizing-16);
+  box-sizing: border-box;
+}
+.rls-confirmation__header__title {
+  text-align: center;
+  width: 100%;
+  color: var(--color-theme-500);
+  font-size: 0.85rem;
+  line-height: 0.85rem;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.875px;
+  text-transform: uppercase;
+}
+.rls-confirmation__header__subtitle {
+  text-align: center;
+  margin-top: var(--sizing-8);
+  width: 100%;
+  color: var(--color-theme-100);
+  font-size: 0.675rem;
+  line-height: 0.675rem;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.875px;
+  text-transform: uppercase;
+}
+.rls-confirmation__body {
+  position: relative;
+  float: left;
+  width: 100%;
+  padding: var(--sizing-8) var(--sizing-16);
+  box-sizing: border-box;
+}
+.rls-confirmation__body__content {
+  color: var(--color-theme-300);
+  margin: 0rem;
+  text-align: center;
+  font-size: 0.925rem;
+  line-height: 1.325rem;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.05em;
+}
+.rls-confirmation__footer {
+  position: relative;
+  float: left;
+  width: 100%;
+  padding: var(--sizing-16) var(--sizing-16) var(--sizing-8) var(--sizing-16);
+  box-sizing: border-box;
+  margin-top: var(--sizing-16);
+  border-top: var(--border-1-theme-100);
+}
+.rls-confirmation__footer__actions {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+  float: left;
+  width: 100%;
+  margin: auto;
+}
+.rls-confirmation__footer__actions button + button {
+  margin-bottom: var(--sizing-12);
+}
+.rls-confirmation__backdrop {
+  position: absolute;
+  display: block;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  will-change: opacity;
+  background: var(--backdrop-rolster-500);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--deceleration-curve),
+    bottom 120ms 0ms var(--deceleration-curve);
+}
+
+.rls-date-picker {
+  position: relative;
+  float: left;
+  max-width: 18.75rem;
+  overflow: hidden;
+}
+.rls-date-picker__header {
+  background: var(--color-xofttion-100);
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+  margin-bottom: var(--sizing-16);
+}
+.rls-date-picker__title {
+  color: var(--color-theme-500);
+  text-align: center;
+  cursor: default;
+  font-weight: var(--font-weight-bold);
+}
+.rls-date-picker__title:hover {
+  color: var(--color-xofttion-500);
+}
+.rls-date-picker__title--description {
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  font-size: 1.15rem;
+}
+.rls-date-picker__title--year {
+  margin: var(--sizing-8) 0rem var(--sizing-4) 0rem;
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  font-size: var(--sizing-24);
+  color: var(--color-theme-300);
+}
+.rls-date-picker__component {
+  display: flex;
+  padding: 0rem var(--sizing-4);
+  box-sizing: border-box;
+  margin-bottom: var(--sizing-8);
+}
+.rls-date-picker__component > * {
+  margin: 0rem auto;
+  display: none;
+}
+.rls-date-picker__component--day .rls-day-picker {
+  display: block;
+}
+.rls-date-picker__component--month .rls-month-picker {
+  display: grid;
+}
+.rls-date-picker__component--year .rls-year-picker {
+  display: block;
+}
+.rls-date-picker__footer--hidden {
+  display: none;
+}
+.rls-date-picker__actions {
+  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-date-picker__actions--cancel {
+  width: calc(50% - var(--sizing-4));
+  margin-right: var(--sizing-4);
+}
+.rls-date-picker__actions--today {
+  width: calc(50% - var(--sizing-4));
+  margin-left: var(--sizing-4);
+}
+.rls-date-picker__actions--ok {
+  margin-top: var(--sizing-8);
+  width: 100%;
+}
+.rls-date-picker__actions button {
+  width: 100%;
+}
+
+.rls-modal {
+  --pvt-component-transform: translateY(10rem) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+}
+.rls-modal--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-modal__component {
+  position: absolute;
+  width: auto;
+  max-width: calc(100% - var(--sizing-16));
+  height: var(--pvt-component-height);
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--z-index-2);
+  overflow: hidden;
+  border-radius: var(--sizing-8);
+  background: var(--background-theme-500);
+  will-change: transform;
+  transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--deceleration-curve),
+    transform 125ms 0ms var(--deceleration-curve),
+    visibility 125ms 0ms var(--deceleration-curve);
+}
+.rls-modal__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  will-change: opacity;
+  background: var(--backdrop-rolster-500);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--deceleration-curve),
+    bottom 120ms 0ms var(--deceleration-curve);
+}
+
+.rls-date-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-date-field__control {
+  position: relative;
+  float: left;
+  width: calc(100% - var(--sizing-28));
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  color: var(--color-theme-input);
+  background: transparent;
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--input-letter-spacing);
+}
+.rls-date-field__control::placeholder {
+  color: var(--color-theme-100);
+}
+.rls-date-field__control:disabled {
+  opacity: 0.5;
+}
+.rls-date-field__action {
+  color: var(--color-theme-300);
+  width: var(--sizing-24);
+  height: var(--sizing-24);
+  padding: 0rem;
+  margin-left: var(--sizing-4);
+  background: transparent;
+}
+
+.rls-date-range-picker {
+  position: relative;
+  float: left;
+  max-width: 18.75rem;
+  overflow: hidden;
+}
+.rls-date-range-picker__header {
+  background: var(--color-rolster-100);
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+  margin-bottom: var(--sizing-16);
+}
+.rls-date-range-picker__title {
+  color: var(--color-theme-500);
+  text-align: center;
+  cursor: default;
+  font-weight: var(--font-weight-bold);
+}
+.rls-date-range-picker__title:hover {
+  color: var(--color-rolster-500);
+}
+.rls-date-range-picker__title--description {
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  font-size: 1.15rem;
+}
+.rls-date-range-picker__title--year {
+  margin: var(--sizing-8) 0rem var(--sizing-4) 0rem;
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  font-size: var(--sizing-24);
+  color: var(--color-theme-300);
+}
+.rls-date-range-picker__title--month {
+  display: flex;
+  justify-content: space-between;
+}
+.rls-date-range-picker__title--month span {
+  height: var(--sizing-28);
+  line-height: var(--sizing-28);
+  font-size: var(--sizing-20);
+  color: var(--color-theme-300);
+  margin: auto 0rem;
+}
+.rls-date-range-picker__component {
+  display: flex;
+  padding: 0rem var(--sizing-4);
+  box-sizing: border-box;
+  margin-bottom: var(--sizing-8);
+}
+.rls-date-range-picker__component > * {
+  margin: 0rem auto;
+  display: none;
+}
+.rls-date-range-picker__component--day .rls-day-range-picker {
+  display: block;
+}
+.rls-date-range-picker__component--month .rls-month-picker {
+  display: grid;
+}
+.rls-date-range-picker__component--year .rls-year-picker {
+  display: block;
+}
+.rls-date-range-picker__footer--hidden {
+  display: none;
+}
+.rls-date-range-picker__actions {
+  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-date-range-picker__actions--cancel {
+  width: 100%;
+}
+.rls-date-range-picker__actions--ok {
+  margin-top: var(--sizing-8);
+  width: 100%;
+}
+.rls-date-range-picker__actions button {
+  width: 100%;
+}
+
+.rls-date-range-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-date-range-field__control {
+  position: relative;
+  float: left;
+  width: calc(100% - var(--sizing-28));
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  color: var(--color-theme-input);
+  background: transparent;
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--input-letter-spacing);
+}
+.rls-date-range-field__control::placeholder {
+  color: var(--color-theme-100);
+}
+.rls-date-range-field__control:disabled {
+  opacity: 0.5;
+}
+.rls-date-range-field__action {
+  color: var(--color-theme-300);
+  width: var(--sizing-24);
+  height: var(--sizing-24);
+  padding: 0rem;
+  margin-left: var(--sizing-4);
+  background: transparent;
+}
+
+.rls-form-navigation {
+  position: fixed;
+  top: var(--sizing-16);
+  right: var(--sizing-16);
+  width: calc(100% - var(--sizing-32));
+  max-width: 20rem;
+  height: auto;
+  max-height: calc(100vh - var(--sizing-32));
+  z-index: var(--z-index-12);
+  padding: var(--sizing-16) var(--sizing-16) var(--sizing-24) var(--sizing-16);
+  box-sizing: border-box;
+  background: var(--background-theme-500);
+  border-radius: var(--sizing-8);
+  box-shadow: var(--shadow-center-dark-8);
+  transform: translateX(calc(100% + var(--sizing-32)));
+  transition: transform 240ms 0ms var(--standard-curve);
+}
+.rls-form-navigation--visible {
+  transform: translateX(0%);
+}
+.rls-form-navigation__header {
+  margin-bottom: var(--sizing-16);
+}
+.rls-form-navigation__header .rls-button-action {
+  width: var(--sizing-24);
+  height: var(--sizing-24);
+  padding: 0rem;
+  float: right;
+}
+
+.rls-select-field .rls-list-field__control {
+  cursor: pointer;
+}
+
+.rls-select-field .rls-list-field__action {
+  transition: transform 160ms 0ms var(--sharp-curve);
+}
+.rls-select-field .rls-list-field__action--visible {
+  transform: rotate(180deg);
+}
+
+.rls-snackbar {
+  position: fixed;
+  display: flex;
+  bottom: 0rem;
+  left: var(--rls-snackbar-left);
+  z-index: 32;
+  width: auto;
+  height: auto;
+  max-width: 30rem;
+  padding: var(--sizing-12);
+  box-sizing: border-box;
+  border-radius: var(--sizing-8);
+  background: var(--color-rolster-100);
+  box-shadow: var(--shadow-bottom-light-4);
+  border: var(--border-1-rolster-300);
+  will-change: transform;
+  transform: translate(-50%, 100%);
+  transition: transform 160ms 0ms var(--standard-curve);
+}
+.rls-snackbar--visible {
+  transform: translate(-50%, calc(0% - var(--sizing-16)));
+}
+.rls-snackbar__avatar {
+  background: var(--color-rolster-500);
+  width: var(--sizing-32);
+  height: var(--sizing-32);
+  overflow: hidden;
+  border-radius: var(--sizing-8);
+}
+.rls-snackbar__avatar .rls-icon {
+  color: var(--color-light-500);
+  margin: var(--sizing-4);
+}
+.rls-snackbar__avatar + .rls-snackbar__component {
+  width: calc(100% - var(--sizing-40));
+  margin-left: var(--sizing-12);
+}
+.rls-snackbar__component {
+  margin: auto 0rem;
+}
+.rls-snackbar__title {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: var(--sizing-4);
+  color: var(--color-rolster-500);
+  font-size: var(--body-font-size);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--body-letter-spacing);
+}
+.rls-snackbar__message {
+  display: block;
+  line-height: var(--sizing-20);
+  color: var(--color-theme-300);
+  font-size: var(--label-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--label-letter-spacing);
+}
+
+@media only screen and (max-width: 375px) {
+  .rls-snackbar {
+    width: calc(100% - var(--sizing-24));
+  }
+}