@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 ***! \***********************************************************************************************************************************************************************************************************/ @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: rgb(178.5, 178.5, 178.5); --rui-color-text-secondary: rgb(127.5, 127.5, 127.5); --rui-color-text-secondary-disabled: rgb(178.5, 178.5, 178.5); --rui-color-text-link: #007bff; --rui-color-text-link-hover: rgb(0, 110.7, 229.5); --rui-color-text-link-active: rgb(0, 98.4, 204); --rui-color-action-primary: #00778b; --rui-color-action-primary-hover: rgb(0, 107.1, 125.1); --rui-color-action-primary-active: rgb(0, 95.2, 111.2); --rui-color-action-on-primary: #fff; --rui-color-action-secondary: rgb(127.5, 127.5, 127.5); --rui-color-action-secondary-hover: rgb(114.75, 114.75, 114.75); --rui-color-action-secondary-active: #666666; --rui-color-action-on-secondary: #fff; --rui-color-action-selected: #007bff; --rui-color-action-selected-hover: rgb(0, 110.7, 229.5); --rui-color-action-selected-active: rgb(0, 98.4, 204); --rui-color-action-on-selected: #fff; --rui-color-feedback-success: #28a745; --rui-color-feedback-success-hover: rgb(36, 150.3, 62.1); --rui-color-feedback-success-active: rgb(32, 133.6, 55.2); --rui-color-feedback-on-success: #fff; --rui-color-feedback-warning: #ffc107; --rui-color-feedback-warning-hover: rgb(229.5, 173.7, 6.3); --rui-color-feedback-warning-active: rgb(204, 154.4, 5.6); --rui-color-feedback-on-warning: #000; --rui-color-feedback-danger: #dc3545; --rui-color-feedback-danger-hover: rgb(198, 47.7, 62.1); --rui-color-feedback-danger-active: rgb(176, 42.4, 55.2); --rui-color-feedback-on-danger: #fff; --rui-color-feedback-help: #6610f2; --rui-color-feedback-help-hover: rgb(91.8, 14.4, 217.8); --rui-color-feedback-help-active: rgb(81.6, 12.8, 193.6); --rui-color-feedback-on-help: #fff; --rui-color-feedback-info: #17a2b8; --rui-color-feedback-info-hover: rgb(20.7, 145.8, 165.6); --rui-color-feedback-info-active: rgb(18.4, 129.6, 147.2); --rui-color-feedback-on-info: #fff; --rui-color-feedback-note: #007bff; --rui-color-feedback-note-hover: rgb(0, 110.7, 229.5); --rui-color-feedback-note-active: rgb(0, 98.4, 204); --rui-color-feedback-on-note: #fff; --rui-color-neutral-light: #fff; --rui-color-neutral-light-hover: rgb(242.25, 242.25, 242.25); --rui-color-neutral-light-active: rgb(229.5, 229.5, 229.5); --rui-color-neutral-on-light: rgb(76.5, 76.5, 76.5); --rui-color-neutral-dark: rgb(76.5, 76.5, 76.5); --rui-color-neutral-dark-hover: #333333; --rui-color-neutral-dark-active: rgb(25.5, 25.5, 25.5); --rui-color-neutral-on-dark: #fff; --rui-color-background-base: rgb(242.25, 242.25, 242.25); --rui-color-background-layer-1: #fff; --rui-color-background-layer-2: #fff; --rui-color-background-basic: #fff; --rui-color-background-disabled: rgb(242.25, 242.25, 242.25); --rui-color-background-interactive: transparent; --rui-color-background-interactive-hover: rgb(242.25, 242.25, 242.25); --rui-color-background-interactive-active: rgb(229.5, 229.5, 229.5); --rui-color-background-primary: rgb(229.5, 241.4, 243.4); --rui-color-background-secondary: rgb(242.25, 242.25, 242.25); --rui-color-background-selected: rgb(229.5, 241.8, 255); --rui-color-background-success: rgb(233.5, 246.2, 236.4); --rui-color-background-warning: rgb(255, 248.8, 230.2); --rui-color-background-danger: rgb(251.5, 234.8, 236.4); --rui-color-background-help: rgb(239.7, 231.1, 253.7); --rui-color-background-info: rgb(231.8, 245.7, 247.9); --rui-color-background-note: rgb(229.5, 241.8, 255); --rui-color-background-light: rgb(229.5, 229.5, 229.5); --rui-color-background-dark: #666666; --rui-color-border-primary: #cccccc; --rui-color-border-primary-hover: rgb(127.5, 127.5, 127.5); --rui-color-border-primary-active: rgb(0, 98.4, 204); --rui-color-border-secondary: rgb(229.5, 229.5, 229.5); --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: "\00a0*"; --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);