@react-ui-org/react-ui

/*!***********************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/index.scss ***! \***********************************************************************************************************************************************************************************************************/ @charset "UTF-8"; @layer theme, foundation, helpers, components, utilities; @layer theme { :root { --rui-dimension-border-width-1: 1px; --rui-dimension-breakpoint-xs: 0; --rui-dimension-breakpoint-sm: 36em; --rui-dimension-breakpoint-md: 48em; --rui-dimension-breakpoint-lg: 66em; --rui-dimension-breakpoint-xl: 84em; --rui-dimension-breakpoint-x2l: 100em; --rui-dimension-breakpoint-x3l: 120em; --rui-dimension-radius-1: 0.125rem; --rui-dimension-radius-2: 0.25rem; --rui-dimension-space-0: 0; --rui-dimension-space-1: 0.25rem; --rui-dimension-space-2: 0.5rem; --rui-dimension-space-3: 0.75rem; --rui-dimension-space-4: 1rem; --rui-dimension-space-5: 1.5rem; --rui-dimension-space-6: 2rem; --rui-dimension-space-7: 2.5rem; --rui-font-family-base: /* Cross-platform generic font family (default user interface font) */ system-ui, /* Safari for macOS and iOS (San Francisco)*/ -apple-system, /* Windows*/ "Segoe UI", /* Android*/ roboto, /* Basic web fallback*/ "Helvetica Neue", arial, /* Linux*/ "Noto Sans", "Liberation Sans", /* Sans serif fallback*/ sans-serif, /* Emoji fonts*/ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --rui-font-family-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; --rui-font-weight-base: 400; --rui-font-weight-light: 300; --rui-font-weight-bold: 700; --rui-ratio-opacity-medium: 0.5; --rui-shadow-1: 0 0.01rem 0.65rem -0.1rem rgb(0 0 0 / 30%); --rui-shadow-2: 0.2rem 0.25rem 1.2rem -0.1rem rgb(0 0 0 / 15%); --rui-font-size-base: 100%; --rui-font-size-small: 0.889rem; --rui-font-size-smaller: 0.75rem; --rui-font-size-code: 85%; --rui-font-size-1: 1rem; --rui-font-size-2: 1.125rem; --rui-font-size-3: 1.266rem; --rui-font-size-4: 1.424rem; --rui-font-size-5: 1.602rem; --rui-font-size-6: 1.802rem; --rui-line-height-base: 1.5; --rui-line-height-small: 1.25; --rui-underline-offset-link: 0.1875em; --rui-text-decoration-link: underline; --rui-text-decoration-link-hover: underline; --rui-text-decoration-link-active: underline; --rui-list-style-unordered: square; --rui-cursor-not-allowed: not-allowed; --rui-border-focus-ring: var(--rui-dimension-space-1) solid rgba(0, 123, 255, 0.5); --rui-color-text-primary: #000; --rui-color-text-primary-disabled: #b3b3b3; --rui-color-text-secondary: gray; --rui-color-text-secondary-disabled: #b3b3b3; --rui-color-text-link: #007bff; --rui-color-text-link-hover: #006fe6; --rui-color-text-link-active: #0062cc; --rui-color-action-primary: #00778b; --rui-color-action-primary-hover: #006b7d; --rui-color-action-primary-active: #005f6f; --rui-color-action-on-primary: #fff; --rui-color-action-secondary: gray; --rui-color-action-secondary-hover: #737373; --rui-color-action-secondary-active: #666666; --rui-color-action-on-secondary: #fff; --rui-color-action-selected: #007bff; --rui-color-action-selected-hover: #006fe6; --rui-color-action-selected-active: #0062cc; --rui-color-action-on-selected: #fff; --rui-color-feedback-success: #28a745; --rui-color-feedback-success-hover: #24963e; --rui-color-feedback-success-active: #208637; --rui-color-feedback-on-success: #fff; --rui-color-feedback-warning: #ffc107; --rui-color-feedback-warning-hover: #e6ae06; --rui-color-feedback-warning-active: #cc9a06; --rui-color-feedback-on-warning: #000; --rui-color-feedback-danger: #dc3545; --rui-color-feedback-danger-hover: #c6303e; --rui-color-feedback-danger-active: #b02a37; --rui-color-feedback-on-danger: #fff; --rui-color-feedback-help: #6610f2; --rui-color-feedback-help-hover: #5c0eda; --rui-color-feedback-help-active: #520dc2; --rui-color-feedback-on-help: #fff; --rui-color-feedback-info: #17a2b8; --rui-color-feedback-info-hover: #1592a6; --rui-color-feedback-info-active: #128293; --rui-color-feedback-on-info: #fff; --rui-color-feedback-note: #007bff; --rui-color-feedback-note-hover: #006fe6; --rui-color-feedback-note-active: #0062cc; --rui-color-feedback-on-note: #fff; --rui-color-neutral-light: #fff; --rui-color-neutral-light-hover: #f2f2f2; --rui-color-neutral-light-active: #e6e6e6; --rui-color-neutral-on-light: #4d4d4d; --rui-color-neutral-dark: #4d4d4d; --rui-color-neutral-dark-hover: #333333; --rui-color-neutral-dark-active: #1a1a1a; --rui-color-neutral-on-dark: #fff; --rui-color-background-base: #f2f2f2; --rui-color-background-layer-1: #fff; --rui-color-background-layer-2: #fff; --rui-color-background-basic: #fff; --rui-color-background-disabled: #f2f2f2; --rui-color-background-interactive: transparent; --rui-color-background-interactive-hover: #f2f2f2; --rui-color-background-interactive-active: #e6e6e6; --rui-color-background-primary: #e6f1f3; --rui-color-background-secondary: #f2f2f2; --rui-color-background-selected: #e6f2ff; --rui-color-background-success: #eaf6ec; --rui-color-background-warning: #fff9e6; --rui-color-background-danger: #fcebec; --rui-color-background-help: #f0e7fe; --rui-color-background-info: #e8f6f8; --rui-color-background-note: #e6f2ff; --rui-color-background-light: #e6e6e6; --rui-color-background-dark: #666666; --rui-color-border-primary: #cccccc; --rui-color-border-primary-hover: gray; --rui-color-border-primary-active: #0062cc; --rui-color-border-secondary: #e6e6e6; --rui-dimension-focus-ring-offset: var(--rui-dimension-border-width-1); --rui-dimension-tap-target-size: var(--rui-dimension-space-7); --rui-dimension-space-bottom-base: var(--rui-dimension-space-5); --rui-dimension-space-bottom-headings: var(--rui-dimension-space-5); --rui-dimension-space-bottom-layouts: var(--rui-dimension-space-5); --rui-ratio-disabled-opacity: var(--rui-ratio-opacity-medium); --rui-shadow-layer-1: var(--rui-shadow-1); --rui-shadow-layer-2: var(--rui-shadow-2); --rui-shadow-focus-ring: initial; --rui-Alert__padding: var(--rui-dimension-space-3); --rui-Alert__font-weight: var(--rui-font-weight-base); --rui-Alert__border-width: var(--rui-dimension-border-width-1); --rui-Alert__border-radius: var(--rui-dimension-radius-2); --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold); --rui-Alert__stripe__width: var(--rui-dimension-border-width-1); --rui-Alert--success__color: var(--rui-color-text-primary); --rui-Alert--success__foreground-color: var(--rui-color-feedback-success); --rui-Alert--success__background-color: var(--rui-color-background-success); --rui-Alert--warning__color: var(--rui-color-text-primary); --rui-Alert--warning__foreground-color: var(--rui-color-feedback-warning); --rui-Alert--warning__background-color: var(--rui-color-background-warning); --rui-Alert--danger__color: var(--rui-color-text-primary); --rui-Alert--danger__foreground-color: var(--rui-color-feedback-danger); --rui-Alert--danger__background-color: var(--rui-color-background-danger); --rui-Alert--info__color: var(--rui-color-text-primary); --rui-Alert--info__foreground-color: var(--rui-color-feedback-info); --rui-Alert--info__background-color: var(--rui-color-background-info); --rui-Alert--help__color: var(--rui-color-text-primary); --rui-Alert--help__foreground-color: var(--rui-color-feedback-help); --rui-Alert--help__background-color: var(--rui-color-background-help); --rui-Alert--note__color: var(--rui-color-text-primary); --rui-Alert--note__foreground-color: var(--rui-color-feedback-note); --rui-Alert--note__background-color: var(--rui-color-background-note); --rui-Alert--light__color: var(--rui-color-neutral-on-light); --rui-Alert--light__foreground-color: var(--rui-color-neutral-on-light); --rui-Alert--light__background-color: var(--rui-color-background-light); --rui-Alert--dark__color: var(--rui-color-neutral-on-dark); --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark); --rui-Alert--dark__background-color: var(--rui-color-background-dark); --rui-Badge--filled--success__color: var(--rui-color-feedback-on-success); --rui-Badge--filled--success__background-color: var(--rui-color-feedback-success); --rui-Badge--filled--warning__color: var(--rui-color-feedback-on-warning); --rui-Badge--filled--warning__background-color: var(--rui-color-feedback-warning); --rui-Badge--filled--danger__color: var(--rui-color-feedback-on-danger); --rui-Badge--filled--danger__background-color: var(--rui-color-feedback-danger); --rui-Badge--filled--help__color: var(--rui-color-feedback-on-help); --rui-Badge--filled--help__background-color: var(--rui-color-feedback-help); --rui-Badge--filled--info__color: var(--rui-color-feedback-on-info); --rui-Badge--filled--info__background-color: var(--rui-color-feedback-info); --rui-Badge--filled--note__color: var(--rui-color-feedback-on-note); --rui-Badge--filled--note__background-color: var(--rui-color-feedback-note); --rui-Badge--filled--light__color: var(--rui-color-neutral-on-light); --rui-Badge--filled--light__background-color: var(--rui-color-neutral-light); --rui-Badge--filled--dark__color: var(--rui-color-neutral-on-dark); --rui-Badge--filled--dark__background-color: var(--rui-color-neutral-dark); --rui-Badge--outline--success__color: var(--rui-color-feedback-success); --rui-Badge--outline--warning__color: var(--rui-color-feedback-warning); --rui-Badge--outline--danger__color: var(--rui-color-feedback-danger); --rui-Badge--outline--help__color: var(--rui-color-feedback-help); --rui-Badge--outline--info__color: var(--rui-color-feedback-info); --rui-Badge--outline--note__color: var(--rui-color-feedback-note); --rui-Badge--outline--light__color: var(--rui-color-neutral-light); --rui-Badge--outline--dark__color: var(--rui-color-neutral-dark); --rui-Button__font-weight: var(--rui-font-weight-base); --rui-Button__letter-spacing: 0; --rui-Button__text-transform: none; --rui-Button__border-width: var(--rui-dimension-border-width-1); --rui-Button__border-radius: var(--rui-dimension-radius-2); --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity); --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed); --rui-Button--feedback__opacity: 1; --rui-Button--feedback__cursor: var(--rui-cursor-not-allowed); --rui-Button--filled--primary--default__color: var(--rui-color-action-on-primary); --rui-Button--filled--primary--default__border-color: var(--rui-color-action-primary); --rui-Button--filled--primary--default__background: var(--rui-color-action-primary); --rui-Button--filled--primary--default__box-shadow: none; --rui-Button--filled--primary--hover__color: var(--rui-color-action-on-primary); --rui-Button--filled--primary--hover__border-color: var(--rui-color-action-primary-hover); --rui-Button--filled--primary--hover__background: var(--rui-color-action-primary-hover); --rui-Button--filled--primary--hover__box-shadow: none; --rui-Button--filled--primary--active__color: var(--rui-color-action-on-primary); --rui-Button--filled--primary--active__border-color: var(--rui-color-action-primary-active); --rui-Button--filled--primary--active__background: var(--rui-color-action-primary-active); --rui-Button--filled--primary--active__box-shadow: none; --rui-Button--filled--secondary--default__color: var(--rui-color-action-on-secondary); --rui-Button--filled--secondary--default__border-color: var(--rui-color-action-secondary); --rui-Button--filled--secondary--default__background: var(--rui-color-action-secondary); --rui-Button--filled--secondary--default__box-shadow: none; --rui-Button--filled--secondary--hover__color: var(--rui-color-action-on-secondary); --rui-Button--filled--secondary--hover__border-color: var(--rui-color-action-secondary-hover); --rui-Button--filled--secondary--hover__background: var(--rui-color-action-secondary-hover); --rui-Button--filled--secondary--hover__box-shadow: none; --rui-Button--filled--secondary--active__color: var(--rui-color-action-on-secondary); --rui-Button--filled--secondary--active__border-color: var(--rui-color-action-secondary-active); --rui-Button--filled--secondary--active__background: var(--rui-color-action-secondary-active); --rui-Button--filled--secondary--active__box-shadow: none; --rui-Button--filled--selected--default__color: var(--rui-color-action-on-selected); --rui-Button--filled--selected--default__border-color: var(--rui-color-action-selected); --rui-Button--filled--selected--default__background: var(--rui-color-action-selected); --rui-Button--filled--selected--default__box-shadow: none; --rui-Button--filled--selected--hover__color: var(--rui-color-action-on-selected); --rui-Button--filled--selected--hover__border-color: var(--rui-color-action-selected-hover); --rui-Button--filled--selected--hover__background: var(--rui-color-action-selected-hover); --rui-Button--filled--selected--hover__box-shadow: none; --rui-Button--filled--selected--active__color: var(--rui-color-action-on-selected); --rui-Button--filled--selected--active__border-color: var(--rui-color-action-selected-active); --rui-Button--filled--selected--active__background: var(--rui-color-action-selected-active); --rui-Button--filled--selected--active__box-shadow: none; --rui-Button--filled--success--default__color: var(--rui-color-feedback-on-success); --rui-Button--filled--success--default__border-color: var(--rui-color-feedback-success); --rui-Button--filled--success--default__background: var(--rui-color-feedback-success); --rui-Button--filled--success--default__box-shadow: none; --rui-Button--filled--success--hover__color: var(--rui-color-feedback-on-success); --rui-Button--filled--success--hover__border-color: var(--rui-color-feedback-success-hover); --rui-Button--filled--success--hover__background: var(--rui-color-feedback-success-hover); --rui-Button--filled--success--hover__box-shadow: none; --rui-Button--filled--success--active__color: var(--rui-color-feedback-on-success); --rui-Button--filled--success--active__border-color: var(--rui-color-feedback-success-active); --rui-Button--filled--success--active__background: var(--rui-color-feedback-success-active); --rui-Button--filled--success--active__box-shadow: none; --rui-Button--filled--warning--default__color: var(--rui-color-feedback-on-warning); --rui-Button--filled--warning--default__border-color: var(--rui-color-feedback-warning); --rui-Button--filled--warning--default__background: var(--rui-color-feedback-warning); --rui-Button--filled--warning--default__box-shadow: none; --rui-Button--filled--warning--hover__color: var(--rui-color-feedback-on-warning); --rui-Button--filled--warning--hover__border-color: var(--rui-color-feedback-warning-hover); --rui-Button--filled--warning--hover__background: var(--rui-color-feedback-warning-hover); --rui-Button--filled--warning--hover__box-shadow: none; --rui-Button--filled--warning--active__color: var(--rui-color-feedback-on-warning); --rui-Button--filled--warning--active__border-color: var(--rui-color-feedback-warning-active); --rui-Button--filled--warning--active__background: var(--rui-color-feedback-warning-active); --rui-Button--filled--warning--active__box-shadow: none; --rui-Button--filled--danger--default__color: var(--rui-color-feedback-on-danger); --rui-Button--filled--danger--default__border-color: var(--rui-color-feedback-danger); --rui-Button--filled--danger--default__background: var(--rui-color-feedback-danger); --rui-Button--filled--danger--default__box-shadow: none; --rui-Button--filled--danger--hover__color: var(--rui-color-feedback-on-danger); --rui-Button--filled--danger--hover__border-color: var(--rui-color-feedback-danger-hover); --rui-Button--filled--danger--hover__background: var(--rui-color-feedback-danger-hover); --rui-Button--filled--danger--hover__box-shadow: none; --rui-Button--filled--danger--active__color: var(--rui-color-feedback-on-danger); --rui-Button--filled--danger--active__border-color: var(--rui-color-feedback-danger-active); --rui-Button--filled--danger--active__background: var(--rui-color-feedback-danger-active); --rui-Button--filled--danger--active__box-shadow: none; --rui-Button--filled--help--default__color: var(--rui-color-feedback-on-help); --rui-Button--filled--help--default__border-color: var(--rui-color-feedback-help); --rui-Button--filled--help--default__background: var(--rui-color-feedback-help); --rui-Button--filled--help--default__box-shadow: none; --rui-Button--filled--help--hover__color: var(--rui-color-feedback-on-help); --rui-Button--filled--help--hover__border-color: var(--rui-color-feedback-help-hover); --rui-Button--filled--help--hover__background: var(--rui-color-feedback-help-hover); --rui-Button--filled--help--hover__box-shadow: none; --rui-Button--filled--help--active__color: var(--rui-color-feedback-on-help); --rui-Button--filled--help--active__border-color: var(--rui-color-feedback-help-active); --rui-Button--filled--help--active__background: var(--rui-color-feedback-help-active); --rui-Button--filled--help--active__box-shadow: none; --rui-Button--filled--info--default__color: var(--rui-color-feedback-on-info); --rui-Button--filled--info--default__border-color: var(--rui-color-feedback-info); --rui-Button--filled--info--default__background: var(--rui-color-feedback-info); --rui-Button--filled--info--default__box-shadow: none; --rui-Button--filled--info--hover__color: var(--rui-color-feedback-on-info); --rui-Button--filled--info--hover__border-color: var(--rui-color-feedback-info-hover); --rui-Button--filled--info--hover__background: var(--rui-color-feedback-info-hover); --rui-Button--filled--info--hover__box-shadow: none; --rui-Button--filled--info--active__color: var(--rui-color-feedback-on-info); --rui-Button--filled--info--active__border-color: var(--rui-color-feedback-info-active); --rui-Button--filled--info--active__background: var(--rui-color-feedback-info-active); --rui-Button--filled--info--active__box-shadow: none; --rui-Button--filled--note--default__color: var(--rui-color-feedback-on-note); --rui-Button--filled--note--default__border-color: var(--rui-color-feedback-note); --rui-Button--filled--note--default__background: var(--rui-color-feedback-note); --rui-Button--filled--note--default__box-shadow: none; --rui-Button--filled--note--hover__color: var(--rui-color-feedback-on-note); --rui-Button--filled--note--hover__border-color: var(--rui-color-feedback-note-hover); --rui-Button--filled--note--hover__background: var(--rui-color-feedback-note-hover); --rui-Button--filled--note--hover__box-shadow: none; --rui-Button--filled--note--active__color: var(--rui-color-feedback-on-note); --rui-Button--filled--note--active__border-color: var(--rui-color-feedback-note-active); --rui-Button--filled--note--active__background: var(--rui-color-feedback-note-active); --rui-Button--filled--note--active__box-shadow: none; --rui-Button--filled--light--default__color: var(--rui-color-neutral-on-light); --rui-Button--filled--light--default__border-color: var(--rui-color-neutral-light); --rui-Button--filled--light--default__background: var(--rui-color-neutral-light); --rui-Button--filled--light--default__box-shadow: none; --rui-Button--filled--light--hover__color: var(--rui-color-neutral-on-light); --rui-Button--filled--light--hover__border-color: var(--rui-color-neutral-light-hover); --rui-Button--filled--light--hover__background: var(--rui-color-neutral-light-hover); --rui-Button--filled--light--hover__box-shadow: none; --rui-Button--filled--light--active__color: var(--rui-color-neutral-on-light); --rui-Button--filled--light--active__border-color: var(--rui-color-neutral-light-active); --rui-Button--filled--light--active__background: var(--rui-color-neutral-light-active); --rui-Button--filled--light--active__box-shadow: none; --rui-Button--filled--dark--default__color: var(--rui-color-neutral-on-dark); --rui-Button--filled--dark--default__border-color: var(--rui-color-neutral-dark); --rui-Button--filled--dark--default__background: var(--rui-color-neutral-dark); --rui-Button--filled--dark--default__box-shadow: none; --rui-Button--filled--dark--hover__color: var(--rui-color-neutral-on-dark); --rui-Button--filled--dark--hover__border-color: var(--rui-color-neutral-dark-hover); --rui-Button--filled--dark--hover__background: var(--rui-color-neutral-dark-hover); --rui-Button--filled--dark--hover__box-shadow: none; --rui-Button--filled--dark--active__color: var(--rui-color-neutral-on-dark); --rui-Button--filled--dark--active__border-color: var(--rui-color-neutral-dark-active); --rui-Button--filled--dark--active__background: var(--rui-color-neutral-dark-active); --rui-Button--filled--dark--active__box-shadow: none; --rui-Button--outline--primary--default__color: var(--rui-color-action-primary); --rui-Button--outline--primary--default__border-color: var(--rui-color-action-primary); --rui-Button--outline--primary--default__background: transparent; --rui-Button--outline--primary--hover__color: var(--rui-color-action-on-primary); --rui-Button--outline--primary--hover__border-color: var(--rui-color-action-primary-hover); --rui-Button--outline--primary--hover__background: var(--rui-color-action-primary-hover); --rui-Button--outline--primary--active__color: var(--rui-color-action-on-primary); --rui-Button--outline--primary--active__border-color: var(--rui-color-action-primary-active); --rui-Button--outline--primary--active__background: var(--rui-color-action-primary-active); --rui-Button--outline--secondary--default__color: var(--rui-color-action-secondary); --rui-Button--outline--secondary--default__border-color: var(--rui-color-action-secondary); --rui-Button--outline--secondary--default__background: transparent; --rui-Button--outline--secondary--hover__color: var(--rui-color-action-on-secondary); --rui-Button--outline--secondary--hover__border-color: var(--rui-color-action-secondary-hover); --rui-Button--outline--secondary--hover__background: var(--rui-color-action-secondary-hover); --rui-Button--outline--secondary--active__color: var(--rui-color-action-on-secondary); --rui-Button--outline--secondary--active__border-color: var(--rui-color-action-secondary-active); --rui-Button--outline--secondary--active__background: var(--rui-color-action-secondary-active); --rui-Button--outline--selected--default__color: var(--rui-color-action-selected); --rui-Button--outline--selected--default__border-color: var(--rui-color-action-selected); --rui-Button--outline--selected--default__background: var(--rui-color-background-selected); --rui-Button--outline--selected--hover__color: var(--rui-color-action-on-selected); --rui-Button--outline--selected--hover__border-color: var(--rui-color-action-selected-hover); --rui-Button--outline--selected--hover__background: var(--rui-color-action-selected-hover); --rui-Button--outline--selected--active__color: var(--rui-color-action-on-selected); --rui-Button--outline--selected--active__border-color: var(--rui-color-action-selected-active); --rui-Button--outline--selected--active__background: var(--rui-color-action-selected-active); --rui-Button--outline--success--default__color: var(--rui-color-feedback-success); --rui-Button--outline--success--default__border-color: var(--rui-color-feedback-success); --rui-Button--outline--success--default__background: transparent; --rui-Button--outline--success--hover__color: var(--rui-color-feedback-on-success); --rui-Button--outline--success--hover__border-color: var(--rui-color-feedback-success-hover); --rui-Button--outline--success--hover__background: var(--rui-color-feedback-success-hover); --rui-Button--outline--success--active__color: var(--rui-color-feedback-on-success); --rui-Button--outline--success--active__border-color: var(--rui-color-feedback-success-active); --rui-Button--outline--success--active__background: var(--rui-color-feedback-success-active); --rui-Button--outline--warning--default__color: var(--rui-color-feedback-warning); --rui-Button--outline--warning--default__border-color: var(--rui-color-feedback-warning); --rui-Button--outline--warning--default__background: transparent; --rui-Button--outline--warning--hover__color: var(--rui-color-feedback-on-warning); --rui-Button--outline--warning--hover__border-color: var(--rui-color-feedback-warning-hover); --rui-Button--outline--warning--hover__background: var(--rui-color-feedback-warning-hover); --rui-Button--outline--warning--active__color: var(--rui-color-feedback-on-warning); --rui-Button--outline--warning--active__border-color: var(--rui-color-feedback-warning-active); --rui-Button--outline--warning--active__background: var(--rui-color-feedback-warning-active); --rui-Button--outline--danger--default__color: var(--rui-color-feedback-danger); --rui-Button--outline--danger--default__border-color: var(--rui-color-feedback-danger); --rui-Button--outline--danger--default__background: transparent; --rui-Button--outline--danger--hover__color: var(--rui-color-feedback-on-danger); --rui-Button--outline--danger--hover__border-color: var(--rui-color-feedback-danger-hover); --rui-Button--outline--danger--hover__background: var(--rui-color-feedback-danger-hover); --rui-Button--outline--danger--active__color: var(--rui-color-feedback-on-danger); --rui-Button--outline--danger--active__border-color: var(--rui-color-feedback-danger-active); --rui-Button--outline--danger--active__background: var(--rui-color-feedback-danger-active); --rui-Button--outline--help--default__color: var(--rui-color-feedback-help); --rui-Button--outline--help--default__border-color: var(--rui-color-feedback-help); --rui-Button--outline--help--default__background: transparent; --rui-Button--outline--help--hover__color: var(--rui-color-feedback-on-help); --rui-Button--outline--help--hover__border-color: var(--rui-color-feedback-help-hover); --rui-Button--outline--help--hover__background: var(--rui-color-feedback-help-hover); --rui-Button--outline--help--active__color: var(--rui-color-feedback-on-help); --rui-Button--outline--help--active__border-color: var(--rui-color-feedback-help-active); --rui-Button--outline--help--active__background: var(--rui-color-feedback-help-active); --rui-Button--outline--info--default__color: var(--rui-color-feedback-info); --rui-Button--outline--info--default__border-color: var(--rui-color-feedback-info); --rui-Button--outline--info--default__background: transparent; --rui-Button--outline--info--hover__color: var(--rui-color-feedback-on-info); --rui-Button--outline--info--hover__border-color: var(--rui-color-feedback-info-hover); --rui-Button--outline--info--hover__background: var(--rui-color-feedback-info-hover); --rui-Button--outline--info--active__color: var(--rui-color-feedback-on-info); --rui-Button--outline--info--active__border-color: var(--rui-color-feedback-info-active); --rui-Button--outline--info--active__background: var(--rui-color-feedback-info-active); --rui-Button--outline--note--default__color: var(--rui-color-feedback-note); --rui-Button--outline--note--default__border-color: var(--rui-color-feedback-note); --rui-Button--outline--note--default__background: transparent; --rui-Button--outline--note--hover__color: var(--rui-color-feedback-on-note); --rui-Button--outline--note--hover__border-color: var(--rui-color-feedback-note-hover); --rui-Button--outline--note--hover__background: var(--rui-color-feedback-note-hover); --rui-Button--outline--note--active__color: var(--rui-color-feedback-on-note); --rui-Button--outline--note--active__border-color: var(--rui-color-feedback-note-active); --rui-Button--outline--note--active__background: var(--rui-color-feedback-note-active); --rui-Button--outline--light--default__color: var(--rui-color-neutral-light); --rui-Button--outline--light--default__border-color: var(--rui-color-neutral-light); --rui-Button--outline--light--default__background: transparent; --rui-Button--outline--light--hover__color: var(--rui-color-neutral-on-light); --rui-Button--outline--light--hover__border-color: var(--rui-color-neutral-light-hover); --rui-Button--outline--light--hover__background: var(--rui-color-neutral-light-hover); --rui-Button--outline--light--active__color: var(--rui-color-neutral-on-light); --rui-Button--outline--light--active__border-color: var(--rui-color-neutral-light-active); --rui-Button--outline--light--active__background: var(--rui-color-neutral-light-active); --rui-Button--outline--dark--default__color: var(--rui-color-neutral-dark); --rui-Button--outline--dark--default__border-color: var(--rui-color-neutral-dark); --rui-Button--outline--dark--default__background: transparent; --rui-Button--outline--dark--hover__color: var(--rui-color-neutral-on-dark); --rui-Button--outline--dark--hover__border-color: var(--rui-color-neutral-dark-hover); --rui-Button--outline--dark--hover__background: var(--rui-color-neutral-dark-hover); --rui-Button--outline--dark--active__color: var(--rui-color-neutral-on-dark); --rui-Button--outline--dark--active__border-color: var(--rui-color-neutral-dark-active); --rui-Button--outline--dark--active__background: var(--rui-color-neutral-dark-active); --rui-Button--flat--primary--default__color: var(--rui-color-action-primary); --rui-Button--flat--primary--default__background: transparent; --rui-Button--flat--primary--hover__color: var(--rui-color-action-primary-hover); --rui-Button--flat--primary--hover__background: var(--rui-color-background-primary); --rui-Button--flat--primary--active__color: var(--rui-color-action-primary-active); --rui-Button--flat--primary--active__background: var(--rui-color-background-primary); --rui-Button--flat--secondary--default__color: var(--rui-color-action-secondary); --rui-Button--flat--secondary--default__background: transparent; --rui-Button--flat--secondary--hover__color: var(--rui-color-action-secondary-hover); --rui-Button--flat--secondary--hover__background: var(--rui-color-background-secondary); --rui-Button--flat--secondary--active__color: var(--rui-color-action-secondary-active); --rui-Button--flat--secondary--active__background: var(--rui-color-background-secondary); --rui-Button--flat--selected--default__color: var(--rui-color-action-selected); --rui-Button--flat--selected--default__background: var(--rui-color-background-selected); --rui-Button--flat--selected--hover__color: var(--rui-color-action-selected-hover); --rui-Button--flat--selected--hover__background: var(--rui-color-background-selected); --rui-Button--flat--selected--active__color: var(--rui-color-action-selected-active); --rui-Button--flat--selected--active__background: var(--rui-color-background-selected); --rui-Button--flat--success--default__color: var(--rui-color-feedback-success); --rui-Button--flat--success--default__background: transparent; --rui-Button--flat--success--hover__color: var(--rui-color-feedback-success-hover); --rui-Button--flat--success--hover__background: var(--rui-color-background-success); --rui-Button--flat--success--active__color: var(--rui-color-feedback-success-active); --rui-Button--flat--success--active__background: var(--rui-color-background-success); --rui-Button--flat--warning--default__color: var(--rui-color-feedback-warning); --rui-Button--flat--warning--default__background: transparent; --rui-Button--flat--warning--hover__color: var(--rui-color-feedback-warning-hover); --rui-Button--flat--warning--hover__background: var(--rui-color-background-warning); --rui-Button--flat--warning--active__color: var(--rui-color-feedback-warning-active); --rui-Button--flat--warning--active__background: var(--rui-color-background-warning); --rui-Button--flat--danger--default__color: var(--rui-color-feedback-danger); --rui-Button--flat--danger--default__background: transparent; --rui-Button--flat--danger--hover__color: var(--rui-color-feedback-danger-hover); --rui-Button--flat--danger--hover__background: var(--rui-color-background-danger); --rui-Button--flat--danger--active__color: var(--rui-color-feedback-danger-active); --rui-Button--flat--danger--active__background: var(--rui-color-background-danger); --rui-Button--flat--help--default__color: var(--rui-color-feedback-help); --rui-Button--flat--help--default__background: transparent; --rui-Button--flat--help--hover__color: var(--rui-color-feedback-help-hover); --rui-Button--flat--help--hover__background: var(--rui-color-background-help); --rui-Button--flat--help--active__color: var(--rui-color-feedback-help-active); --rui-Button--flat--help--active__background: var(--rui-color-background-help); --rui-Button--flat--info--default__color: var(--rui-color-feedback-info); --rui-Button--flat--info--default__background: transparent; --rui-Button--flat--info--hover__color: var(--rui-color-feedback-info-hover); --rui-Button--flat--info--hover__background: var(--rui-color-background-info); --rui-Button--flat--info--active__color: var(--rui-color-feedback-info-active); --rui-Button--flat--info--active__background: var(--rui-color-background-info); --rui-Button--flat--note--default__color: var(--rui-color-feedback-note); --rui-Button--flat--note--default__background: transparent; --rui-Button--flat--note--hover__color: var(--rui-color-feedback-note-hover); --rui-Button--flat--note--hover__background: var(--rui-color-background-note); --rui-Button--flat--note--active__color: var(--rui-color-feedback-note-active); --rui-Button--flat--note--active__background: var(--rui-color-background-note); --rui-Button--flat--light--default__color: var(--rui-color-neutral-light); --rui-Button--flat--light--default__background: transparent; --rui-Button--flat--light--hover__color: var(--rui-color-neutral-light-hover); --rui-Button--flat--light--hover__background: var(--rui-color-background-dark); --rui-Button--flat--light--active__color: var(--rui-color-neutral-light-active); --rui-Button--flat--light--active__background: var(--rui-color-background-dark); --rui-Button--flat--dark--default__color: var(--rui-color-neutral-dark); --rui-Button--flat--dark--default__background: transparent; --rui-Button--flat--dark--hover__color: var(--rui-color-neutral-dark-hover); --rui-Button--flat--dark--hover__background: var(--rui-color-background-light); --rui-Button--flat--dark--active__color: var(--rui-color-neutral-dark-active); --rui-Button--flat--dark--active__background: var(--rui-color-background-light); --rui-Button--small__height: 1.75rem; --rui-Button--small__padding-y: var(--rui-dimension-space-1); --rui-Button--small__padding-x: var(--rui-dimension-space-3); --rui-Button--small__font-size: var(--rui-font-size-small); --rui-Button--medium__height: 2.25rem; --rui-Button--medium__padding-y: var(--rui-dimension-space-1); --rui-Button--medium__padding-x: var(--rui-dimension-space-4); --rui-Button--medium__font-size: var(--rui-font-size-1); --rui-Button--large__height: 2.75rem; --rui-Button--large__padding-y: var(--rui-dimension-space-2); --rui-Button--large__padding-x: var(--rui-dimension-space-5); --rui-Button--large__font-size: var(--rui-font-size-2); --rui-ButtonGroup__inner-border-radius: 0; --rui-ButtonGroup--filled__gap: calc(-1 * var(--rui-Button__border-width)); --rui-ButtonGroup--filled__separator__width: var(--rui-Button__border-width); --rui-ButtonGroup--filled__separator__color: currentcolor; --rui-ButtonGroup--outline__gap: calc(-1 * var(--rui-Button__border-width)); --rui-ButtonGroup--outline__separator__width: 0; --rui-ButtonGroup--outline__separator__color: transparent; --rui-ButtonGroup--flat__gap: var(--rui-Button__border-width); --rui-ButtonGroup--flat__separator__width: var(--rui-ButtonGroup--flat__gap); --rui-ButtonGroup--flat__separator__color: currentcolor; --rui-Card__padding: var(--rui-dimension-space-4); --rui-Card__border-width: var(--rui-dimension-border-width-1); --rui-Card__border-color: var(--rui-color-border-primary); --rui-Card__border-radius: var(--rui-dimension-radius-2); --rui-Card__background-color: var(--rui-color-background-layer-1); --rui-Card--dense__padding: var(--rui-dimension-space-2); --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1); --rui-Card--disabled__background-color: var(--rui-color-background-disabled); --rui-Card--disabled__opacity: var(--rui-ratio-disabled-opacity); --rui-Card--disabled__border-width: var(--rui-dimension-border-width-1); --rui-Card--disabled__border-color: var(--rui-color-border-primary); --rui-Card--success__color: var(--rui-color-text-primary); --rui-Card--success__border-color: var(--rui-color-feedback-success); --rui-Card--success__background-color: var(--rui-color-background-layer-1); --rui-Card--warning__color: var(--rui-color-text-primary); --rui-Card--warning__border-color: var(--rui-color-feedback-warning); --rui-Card--warning__background-color: var(--rui-color-background-layer-1); --rui-Card--danger__color: var(--rui-color-text-primary); --rui-Card--danger__border-color: var(--rui-color-feedback-danger); --rui-Card--danger__background-color: var(--rui-color-background-layer-1); --rui-Card--info__color: var(--rui-color-text-primary); --rui-Card--info__border-color: var(--rui-color-feedback-info); --rui-Card--info__background-color: var(--rui-color-background-layer-1); --rui-Card--help__color: var(--rui-color-text-primary); --rui-Card--help__border-color: var(--rui-color-feedback-help); --rui-Card--help__background-color: var(--rui-color-background-layer-1); --rui-Card--note__color: var(--rui-color-text-primary); --rui-Card--note__border-color: var(--rui-color-feedback-note); --rui-Card--note__background-color: var(--rui-color-background-layer-1); --rui-Card--light__color: var(--rui-color-text-primary); --rui-Card--light__border-color: var(--rui-color-neutral-light); --rui-Card--light__background-color: var(--rui-color-background-layer-1); --rui-Card--dark__color: var(--rui-color-neutral-on-dark); --rui-Card--dark__border-color: var(--rui-color-neutral-on-dark); --rui-Card--dark__background-color: var(--rui-color-background-dark); --rui-FormField__label__color: inherit; --rui-FormField__label__font-size: var(--rui-font-size-1); --rui-FormField__help-text__font-size: var(--rui-font-size-small); --rui-FormField__help-text__font-style: normal; --rui-FormField__help-text__color: var(--rui-color-text-secondary); --rui-FormField--required__label__color: inherit; --rui-FormField--required__sign: " *"; --rui-FormField--required__sign__color: var(--rui-color-text-secondary); --rui-FormField--horizontal__label__text-align: left; --rui-FormField--horizontal__label__min-width: 0; --rui-FormField--horizontal__label__width: minmax(auto, 50%); --rui-FormField--horizontal__label__vertical-alignment: initial; --rui-FormField--horizontal__field__vertical-alignment: initial; --rui-FormField--horizontal--full-width__label__width: fit-content(50%); --rui-FormField--disabled__cursor: var(--rui-cursor-not-allowed); --rui-FormField--disabled__opacity: var(--rui-ratio-disabled-opacity); --rui-FormField--invalid--default__border-color: var(--rui-color-feedback-danger); --rui-FormField--invalid--default__background: var(--rui-color-background-danger); --rui-FormField--invalid--default__check-background-color: var(--rui-FormField--invalid--default__background); --rui-FormField--invalid--default__surrounding-text-color: var(--rui-color-feedback-danger); --rui-FormField--invalid--checked__check-background-color: var(--rui-FormField--invalid--default__border-color); --rui-FormField--valid--default__border-color: var(--rui-color-feedback-success); --rui-FormField--valid--default__background: var(--rui-color-background-success); --rui-FormField--valid--default__check-background-color: var(--rui-FormField--valid--default__background); --rui-FormField--valid--default__surrounding-text-color: var(--rui-color-feedback-success); --rui-FormField--valid--checked__check-background-color: var(--rui-FormField--valid--default__border-color); --rui-FormField--warning--default__border-color: var(--rui-color-feedback-warning-hover); --rui-FormField--warning--default__background: var(--rui-color-background-warning); --rui-FormField--warning--default__check-background-color: var(--rui-FormField--warning--default__background); --rui-FormField--warning--default__surrounding-text-color: var(--rui-color-feedback-warning-active); --rui-FormField--warning--checked__check-background-color: var(--rui-FormField--warning--default__border-color); --rui-FormField--box__border-width: var(--rui-dimension-border-width-1); --rui-FormField--box__border-radius: var(--rui-dimension-radius-2); --rui-FormField--box__input__width: auto; --rui-FormField--box__input__min-width: 240px; --rui-FormField--box__placeholder__color: var(--rui-color-text-secondary); --rui-FormField--box--select__caret__border-style: none; --rui-FormField--box--select__caret__background: transparent; --rui-FormField--box--select__option--disabled__color: var(--rui-color-text-primary-disabled); --rui-FormField--box--small__height: var(--rui-Button--small__height); --rui-FormField--box--small__padding-y: 0.0625rem; --rui-FormField--box--small__padding-x: var(--rui-dimension-space-2); --rui-FormField--box--small__font-size: var(--rui-font-size-small); --rui-FormField--box--medium__height: var(--rui-Button--medium__height); --rui-FormField--box--medium__padding-y: 0.3125rem; --rui-FormField--box--medium__padding-x: var(--rui-dimension-space-3); --rui-FormField--box--medium__font-size: var(--rui-font-size-1); --rui-FormField--box--large__height: var(--rui-Button--large__height); --rui-FormField--box--large__padding-y: 0.5625rem; --rui-FormField--box--large__padding-x: var(--rui-dimension-space-4); --rui-FormField--box--large__font-size: var(--rui-font-size-2); --rui-FormField--box--filled--default__color: var(--rui-color-text-primary); --rui-FormField--box--filled--default__border-color: var(--rui-color-border-primary); --rui-FormField--box--filled--default__background: var(--rui-color-background-basic); --rui-FormField--box--filled--default__box-shadow: none; --rui-FormField--box--filled--hover__border-color: var(--rui-color-border-primary-hover); --rui-FormField--box--filled--focus__border-color: var(--rui-color-border-primary-active); --rui-FormField--box--outline--default__color: var(--rui-color-text-primary); --rui-FormField--box--outline--default__border-color: var(--rui-color-border-primary); --rui-FormField--box--outline--default__background: var(--rui-color-background-basic); --rui-FormField--box--outline--default__box-shadow: none; --rui-FormField--box--outline--hover__border-color: var(--rui-color-border-primary-hover); --rui-FormField--box--outline--focus__border-color: var(--rui-color-border-primary-active); --rui-FormField--check__input__size: 1.125rem; --rui-FormField--check__input__border-width: var(--rui-FormField--box__border-width); --rui-FormField--check__input--focus__box-shadow: var(--rui-shadow-focus-ring); --rui-FormField--check__tap-target-size: var(--rui-dimension-tap-target-size); --rui-FormField--check__input--checkbox__border-radius: var(--rui-FormField--box__border-radius); --rui-FormField--check__input--checkbox--checked__background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23ffffff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10l3 3l6-6%27/%3e%3c/svg%3e"); --rui-FormField--check__input--radio__border-radius: 50%; --rui-FormField--check__input--radio--checked__background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%272%27 fill=%27%23ffffff%27/%3e%3c/svg%3e"); --rui-FormField--check__input--toggle__width: 2.25rem; --rui-FormField--check__input--toggle__border-radius: 0.5625rem; --rui-FormField--check__input--toggle__background-size: contain; --rui-FormField--check__input--toggle--default__background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23cccccc%27/%3e%3c/svg%3e"); --rui-FormField--check__input--toggle--default__background-position: left center; --rui-FormField--check__input--toggle--checked__background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23ffffff%27/%3e%3c/svg%3e"); --rui-FormField--check__input--toggle--checked__background-position: right center; --rui-FormField--check--default__border-color: var(--rui-color-border-primary); --rui-FormField--check--default__check-background-color: var(--rui-color-background-basic); --rui-FormField--check--checked__border-color: var(--rui-color-action-selected); --rui-FormField--check--checked__check-background-color: var(--rui-color-action-selected); --rui-FormLayout__row-gap: var(--rui-dimension-space-4); --rui-FormLayout--horizontal__label__width: 10em; --rui-FormLayout--horizontal__label__width--auto: auto; --rui-FormLayout--horizontal__label__width--limited: fit-content(50%); --rui-InputGroup__gap: var(--rui-dimension-space-1); --rui-InputGroup__inner-border-radius: var(--rui-dimension-radius-1); --rui-Modal__padding-x: var(--rui-dimension-space-4); --rui-Modal__padding-y: var(--rui-dimension-space-4); --rui-Modal__background: var(--rui-color-background-layer-2); --rui-Modal__box-shadow: var(--rui-shadow-layer-2); --rui-Modal__separator__width: var(--rui-dimension-border-width-1); --rui-Modal__separator__color: var(--rui-color-border-secondary); --rui-Modal__header__gap: var(--rui-dimension-space-2); --rui-Modal__outer-spacing--xs: var(--rui-dimension-space-2); --rui-Modal__outer-spacing--sm: var(--rui-dimension-space-6); --rui-Modal__footer__background: var(--rui-Modal__background); --rui-Modal__footer__gap: var(--rui-dimension-space-2); --rui-Modal__backdrop__background: rgb(0 0 0 / 50%); --rui-Modal--auto__min-width: 18rem; --rui-Modal--auto__max-width: 60rem; --rui-Modal--small__width: 20rem; --rui-Modal--medium__width: 40rem; --rui-Modal--large__width: 60rem; --rui-Modal--fullscreen__width: 100%; --rui-Modal--fullscreen__height: 100%; --rui-Modal__animation__duration: 0.25s; --rui-Modal--success__border-color: var(--rui-color-feedback-success); --rui-Modal--success__background-color: var(--rui-color-background-success); --rui-Modal--warning__border-color: var(--rui-color-feedback-warning); --rui-Modal--warning__background-color: var(--rui-color-background-warning); --rui-Modal--danger__border-color: var(--rui-color-feedback-danger); --rui-Modal--danger__background-color: var(--rui-color-background-danger); --rui-Modal--info__border-color: var(--rui-color-feedback-info); --rui-Modal--info__background-color: var(--rui-color-background-info); --rui-Modal--help__border-color: var(--rui-color-feedback-help); --rui-Modal--help__background-color: var(--rui-color-background-help); --rui-Modal--note__border-color: var(--rui-color-feedback-note); --rui-Modal--note__background-color: var(--rui-color-background-note); --rui-Paper__paddi