rappel-ui 1.0.13 → 1.0.14

package/theme-chalk/re-button.css

@@ -0,0 +1,810 @@
+/**
+ * craete same white opacity color
+ */
+/**
+ * create a darken color
+ */
+/**
+ * create shape color
+ */
+/**
+ * create dark shape color
+ */
+/**
+ &.re-tooltip-popover, &.re-tooltip-arrow
+*/
+/**
+  &.re-tooltip-overlay
+ */
+.re-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--re-base-font-size);
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: width 0.05s ease, height 0.05s ease, background-color 0.03s ease, transform 0.03s ease;
+  -webkit-user-select: none;
+  user-select: none;
+  outline: none;
+  vertical-align: middle;
+  height: 32px;
+  line-height: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  padding: 8px 16px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--re-button-bgcolor);
+  color: var(--re-button-color);
+  border-color: var(--re-button-border-color);
+}
+.re-button__content {
+  display: inline-flex;
+  align-items: center;
+}
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.re-button__loading {
+  animation: rotating 2s linear infinite;
+}
+.re-button__loading + * {
+  margin-left: 4px;
+}
+.re-button__icon {
+  width: 1em;
+  height: 1em;
+}
+.re-button__icon + span {
+  margin-left: 4px;
+}
+.re-button.is-dashed {
+  border-style: dashed;
+}
+.re-button.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-fill-blank);
+}
+.re-button.is-link, .re-button.is-text {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button.is-link {
+  padding: 2px;
+  height: auto;
+  text-decoration: underline;
+}
+.re-button.is-text {
+  padding: 0;
+  height: auto;
+}
+.re-button.is-text.is-text-padding, .re-button.is-text.is-text-bg {
+  padding: 8px 16px;
+  height: 32px;
+  border: 0 solid transparent;
+}
+.re-button.is-plain:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-primary-base);
+  --re-button-bgcolor: var(--re-color-fill-blank);
+}
+.re-button.is-round {
+  border-radius: 20px;
+}
+.re-button.is-circle {
+  width: 32px;
+  border-radius: 50%;
+  padding: 8px;
+}
+.re-button + .re-button {
+  margin-left: 10px;
+}
+.re-button {
+  --re-button-bgcolor: var(--re-color-fill-blank);
+  --re-button-color: var(--re-color-text-base);
+  --re-button-border-color: var(--re-color-border-base);
+}
+.re-button:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-border-color: var(--re-color-primary-shade-4);
+}
+.re-button:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-primary-shade-2);
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-border-color: var(--re-color-primary-shade-5);
+}
+.re-button:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-border-darker);
+}
+.re-button.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-fill-blank);
+  --re-button-border-color: var(--re-color-border-base);
+  --re-button-color: var(--re-color-text-lighter);
+}
+.re-button.is-link, .re-button.is-text {
+  --re-button-color: var(--re-color-text-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button.is-link:hover:not(.is-disabled), .re-button.is-text:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button.is-link:active:not(.is-disabled), .re-button.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button.is-link.is-disabled, .re-button.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-text-lighter);
+}
+.re-button.is-text.is-text-padding, .re-button.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button.is-text.is-text-padding:hover:not(.is-disabled), .re-button.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button.is-text.is-text-padding:active:not(.is-disabled), .re-button.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--primary {
+  --re-button-bgcolor: var(--re-color-primary-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-base);
+}
+.re-button--primary:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-hover);
+}
+.re-button--primary:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-primary-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-active);
+}
+.re-button--primary:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-primary-shade-4);
+}
+.re-button--primary.is-plain, .re-button--primary.is-dashed {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-border-color: var(--re-color-primary-shade-6);
+  --re-button-color: var(--re-color-primary-base);
+}
+.re-button--primary.is-plain:hover:not(.is-disabled), .re-button--primary.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-primary-base);
+}
+.re-button--primary.is-plain.is-disabled, .re-button--primary.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-border-color: var(--re-color-primary-shade-4);
+  --re-button-color: var(--re-color-primary-shade-4);
+}
+.re-button--primary.is-plain:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-base);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--primary.is-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-active);
+}
+.re-button--primary.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-color: var(--re-color-primary-base);
+}
+.re-button--primary.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-shade-2);
+  --re-button-border-color: var(--re-color-primary-active);
+  --re-button-color: var(--re-color-primary-active);
+}
+.re-button--primary.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--primary.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-primary-shade-4);
+  --re-button-border-color: var(--re-color-primary-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--primary.is-link, .re-button--primary.is-text {
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-link:hover:not(.is-disabled), .re-button--primary.is-text:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-primary-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-link:active:not(.is-disabled), .re-button--primary.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-primary-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-link.is-disabled, .re-button--primary.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-primary-shade-4);
+}
+.re-button--primary.is-text.is-text-padding, .re-button--primary.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-text.is-text-padding:hover:not(.is-disabled), .re-button--primary.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--primary.is-text.is-text-padding:active:not(.is-disabled), .re-button--primary.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--primary.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--primary.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--primary.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--primary.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--success {
+  --re-button-bgcolor: var(--re-color-success-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-base);
+}
+.re-button--success:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-hover);
+}
+.re-button--success:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-success-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-active);
+}
+.re-button--success:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-success-shade-4);
+}
+.re-button--success.is-plain, .re-button--success.is-dashed {
+  --re-button-bgcolor: var(--re-color-success-shade-1);
+  --re-button-border-color: var(--re-color-success-shade-6);
+  --re-button-color: var(--re-color-success-base);
+}
+.re-button--success.is-plain:hover:not(.is-disabled), .re-button--success.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-success-base);
+}
+.re-button--success.is-plain.is-disabled, .re-button--success.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-success-shade-1);
+  --re-button-border-color: var(--re-color-success-shade-4);
+  --re-button-color: var(--re-color-success-shade-4);
+}
+.re-button--success.is-plain:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-base);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--success.is-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-active);
+}
+.re-button--success.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-shade-1);
+  --re-button-color: var(--re-color-success-base);
+}
+.re-button--success.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-shade-2);
+  --re-button-border-color: var(--re-color-success-active);
+  --re-button-color: var(--re-color-success-active);
+}
+.re-button--success.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--success.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-success-shade-4);
+  --re-button-border-color: var(--re-color-success-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--success.is-link, .re-button--success.is-text {
+  --re-button-color: var(--re-color-success-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-link:hover:not(.is-disabled), .re-button--success.is-text:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-success-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-link:active:not(.is-disabled), .re-button--success.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-success-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-link.is-disabled, .re-button--success.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-success-shade-4);
+}
+.re-button--success.is-text.is-text-padding, .re-button--success.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-text.is-text-padding:hover:not(.is-disabled), .re-button--success.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--success.is-text.is-text-padding:active:not(.is-disabled), .re-button--success.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--success.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--success.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--success.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--success.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--danger {
+  --re-button-bgcolor: var(--re-color-danger-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-base);
+}
+.re-button--danger:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-hover);
+}
+.re-button--danger:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-danger-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-active);
+}
+.re-button--danger:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-danger-shade-4);
+}
+.re-button--danger.is-plain, .re-button--danger.is-dashed {
+  --re-button-bgcolor: var(--re-color-danger-shade-1);
+  --re-button-border-color: var(--re-color-danger-shade-6);
+  --re-button-color: var(--re-color-danger-base);
+}
+.re-button--danger.is-plain:hover:not(.is-disabled), .re-button--danger.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-danger-base);
+}
+.re-button--danger.is-plain.is-disabled, .re-button--danger.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-danger-shade-1);
+  --re-button-border-color: var(--re-color-danger-shade-4);
+  --re-button-color: var(--re-color-danger-shade-4);
+}
+.re-button--danger.is-plain:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-base);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--danger.is-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-active);
+}
+.re-button--danger.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-shade-1);
+  --re-button-color: var(--re-color-danger-base);
+}
+.re-button--danger.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-shade-2);
+  --re-button-border-color: var(--re-color-danger-active);
+  --re-button-color: var(--re-color-danger-active);
+}
+.re-button--danger.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--danger.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-danger-shade-4);
+  --re-button-border-color: var(--re-color-danger-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--danger.is-link, .re-button--danger.is-text {
+  --re-button-color: var(--re-color-danger-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-link:hover:not(.is-disabled), .re-button--danger.is-text:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-danger-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-link:active:not(.is-disabled), .re-button--danger.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-danger-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-link.is-disabled, .re-button--danger.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-danger-shade-4);
+}
+.re-button--danger.is-text.is-text-padding, .re-button--danger.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-text.is-text-padding:hover:not(.is-disabled), .re-button--danger.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--danger.is-text.is-text-padding:active:not(.is-disabled), .re-button--danger.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--danger.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--danger.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--danger.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--danger.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--warning {
+  --re-button-bgcolor: var(--re-color-warning-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-base);
+}
+.re-button--warning:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-hover);
+}
+.re-button--warning:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-warning-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-active);
+}
+.re-button--warning:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-warning-shade-4);
+}
+.re-button--warning.is-plain, .re-button--warning.is-dashed {
+  --re-button-bgcolor: var(--re-color-warning-shade-1);
+  --re-button-border-color: var(--re-color-warning-shade-6);
+  --re-button-color: var(--re-color-warning-base);
+}
+.re-button--warning.is-plain:hover:not(.is-disabled), .re-button--warning.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-warning-base);
+}
+.re-button--warning.is-plain.is-disabled, .re-button--warning.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-warning-shade-1);
+  --re-button-border-color: var(--re-color-warning-shade-4);
+  --re-button-color: var(--re-color-warning-shade-4);
+}
+.re-button--warning.is-plain:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-base);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--warning.is-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-active);
+}
+.re-button--warning.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-shade-1);
+  --re-button-color: var(--re-color-warning-base);
+}
+.re-button--warning.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-shade-2);
+  --re-button-border-color: var(--re-color-warning-active);
+  --re-button-color: var(--re-color-warning-active);
+}
+.re-button--warning.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--warning.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-warning-shade-4);
+  --re-button-border-color: var(--re-color-warning-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--warning.is-link, .re-button--warning.is-text {
+  --re-button-color: var(--re-color-warning-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-link:hover:not(.is-disabled), .re-button--warning.is-text:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-warning-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-link:active:not(.is-disabled), .re-button--warning.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-warning-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-link.is-disabled, .re-button--warning.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-warning-shade-4);
+}
+.re-button--warning.is-text.is-text-padding, .re-button--warning.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-text.is-text-padding:hover:not(.is-disabled), .re-button--warning.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--warning.is-text.is-text-padding:active:not(.is-disabled), .re-button--warning.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--warning.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--warning.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--warning.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--warning.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--info {
+  --re-button-bgcolor: var(--re-color-info-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-base);
+}
+.re-button--info:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-hover);
+}
+.re-button--info:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-info-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-active);
+}
+.re-button--info:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-info-shade-4);
+}
+.re-button--info.is-plain, .re-button--info.is-dashed {
+  --re-button-bgcolor: var(--re-color-info-shade-1);
+  --re-button-border-color: var(--re-color-info-shade-6);
+  --re-button-color: var(--re-color-info-base);
+}
+.re-button--info.is-plain:hover:not(.is-disabled), .re-button--info.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-info-base);
+}
+.re-button--info.is-plain.is-disabled, .re-button--info.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-info-shade-1);
+  --re-button-border-color: var(--re-color-info-shade-4);
+  --re-button-color: var(--re-color-info-shade-4);
+}
+.re-button--info.is-plain:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-base);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--info.is-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-active);
+}
+.re-button--info.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-shade-1);
+  --re-button-color: var(--re-color-info-base);
+}
+.re-button--info.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-shade-2);
+  --re-button-border-color: var(--re-color-info-active);
+  --re-button-color: var(--re-color-info-active);
+}
+.re-button--info.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--info.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-info-shade-4);
+  --re-button-border-color: var(--re-color-info-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--info.is-link, .re-button--info.is-text {
+  --re-button-color: var(--re-color-info-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-link:hover:not(.is-disabled), .re-button--info.is-text:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-info-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-link:active:not(.is-disabled), .re-button--info.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-info-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-link.is-disabled, .re-button--info.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-info-shade-4);
+}
+.re-button--info.is-text.is-text-padding, .re-button--info.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-text.is-text-padding:hover:not(.is-disabled), .re-button--info.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--info.is-text.is-text-padding:active:not(.is-disabled), .re-button--info.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--info.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--info.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--info.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--info.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--large {
+  padding: 12px 20px;
+  height: 40px;
+  font-size: 16px;
+  border-radius: 4px;
+}
+.re-button--large.is-circle {
+  width: 40px;
+  padding: 12px;
+}
+.re-button--small {
+  padding: 6px 12px;
+  height: 28px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+.re-button--small.is-circle {
+  width: 28px;
+  padding: 6px;
+}
+.re-button--mini {
+  padding: 4px 8px;
+  height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
+}
+.re-button--mini.is-circle {
+  width: 24px;
+  padding: 4px;
+}