:root {
--seed-safe-area-top: 0px;
--seed-safe-area-bottom: 0px;
}
@supports (left: constant(safe-area-inset-left)) {
:root {
--seed-safe-area-top: constant(safe-area-inset-top);
--seed-safe-area-bottom: constant(safe-area-inset-bottom);
}
}
@supports (left: env(safe-area-inset-left)) {
:root {
--seed-safe-area-top: env(safe-area-inset-top);
--seed-safe-area-bottom: env(safe-area-inset-bottom);
}
}
:root {
--seed-font-size-multiplier: 1;
--seed-font-size-limit-min: .8;
--seed-font-size-limit-max: 1.5;
--seed-line-height-limit-min: .8;
--seed-line-height-limit-max: 1.5;
}
[data-seed-platform="ios"] {
--seed-font-size-limit-max: 1.35;
--seed-line-height-limit-max: 1.35;
}
@supports (font: -apple-system-body) {
html[data-seed-platform="ios"][data-seed-font-scaling="enabled"] {
--seed-font-size-multiplier: .9412;
font: -apple-system-body;
}
}
.seed-loading-indicator {
display: inline-flex;
position: absolute;
}
.seed-icon, .seed-prefix-icon, .seed-suffix-icon {
vertical-align: middle;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: inline-flex;
}
.seed-icon {
width: var(--seed-icon-size);
height: var(--seed-icon-size);
color: var(--seed-icon-color, currentColor);
}
.seed-prefix-icon {
width: var(--seed-prefix-icon-size);
height: var(--seed-prefix-icon-size);
color: var(--seed-prefix-icon-color, currentColor);
margin-left: var(--seed-prefix-icon-margin-left, 0);
margin-right: var(--seed-prefix-icon-margin-right, 0);
margin-top: var(--seed-prefix-icon-margin-top, 0);
margin-bottom: var(--seed-prefix-icon-margin-bottom, 0);
align-self: var(--seed-prefix-icon-align-self);
justify-self: var(--seed-prefix-icon-justify-self);
}
.seed-suffix-icon {
width: var(--seed-suffix-icon-size);
height: var(--seed-suffix-icon-size);
color: var(--seed-suffix-icon-color, currentColor);
margin-left: var(--seed-suffix-icon-margin-left, 0);
margin-right: var(--seed-suffix-icon-margin-right, 0);
margin-top: var(--seed-suffix-icon-margin-top, 0);
margin-bottom: var(--seed-suffix-icon-margin-bottom, 0);
align-self: var(--seed-suffix-icon-align-self);
justify-self: var(--seed-suffix-icon-justify-self);
}
.seed-count {
font-size: var(--seed-count-font-size);
line-height: var(--seed-count-line-height);
font-weight: var(--seed-count-font-weight);
color: var(--seed-count-color);
}
.seed-box {
--seed-box-background: initial;
--seed-box-color: initial;
background: var(--seed-box-background);
color: var(--seed-box-color);
--seed-box-border-style: solid;
--seed-box-border-color: initial;
border-style: var(--seed-box-border-style);
border-color: var(--seed-box-border-color);
--seed-box-border-width: 0;
--seed-box-border-top-width: var(--seed-box-border-width);
--seed-box-border-bottom-width: var(--seed-box-border-width);
--seed-box-border-left-width: var(--seed-box-border-width);
--seed-box-border-right-width: var(--seed-box-border-width);
border-top-width: var(--seed-box-border-top-width);
border-bottom-width: var(--seed-box-border-bottom-width);
border-left-width: var(--seed-box-border-left-width);
border-right-width: var(--seed-box-border-right-width);
--seed-box-padding-base: 0;
--seed-box-padding-sm: var(--seed-box-padding-base);
--seed-box-padding-md: var(--seed-box-padding-sm);
--seed-box-padding-lg: var(--seed-box-padding-md);
--seed-box-padding-xl: var(--seed-box-padding-lg);
--seed-box-padding: var(--seed-box-padding-base);
--seed-box-padding-y-base: var(--seed-box-padding);
--seed-box-padding-y-sm: var(--seed-box-padding-y-base);
--seed-box-padding-y-md: var(--seed-box-padding-y-sm);
--seed-box-padding-y-lg: var(--seed-box-padding-y-md);
--seed-box-padding-y-xl: var(--seed-box-padding-y-lg);
--seed-box-padding-y: var(--seed-box-padding-y-base);
--seed-box-padding-x-base: var(--seed-box-padding);
--seed-box-padding-x-sm: var(--seed-box-padding-x-base);
--seed-box-padding-x-md: var(--seed-box-padding-x-sm);
--seed-box-padding-x-lg: var(--seed-box-padding-x-md);
--seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
--seed-box-padding-x: var(--seed-box-padding-x-base);
--seed-box-padding-bottom-base: var(--seed-box-padding-y);
--seed-box-padding-bottom-sm: var(--seed-box-padding-bottom-base);
--seed-box-padding-bottom-md: var(--seed-box-padding-bottom-sm);
--seed-box-padding-bottom-lg: var(--seed-box-padding-bottom-md);
--seed-box-padding-bottom-xl: var(--seed-box-padding-bottom-lg);
--seed-box-padding-bottom: var(--seed-box-padding-bottom-base);
--seed-box-padding-top-base: var(--seed-box-padding-y);
--seed-box-padding-top-sm: var(--seed-box-padding-top-base);
--seed-box-padding-top-md: var(--seed-box-padding-top-sm);
--seed-box-padding-top-lg: var(--seed-box-padding-top-md);
--seed-box-padding-top-xl: var(--seed-box-padding-top-lg);
--seed-box-padding-top: var(--seed-box-padding-top-base);
--seed-box-padding-left-base: var(--seed-box-padding-x);
--seed-box-padding-left-sm: var(--seed-box-padding-left-base);
--seed-box-padding-left-md: var(--seed-box-padding-left-sm);
--seed-box-padding-left-lg: var(--seed-box-padding-left-md);
--seed-box-padding-left-xl: var(--seed-box-padding-left-lg);
--seed-box-padding-left: var(--seed-box-padding-left-base);
--seed-box-padding-right-base: var(--seed-box-padding-x);
--seed-box-padding-right-sm: var(--seed-box-padding-right-base);
--seed-box-padding-right-md: var(--seed-box-padding-right-sm);
--seed-box-padding-right-lg: var(--seed-box-padding-right-md);
--seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
--seed-box-padding-right: var(--seed-box-padding-right-base);
padding-top: var(--seed-box-padding-top);
padding-bottom: var(--seed-box-padding-bottom);
padding-left: var(--seed-box-padding-left);
padding-right: var(--seed-box-padding-right);
--seed-box-bleed-bottom-base: 0px;
--seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
--seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
--seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
--seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
--seed-box-bleed-top-base: 0px;
--seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
--seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
--seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
--seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
--seed-box-bleed-top: var(--seed-box-bleed-top-base);
--seed-box-bleed-left-base: 0px;
--seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
--seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
--seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
--seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
--seed-box-bleed-left: var(--seed-box-bleed-left-base);
--seed-box-bleed-right-base: 0px;
--seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
--seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
--seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
--seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
--seed-box-bleed-right: var(--seed-box-bleed-right-base);
--seed-box-margin-base: initial;
--seed-box-margin-sm: var(--seed-box-margin-base);
--seed-box-margin-md: var(--seed-box-margin-sm);
--seed-box-margin-lg: var(--seed-box-margin-md);
--seed-box-margin-xl: var(--seed-box-margin-lg);
--seed-box-margin: var(--seed-box-margin-base);
--seed-box-margin-y-base: var(--seed-box-margin);
--seed-box-margin-y-sm: var(--seed-box-margin-y-base);
--seed-box-margin-y-md: var(--seed-box-margin-y-sm);
--seed-box-margin-y-lg: var(--seed-box-margin-y-md);
--seed-box-margin-y-xl: var(--seed-box-margin-y-lg);
--seed-box-margin-y: var(--seed-box-margin-y-base);
--seed-box-margin-x-base: var(--seed-box-margin);
--seed-box-margin-x-sm: var(--seed-box-margin-x-base);
--seed-box-margin-x-md: var(--seed-box-margin-x-sm);
--seed-box-margin-x-lg: var(--seed-box-margin-x-md);
--seed-box-margin-x-xl: var(--seed-box-margin-x-lg);
--seed-box-margin-x: var(--seed-box-margin-x-base);
--seed-box-margin-top-base: var(--seed-box-margin-y);
--seed-box-margin-top-sm: var(--seed-box-margin-top-base);
--seed-box-margin-top-md: var(--seed-box-margin-top-sm);
--seed-box-margin-top-lg: var(--seed-box-margin-top-md);
--seed-box-margin-top-xl: var(--seed-box-margin-top-lg);
--seed-box-margin-top: var(--seed-box-margin-top-base);
--seed-box-margin-bottom-base: var(--seed-box-margin-y);
--seed-box-margin-bottom-sm: var(--seed-box-margin-bottom-base);
--seed-box-margin-bottom-md: var(--seed-box-margin-bottom-sm);
--seed-box-margin-bottom-lg: var(--seed-box-margin-bottom-md);
--seed-box-margin-bottom-xl: var(--seed-box-margin-bottom-lg);
--seed-box-margin-bottom: var(--seed-box-margin-bottom-base);
--seed-box-margin-left-base: var(--seed-box-margin-x);
--seed-box-margin-left-sm: var(--seed-box-margin-left-base);
--seed-box-margin-left-md: var(--seed-box-margin-left-sm);
--seed-box-margin-left-lg: var(--seed-box-margin-left-md);
--seed-box-margin-left-xl: var(--seed-box-margin-left-lg);
--seed-box-margin-left: var(--seed-box-margin-left-base);
--seed-box-margin-right-base: var(--seed-box-margin-x);
--seed-box-margin-right-sm: var(--seed-box-margin-right-base);
--seed-box-margin-right-md: var(--seed-box-margin-right-sm);
--seed-box-margin-right-lg: var(--seed-box-margin-right-md);
--seed-box-margin-right-xl: var(--seed-box-margin-right-lg);
--seed-box-margin-right: var(--seed-box-margin-right-base);
margin-top: var(--seed-box-margin-top, calc(var(--seed-box-bleed-top) * -1));
margin-bottom: var(--seed-box-margin-bottom, calc(var(--seed-box-bleed-bottom) * -1));
margin-left: var(--seed-box-margin-left, calc(var(--seed-box-bleed-left) * -1));
margin-right: var(--seed-box-margin-right, calc(var(--seed-box-bleed-right) * -1));
--seed-box-min-height-base: initial;
--seed-box-min-height-sm: var(--seed-box-min-height-base);
--seed-box-min-height-md: var(--seed-box-min-height-sm);
--seed-box-min-height-lg: var(--seed-box-min-height-md);
--seed-box-min-height-xl: var(--seed-box-min-height-lg);
--seed-box-min-height: var(--seed-box-min-height-base);
--seed-box-max-height-base: initial;
--seed-box-max-height-sm: var(--seed-box-max-height-base);
--seed-box-max-height-md: var(--seed-box-max-height-sm);
--seed-box-max-height-lg: var(--seed-box-max-height-md);
--seed-box-max-height-xl: var(--seed-box-max-height-lg);
--seed-box-max-height: var(--seed-box-max-height-base);
--seed-box-height-base: initial;
--seed-box-height-sm: var(--seed-box-height-base);
--seed-box-height-md: var(--seed-box-height-sm);
--seed-box-height-lg: var(--seed-box-height-md);
--seed-box-height-xl: var(--seed-box-height-lg);
--seed-box-height: var(--seed-box-height-base);
--seed-box-min-width-base: initial;
--seed-box-min-width-sm: var(--seed-box-min-width-base);
--seed-box-min-width-md: var(--seed-box-min-width-sm);
--seed-box-min-width-lg: var(--seed-box-min-width-md);
--seed-box-min-width-xl: var(--seed-box-min-width-lg);
--seed-box-min-width: var(--seed-box-min-width-base);
--seed-box-max-width-base: initial;
--seed-box-max-width-sm: var(--seed-box-max-width-base);
--seed-box-max-width-md: var(--seed-box-max-width-sm);
--seed-box-max-width-lg: var(--seed-box-max-width-md);
--seed-box-max-width-xl: var(--seed-box-max-width-lg);
--seed-box-max-width: var(--seed-box-max-width-base);
--seed-box-width-base: initial;
--seed-box-width-sm: var(--seed-box-width-base);
--seed-box-width-md: var(--seed-box-width-sm);
--seed-box-width-lg: var(--seed-box-width-md);
--seed-box-width-xl: var(--seed-box-width-lg);
--seed-box-width: var(--seed-box-width-base);
min-height: var(--seed-box-min-height);
max-height: var(--seed-box-max-height);
height: var(--seed-box-height);
min-width: var(--seed-box-min-width);
max-width: var(--seed-box-max-width);
width: var(--seed-box-width);
--seed-box-top: initial;
--seed-box-bottom: initial;
--seed-box-left: initial;
--seed-box-right: initial;
top: var(--seed-box-top);
bottom: var(--seed-box-bottom);
left: var(--seed-box-left);
right: var(--seed-box-right);
--seed-box-border-radius: initial;
--seed-box-border-bottom-left-radius: var(--seed-box-border-radius);
--seed-box-border-bottom-right-radius: var(--seed-box-border-radius);
--seed-box-border-top-left-radius: var(--seed-box-border-radius);
--seed-box-border-top-right-radius: var(--seed-box-border-radius);
border-bottom-left-radius: var(--seed-box-border-bottom-left-radius);
border-bottom-right-radius: var(--seed-box-border-bottom-right-radius);
border-top-left-radius: var(--seed-box-border-top-left-radius);
border-top-right-radius: var(--seed-box-border-top-right-radius);
--seed-box-box-shadow: initial;
box-shadow: var(--seed-box-box-shadow);
--seed-box-display-base: block;
--seed-box-display-sm: var(--seed-box-display-base);
--seed-box-display-md: var(--seed-box-display-sm);
--seed-box-display-lg: var(--seed-box-display-md);
--seed-box-display-xl: var(--seed-box-display-lg);
--seed-box-display: var(--seed-box-display-base);
--seed-box-position: initial;
display: var(--seed-box-display);
position: var(--seed-box-position);
--seed-box-unstable-transform: initial;
transform: var(--seed-box-unstable-transform);
--seed-box-z-index: initial;
z-index: var(--seed-box-z-index);
--seed-box-overflow-x: initial;
--seed-box-overflow-y: initial;
overflow-x: var(--seed-box-overflow-x);
overflow-y: var(--seed-box-overflow-y);
--seed-box-flex-grow: initial;
--seed-box-flex-shrink: initial;
flex-grow: var(--seed-box-flex-grow);
flex-shrink: var(--seed-box-flex-shrink);
--seed-box-flex-direction-base: initial;
--seed-box-flex-direction-sm: var(--seed-box-flex-direction-base);
--seed-box-flex-direction-md: var(--seed-box-flex-direction-sm);
--seed-box-flex-direction-lg: var(--seed-box-flex-direction-md);
--seed-box-flex-direction-xl: var(--seed-box-flex-direction-lg);
--seed-box-flex-direction: var(--seed-box-flex-direction-base);
--seed-box-flex-wrap: initial;
--seed-box-justify-content: initial;
--seed-box-justify-self: auto;
--seed-box-align-items: stretch;
--seed-box-align-content: stretch;
--seed-box-align-self: auto;
--seed-box-gap-base: initial;
--seed-box-gap-sm: var(--seed-box-gap-base);
--seed-box-gap-md: var(--seed-box-gap-sm);
--seed-box-gap-lg: var(--seed-box-gap-md);
--seed-box-gap-xl: var(--seed-box-gap-lg);
--seed-box-gap: var(--seed-box-gap-base);
flex-direction: var(--seed-box-flex-direction);
flex-wrap: var(--seed-box-flex-wrap);
justify-content: var(--seed-box-justify-content);
justify-self: var(--seed-box-justify-self);
align-items: var(--seed-box-align-items);
align-content: var(--seed-box-align-content);
align-self: var(--seed-box-align-self);
gap: var(--seed-box-gap);
--seed-box-grid-column: initial;
grid-column: var(--seed-box-grid-column);
--seed-box-grid-row: initial;
grid-row: var(--seed-box-grid-row);
}
.seed-box[data-has-active-bg]:is(:active, [data-active]) {
background: var(--seed-box-background--active);
}
.seed-grid {
--seed-grid-columns-base: initial;
--seed-grid-columns-sm: var(--seed-grid-columns-base);
--seed-grid-columns-md: var(--seed-grid-columns-sm);
--seed-grid-columns-lg: var(--seed-grid-columns-md);
--seed-grid-columns-xl: var(--seed-grid-columns-lg);
--seed-grid-columns: var(--seed-grid-columns-base);
grid-template-columns: var(--seed-grid-columns);
--seed-grid-rows-base: initial;
--seed-grid-rows-sm: var(--seed-grid-rows-base);
--seed-grid-rows-md: var(--seed-grid-rows-sm);
--seed-grid-rows-lg: var(--seed-grid-rows-md);
--seed-grid-rows-xl: var(--seed-grid-rows-lg);
--seed-grid-rows: var(--seed-grid-rows-base);
grid-template-rows: var(--seed-grid-rows);
--seed-grid-auto-flow: initial;
grid-auto-flow: var(--seed-grid-auto-flow);
--seed-grid-auto-columns: initial;
grid-auto-columns: var(--seed-grid-auto-columns);
--seed-grid-auto-rows: initial;
grid-auto-rows: var(--seed-grid-auto-rows);
--seed-grid-justify-items: stretch;
justify-items: var(--seed-grid-justify-items);
}
.seed-consistent-width:before {
content: attr(data-text);
visibility: hidden;
height: 0;
font-weight: var(--seed-font-weight-regular);
display: block;
}
.seed-consistent-width:after {
content: attr(data-text);
visibility: hidden;
height: 0;
font-weight: var(--seed-font-weight-bold);
display: block;
}
:root, [data-seed-color-mode="system"] {
color-scheme: light dark;
}
[data-seed-color-mode="light-only"] {
color-scheme: light;
color-scheme: light only;
}
[data-seed-color-mode="dark-only"] {
color-scheme: dark;
color-scheme: dark only;
}
:root {
--seed-dimension-x0_5: 2px;
--seed-dimension-x1: 4px;
--seed-dimension-x1_5: 6px;
--seed-dimension-x2: 8px;
--seed-dimension-x2_5: 10px;
--seed-dimension-x3: 12px;
--seed-dimension-x3_5: 14px;
--seed-dimension-x4: 16px;
--seed-dimension-x4_5: 18px;
--seed-dimension-x5: 20px;
--seed-dimension-x6: 24px;
--seed-dimension-x7: 28px;
--seed-dimension-x8: 32px;
--seed-dimension-x9: 36px;
--seed-dimension-x10: 40px;
--seed-dimension-x12: 48px;
--seed-dimension-x13: 52px;
--seed-dimension-x14: 56px;
--seed-dimension-x16: 64px;
--seed-dimension-spacing-x-between-chips: var(--seed-dimension-x2);
--seed-dimension-spacing-x-global-gutter: var(--seed-dimension-x4);
--seed-dimension-spacing-y-component-default: var(--seed-dimension-x3);
--seed-dimension-spacing-y-nav-to-title: var(--seed-dimension-x5);
--seed-dimension-spacing-y-screen-bottom: var(--seed-dimension-x14);
--seed-dimension-spacing-y-between-text: var(--seed-dimension-x1_5);
--seed-duration-d1: 50ms;
--seed-duration-d2: .1s;
--seed-duration-d3: .15s;
--seed-duration-d4: .2s;
--seed-duration-d5: .25s;
--seed-duration-d6: .3s;
--seed-duration-color-transition: var(--seed-duration-d3);
--seed-duration-pressed-scale: var(--seed-duration-d3);
--seed-font-size-t1: clamp(calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-min, .8)), calc(.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t1-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t2: clamp(calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-min, .8)), calc(.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t2-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t3: clamp(calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-min, .8)), calc(.8125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t3-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t4: clamp(calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-min, .8)), calc(.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t4-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t5: clamp(calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t5-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t6: clamp(calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t6-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t7: clamp(calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-min, .8)), calc(1.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t7-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t8: clamp(calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t8-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t9: clamp(calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t9-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t10: clamp(calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-min, .8)), calc(1.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t10-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t11: clamp(calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-min, .8)), calc(1.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t11-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t12: clamp(calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t12-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t13: clamp(calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-min, .8)), calc(2.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t13-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t14: clamp(calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-min, .8)), calc(3rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-font-size-t14-static) * var(--seed-font-size-limit-max, 1.5)));
--seed-font-size-t1-static: 11px;
--seed-font-size-t2-static: 12px;
--seed-font-size-t3-static: 13px;
--seed-font-size-t4-static: 14px;
--seed-font-size-t5-static: 16px;
--seed-font-size-t6-static: 18px;
--seed-font-size-t7-static: 20px;
--seed-font-size-t8-static: 22px;
--seed-font-size-t9-static: 24px;
--seed-font-size-t10-static: 26px;
--seed-font-size-t11-static: 28px;
--seed-font-size-t12-static: 32px;
--seed-font-size-t13-static: 40px;
--seed-font-size-t14-static: 48px;
--seed-font-weight-regular: 400;
--seed-font-weight-medium: 500;
--seed-font-weight-bold: 700;
--seed-line-height-t1: clamp(calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-min, .8)), calc(.9375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t1-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t2: clamp(calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-min, .8)), calc(1rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t2-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t3: clamp(calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-min, .8)), calc(1.125rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t3-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t4: clamp(calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-min, .8)), calc(1.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t4-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t5: clamp(calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-min, .8)), calc(1.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t5-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t6: clamp(calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-min, .8)), calc(1.5rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t6-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t7: clamp(calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-min, .8)), calc(1.6875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t7-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t8: clamp(calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-min, .8)), calc(1.875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t8-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t9: clamp(calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-min, .8)), calc(2rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t9-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t10: clamp(calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-min, .8)), calc(2.1875rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t10-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t11: clamp(calc(var(--seed-line-height-t11-static) * var(--seed-line-height-limit-min, .8)), calc(2.375rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t11-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t12: clamp(calc(var(--seed-line-height-t12-static) * var(--seed-line-height-limit-min, .8)), calc(2.625rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t12-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t13: clamp(calc(var(--seed-line-height-t13-static) * var(--seed-line-height-limit-min, .8)), calc(3.25rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t13-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t14: clamp(calc(var(--seed-line-height-t14-static) * var(--seed-line-height-limit-min, .8)), calc(3.75rem * var(--seed-font-size-multiplier, 1)), calc(var(--seed-line-height-t14-static) * var(--seed-line-height-limit-max, 1.5)));
--seed-line-height-t1-static: 15px;
--seed-line-height-t2-static: 16px;
--seed-line-height-t3-static: 18px;
--seed-line-height-t4-static: 19px;
--seed-line-height-t5-static: 22px;
--seed-line-height-t6-static: 24px;
--seed-line-height-t7-static: 27px;
--seed-line-height-t8-static: 30px;
--seed-line-height-t9-static: 32px;
--seed-line-height-t10-static: 35px;
--seed-line-height-t11-static: 38px;
--seed-line-height-t12-static: 42px;
--seed-line-height-t13-static: 52px;
--seed-line-height-t14-static: 60px;
--seed-radius-r0_5: 2px;
--seed-radius-r1: 4px;
--seed-radius-r1_5: 6px;
--seed-radius-r2: 8px;
--seed-radius-r2_5: 10px;
--seed-radius-r3: 12px;
--seed-radius-r3_5: 14px;
--seed-radius-r4: 16px;
--seed-radius-r5: 20px;
--seed-radius-r6: 24px;
--seed-radius-full: 9999px;
--seed-timing-function-linear: cubic-bezier(0, 0, 1, 1);
--seed-timing-function-easing: cubic-bezier(.35, 0, .35, 1);
--seed-timing-function-enter: cubic-bezier(0, 0, .15, 1);
--seed-timing-function-exit: cubic-bezier(.35, 0, 1, 1);
--seed-timing-function-enter-expressive: cubic-bezier(.03, .4, .1, 1);
--seed-timing-function-exit-expressive: cubic-bezier(.35, 0, .95, .55);
--seed-timing-function-pressed-scale: cubic-bezier(0, 0, .15, 1);
}
:root, :root[data-seed-color-mode="system"][data-seed-user-color-scheme="light"], :root[data-seed-color-mode="light-only"], :root [data-seed-color-mode="light-only"] {
--seed-color-palette-gray-00: #fff;
--seed-color-palette-gray-100: #f7f8f9;
--seed-color-palette-gray-200: #f3f4f5;
--seed-color-palette-gray-300: #eeeff1;
--seed-color-palette-gray-400: #dcdee3;
--seed-color-palette-gray-500: #d1d3d8;
--seed-color-palette-gray-600: #b0b3ba;
--seed-color-palette-gray-700: #868b94;
--seed-color-palette-gray-800: #555d6d;
--seed-color-palette-gray-900: #2a3038;
--seed-color-palette-gray-1000: #1a1c20;
--seed-color-palette-carrot-100: #fff2ec;
--seed-color-palette-carrot-200: #ffe8db;
--seed-color-palette-carrot-300: #ffd5c0;
--seed-color-palette-carrot-400: #ffb999;
--seed-color-palette-carrot-500: #ff9364;
--seed-color-palette-carrot-600: #f60;
--seed-color-palette-carrot-700: #e14d00;
--seed-color-palette-carrot-800: #b93901;
--seed-color-palette-carrot-900: #862b00;
--seed-color-palette-carrot-1000: #471601;
--seed-color-palette-blue-100: #eff6ff;
--seed-color-palette-blue-200: #e2edfc;
--seed-color-palette-blue-300: #cbdffa;
--seed-color-palette-blue-400: #aacefd;
--seed-color-palette-blue-500: #85b8fd;
--seed-color-palette-blue-600: #5e98fe;
--seed-color-palette-blue-700: #217cf9;
--seed-color-palette-blue-800: #135fcd;
--seed-color-palette-blue-900: #0b4596;
--seed-color-palette-blue-1000: #032451;
--seed-color-palette-red-100: #fdf0f0;
--seed-color-palette-red-200: #fde7e7;
--seed-color-palette-red-300: #fed4d2;
--seed-color-palette-red-400: #feb7b3;
--seed-color-palette-red-500: #fe928d;
--seed-color-palette-red-600: #fc6a66;
--seed-color-palette-red-700: #fa342c;
--seed-color-palette-red-800: #ca1d13;
--seed-color-palette-red-900: #921708;
--seed-color-palette-red-1000: #4a1209;
--seed-color-palette-green-100: #edfaf6;
--seed-color-palette-green-200: #d9f6e9;
--seed-color-palette-green-300: #b9e9d2;
--seed-color-palette-green-400: #7ddcb3;
--seed-color-palette-green-500: #42c593;
--seed-color-palette-green-600: #10ab7d;
--seed-color-palette-green-700: #079171;
--seed-color-palette-green-800: #00745f;
--seed-color-palette-green-900: #075445;
--seed-color-palette-green-1000: #0a2b24;
--seed-color-palette-yellow-100: #fff7de;
--seed-color-palette-yellow-200: #fdefb9;
--seed-color-palette-yellow-300: #fbdc65;
--seed-color-palette-yellow-400: #e9c647;
--seed-color-palette-yellow-500: #d4ab28;
--seed-color-palette-yellow-600: #c49725;
--seed-color-palette-yellow-700: #9b7821;
--seed-color-palette-yellow-800: #755b22;
--seed-color-palette-yellow-900: #4f3e1f;
--seed-color-palette-yellow-1000: #2c2512;
--seed-color-palette-purple-100: #f5f3fe;
--seed-color-palette-purple-200: #efeafe;
--seed-color-palette-purple-300: #e1d8ff;
--seed-color-palette-purple-400: #d0c0ff;
--seed-color-palette-purple-500: #b8a1ff;
--seed-color-palette-purple-600: #9f84fb;
--seed-color-palette-purple-700: #8969ea;
--seed-color-palette-purple-800: #6d50cb;
--seed-color-palette-purple-900: #50379b;
--seed-color-palette-purple-1000: #29175d;
--seed-color-palette-static-black: #000;
--seed-color-palette-static-black-alpha-100: #00000007;
--seed-color-palette-static-black-alpha-200: #0000000c;
--seed-color-palette-static-black-alpha-300: #00000010;
--seed-color-palette-static-black-alpha-400: #00000021;
--seed-color-palette-static-black-alpha-500: #0000002c;
--seed-color-palette-static-black-alpha-600: #0000004c;
--seed-color-palette-static-black-alpha-700: #00000074;
--seed-color-palette-static-black-alpha-800: #000000a2;
--seed-color-palette-static-black-alpha-900: #000000d0;
--seed-color-palette-static-black-alpha-1000: #000000e3;
--seed-color-palette-static-white: #fff;
--seed-color-palette-static-white-alpha-50: #ffffff0d;
--seed-color-palette-static-white-alpha-100: #ffffff17;
--seed-color-palette-static-white-alpha-200: #ffffff20;
--seed-color-palette-static-white-alpha-300: #ffffff2e;
--seed-color-palette-static-white-alpha-400: #ffffff3d;
--seed-color-palette-static-white-alpha-500: #ffffff60;
--seed-color-palette-static-white-alpha-600: #ffffff8b;
--seed-color-palette-static-white-alpha-700: #ffffffb3;
--seed-color-palette-static-white-alpha-800: #ffffffde;
--seed-color-palette-static-white-alpha-900: #ffffffea;
--seed-color-palette-static-white-alpha-1000: #fffffff4;
--seed-color-fg-brand: var(--seed-color-palette-carrot-600);
--seed-color-fg-brand-contrast: var(--seed-color-palette-carrot-700);
--seed-color-fg-critical: var(--seed-color-palette-red-700);
--seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
--seed-color-fg-disabled: var(--seed-color-palette-gray-500);
--seed-color-fg-informative: var(--seed-color-palette-blue-700);
--seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
--seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
--seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-00);
--seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
--seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
--seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
--seed-color-fg-positive: var(--seed-color-palette-green-700);
--seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
--seed-color-fg-warning: var(--seed-color-palette-yellow-700);
--seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
--seed-color-bg-brand-solid: var(--seed-color-palette-carrot-600);
--seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-700);
--seed-color-bg-brand-weak: var(--seed-color-palette-carrot-100);
--seed-color-bg-brand-weak-pressed: var(--seed-color-palette-carrot-200);
--seed-color-bg-critical-solid: var(--seed-color-palette-red-700);
--seed-color-bg-critical-solid-pressed: var(--seed-color-palette-red-800);
--seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
--seed-color-bg-critical-weak-pressed: var(--seed-color-palette-red-200);
--seed-color-bg-disabled: var(--seed-color-palette-gray-200);
--seed-color-bg-informative-solid: var(--seed-color-palette-blue-700);
--seed-color-bg-informative-solid-pressed: var(--seed-color-palette-blue-800);
--seed-color-bg-informative-weak: var(--seed-color-palette-blue-100);
--seed-color-bg-informative-weak-pressed: var(--seed-color-palette-blue-200);
--seed-color-bg-layer-basement: var(--seed-color-palette-gray-200);
--seed-color-bg-layer-default: var(--seed-color-palette-gray-00);
--seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
--seed-color-bg-layer-fill: var(--seed-color-palette-gray-100);
--seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
--seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
--seed-color-bg-magic-weak: #f9f2ee;
--seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-900);
--seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
--seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
--seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-800);
--seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-900);
--seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
--seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-black-alpha-200);
--seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-black-alpha-300);
--seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-300);
--seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
--seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
--seed-color-bg-positive-solid: var(--seed-color-palette-green-700);
--seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-800);
--seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
--seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
--seed-color-bg-transparent: #0000;
--seed-color-bg-transparent-pressed: var(--seed-color-palette-static-black-alpha-100);
--seed-color-bg-transparent-selected: var(--seed-color-palette-static-black-alpha-200);
--seed-color-bg-transparent-selected-pressed: var(--seed-color-palette-static-black-alpha-300);
--seed-color-bg-warning-solid: var(--seed-color-palette-yellow-300);
--seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-400);
--seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
--seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
--seed-color-stroke-brand-solid: var(--seed-color-palette-carrot-700);
--seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
--seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
--seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
--seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
--seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
--seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
--seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
--seed-color-stroke-neutral-muted: var(--seed-color-palette-static-black-alpha-300);
--seed-color-stroke-neutral-solid: var(--seed-color-palette-gray-800);
--seed-color-stroke-neutral-subtle: var(--seed-color-palette-static-black-alpha-200);
--seed-color-stroke-neutral-weak: var(--seed-color-palette-gray-400);
--seed-color-stroke-positive-solid: var(--seed-color-palette-green-700);
--seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
--seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
--seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
--seed-color-manner-temp-l1-bg: #f1f2f3;
--seed-color-manner-temp-l1-text: #757b85;
--seed-color-manner-temp-l10-bg: #ffebee;
--seed-color-manner-temp-l10-text: #cb0123;
--seed-color-manner-temp-l2-bg: #f8f4ec;
--seed-color-manner-temp-l2-text: #ab863f;
--seed-color-manner-temp-l3-bg: #fff5e5;
--seed-color-manner-temp-l3-text: #e08a00;
--seed-color-manner-temp-l4-bg: #fff3e5;
--seed-color-manner-temp-l4-text: #f57e00;
--seed-color-manner-temp-l5-bg: #fff1e5;
--seed-color-manner-temp-l5-text: #ff7300;
--seed-color-manner-temp-l6-bg: #fff0e5;
--seed-color-manner-temp-l6-text: #f60;
--seed-color-manner-temp-l7-bg: #ffefe5;
--seed-color-manner-temp-l7-text: #ff5100;
--seed-color-manner-temp-l8-bg: #ffeee5;
--seed-color-manner-temp-l8-text: #f30;
--seed-color-manner-temp-l9-bg: #fdeded;
--seed-color-manner-temp-l9-text: #e82c45;
--seed-color-banner-blue: #e1f7ff;
--seed-color-banner-cool-gray: #ebf1f5;
--seed-color-banner-green: #f0fbe5;
--seed-color-banner-orange: #fff2e1;
--seed-color-banner-pink: #ffebf1;
--seed-color-banner-purple: #f5ecff;
--seed-color-banner-red: #ffecee;
--seed-color-banner-teal: #e6faf6;
--seed-color-banner-warm-gray: #f2f0ee;
--seed-color-banner-yellow: #fffae1;
--seed-gradient-glow-magic: #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;
--seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
--seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
--seed-gradient-highlight-magic-pressed: #e14f00 20%, #ae58bf 100%;
--seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;
--seed-gradient-shimmer-neutral: #fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;
--seed-shadow-s1: 0px 1px 4px 0px #00000014;
--seed-shadow-s2: 0px 2px 10px 0px #0000001a;
--seed-shadow-s3: 0px 4px 16px 0px #0000001f;
}
:root[data-seed-color-mode="system"][data-seed-user-color-scheme="dark"], :root[data-seed-color-mode="dark-only"], :root [data-seed-color-mode="dark-only"] {
--seed-color-palette-gray-00: #000;
--seed-color-palette-gray-100: #16171b;
--seed-color-palette-gray-200: #1d2025;
--seed-color-palette-gray-300: #2b2e35;
--seed-color-palette-gray-400: #393d46;
--seed-color-palette-gray-500: #5b606a;
--seed-color-palette-gray-600: #868b94;
--seed-color-palette-gray-700: #b0b3ba;
--seed-color-palette-gray-800: #dcdee3;
--seed-color-palette-gray-900: #e9eaec;
--seed-color-palette-gray-1000: #f3f4f5;
--seed-color-palette-carrot-100: #31241f;
--seed-color-palette-carrot-200: #4b291c;
--seed-color-palette-carrot-300: #6b311c;
--seed-color-palette-carrot-400: #923600;
--seed-color-palette-carrot-500: #bd4201;
--seed-color-palette-carrot-600: #e65200;
--seed-color-palette-carrot-700: #f60;
--seed-color-palette-carrot-800: #ff9e65;
--seed-color-palette-carrot-900: #eecebc;
--seed-color-palette-carrot-1000: #f4eeea;
--seed-color-palette-blue-100: #202742;
--seed-color-palette-blue-200: #1e3352;
--seed-color-palette-blue-300: #1a4275;
--seed-color-palette-blue-400: #0f559e;
--seed-color-palette-blue-500: #1964d8;
--seed-color-palette-blue-600: #1e82eb;
--seed-color-palette-blue-700: #41a2f9;
--seed-color-palette-blue-800: #83bcf9;
--seed-color-palette-blue-900: #b9d7fb;
--seed-color-palette-blue-1000: #e5f0fe;
--seed-color-palette-red-100: #322323;
--seed-color-palette-red-200: #4f2624;
--seed-color-palette-red-300: #742826;
--seed-color-palette-red-400: #a12621;
--seed-color-palette-red-500: #ca2319;
--seed-color-palette-red-600: #f73526;
--seed-color-palette-red-700: #ff6e60;
--seed-color-palette-red-800: #ffa299;
--seed-color-palette-red-900: #f8c5c3;
--seed-color-palette-red-1000: #fdf2f2;
--seed-color-palette-green-100: #202926;
--seed-color-palette-green-200: #20362e;
--seed-color-palette-green-300: #20493b;
--seed-color-palette-green-400: #19604c;
--seed-color-palette-green-500: #117956;
--seed-color-palette-green-600: #1b946d;
--seed-color-palette-green-700: #22b27f;
--seed-color-palette-green-800: #35ce9a;
--seed-color-palette-green-900: #93e5c0;
--seed-color-palette-green-1000: #d4f6ef;
--seed-color-palette-yellow-100: #302819;
--seed-color-palette-yellow-200: #413218;
--seed-color-palette-yellow-300: #543e15;
--seed-color-palette-yellow-400: #714e15;
--seed-color-palette-yellow-500: #91601b;
--seed-color-palette-yellow-600: #b6720d;
--seed-color-palette-yellow-700: #ca901c;
--seed-color-palette-yellow-800: #dab156;
--seed-color-palette-yellow-900: #e5d49b;
--seed-color-palette-yellow-1000: #f7f0cd;
--seed-color-palette-purple-100: #28213b;
--seed-color-palette-purple-200: #3b2873;
--seed-color-palette-purple-300: #443081;
--seed-color-palette-purple-400: #5a3bb1;
--seed-color-palette-purple-500: #764fd9;
--seed-color-palette-purple-600: #8e6bee;
--seed-color-palette-purple-700: #a78df0;
--seed-color-palette-purple-800: #beadf2;
--seed-color-palette-purple-900: #d9cefa;
--seed-color-palette-purple-1000: #f0edfc;
--seed-color-palette-static-black: #000;
--seed-color-palette-static-black-alpha-100: #00000007;
--seed-color-palette-static-black-alpha-200: #0000000c;
--seed-color-palette-static-black-alpha-300: #00000010;
--seed-color-palette-static-black-alpha-400: #00000021;
--seed-color-palette-static-black-alpha-500: #0000002c;
--seed-color-palette-static-black-alpha-600: #0000004c;
--seed-color-palette-static-black-alpha-700: #00000074;
--seed-color-palette-static-black-alpha-800: #000000a2;
--seed-color-palette-static-black-alpha-900: #000000d0;
--seed-color-palette-static-black-alpha-1000: #000000e3;
--seed-color-palette-static-white: #fff;
--seed-color-palette-static-white-alpha-50: #ffffff0d;
--seed-color-palette-static-white-alpha-100: #ffffff17;
--seed-color-palette-static-white-alpha-200: #ffffff20;
--seed-color-palette-static-white-alpha-300: #ffffff2e;
--seed-color-palette-static-white-alpha-400: #ffffff3d;
--seed-color-palette-static-white-alpha-500: #ffffff60;
--seed-color-palette-static-white-alpha-600: #ffffff8b;
--seed-color-palette-static-white-alpha-700: #ffffffb3;
--seed-color-palette-static-white-alpha-800: #ffffffde;
--seed-color-palette-static-white-alpha-900: #ffffffea;
--seed-color-palette-static-white-alpha-1000: #fffffff4;
--seed-color-fg-brand: var(--seed-color-palette-carrot-700);
--seed-color-fg-brand-contrast: var(--seed-color-palette-carrot-700);
--seed-color-fg-critical: var(--seed-color-palette-red-700);
--seed-color-fg-critical-contrast: var(--seed-color-palette-red-900);
--seed-color-fg-disabled: var(--seed-color-palette-gray-500);
--seed-color-fg-informative: var(--seed-color-palette-blue-700);
--seed-color-fg-informative-contrast: var(--seed-color-palette-blue-900);
--seed-color-fg-neutral: var(--seed-color-palette-gray-1000);
--seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-100);
--seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
--seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
--seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
--seed-color-fg-positive: var(--seed-color-palette-green-700);
--seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
--seed-color-fg-warning: var(--seed-color-palette-yellow-700);
--seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
--seed-color-bg-brand-solid: var(--seed-color-palette-carrot-700);
--seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-800);
--seed-color-bg-brand-weak: var(--seed-color-palette-carrot-100);
--seed-color-bg-brand-weak-pressed: var(--seed-color-palette-carrot-200);
--seed-color-bg-critical-solid: var(--seed-color-palette-red-600);
--seed-color-bg-critical-solid-pressed: var(--seed-color-palette-red-700);
--seed-color-bg-critical-weak: var(--seed-color-palette-red-100);
--seed-color-bg-critical-weak-pressed: var(--seed-color-palette-red-200);
--seed-color-bg-disabled: var(--seed-color-palette-gray-300);
--seed-color-bg-informative-solid: var(--seed-color-palette-blue-600);
--seed-color-bg-informative-solid-pressed: var(--seed-color-palette-blue-700);
--seed-color-bg-informative-weak: var(--seed-color-palette-blue-100);
--seed-color-bg-informative-weak-pressed: var(--seed-color-palette-blue-200);
--seed-color-bg-layer-basement: var(--seed-color-palette-gray-00);
--seed-color-bg-layer-default: var(--seed-color-palette-gray-100);
--seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
--seed-color-bg-layer-fill: var(--seed-color-palette-gray-200);
--seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
--seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
--seed-color-bg-magic-weak: #201f1f;
--seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-1000);
--seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
--seed-color-bg-neutral-solid: var(--seed-color-palette-gray-300);
--seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-400);
--seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-500);
--seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
--seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-white-alpha-200);
--seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-white-alpha-300);
--seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-400);
--seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
--seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
--seed-color-bg-positive-solid: var(--seed-color-palette-green-500);
--seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-600);
--seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
--seed-color-bg-positive-weak-pressed: var(--seed-color-palette-green-200);
--seed-color-bg-transparent: #fff0;
--seed-color-bg-transparent-pressed: var(--seed-color-palette-static-white-alpha-50);
--seed-color-bg-transparent-selected: var(--seed-color-palette-static-white-alpha-100);
--seed-color-bg-transparent-selected-pressed: var(--seed-color-palette-static-white-alpha-200);
--seed-color-bg-warning-solid: var(--seed-color-palette-yellow-800);
--seed-color-bg-warning-solid-pressed: var(--seed-color-palette-yellow-900);
--seed-color-bg-warning-weak: var(--seed-color-palette-yellow-100);
--seed-color-bg-warning-weak-pressed: var(--seed-color-palette-yellow-200);
--seed-color-stroke-brand-solid: var(--seed-color-palette-carrot-700);
--seed-color-stroke-brand-weak: var(--seed-color-palette-carrot-300);
--seed-color-stroke-critical-solid: var(--seed-color-palette-red-700);
--seed-color-stroke-critical-weak: var(--seed-color-palette-red-300);
--seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
--seed-color-stroke-informative-solid: var(--seed-color-palette-blue-700);
--seed-color-stroke-informative-weak: var(--seed-color-palette-blue-300);
--seed-color-stroke-neutral-contrast: var(--seed-color-palette-gray-1000);
--seed-color-stroke-neutral-muted: var(--seed-color-palette-static-white-alpha-100);
--seed-color-stroke-neutral-solid: var(--seed-color-palette-gray-800);
--seed-color-stroke-neutral-subtle: var(--seed-color-palette-static-white-alpha-50);
--seed-color-stroke-neutral-weak: var(--seed-color-palette-gray-400);
--seed-color-stroke-positive-solid: var(--seed-color-palette-green-700);
--seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
--seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
--seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
--seed-color-manner-temp-l1-bg: #292929;
--seed-color-manner-temp-l1-text: #b8b8b9;
--seed-color-manner-temp-l10-bg: #34040a;
--seed-color-manner-temp-l10-text: #fb6f82;
--seed-color-manner-temp-l2-bg: #332605;
--seed-color-manner-temp-l2-text: #f5db97;
--seed-color-manner-temp-l3-bg: #372b01;
--seed-color-manner-temp-l3-text: #fdda65;
--seed-color-manner-temp-l4-bg: #372301;
--seed-color-manner-temp-l4-text: #fbbe55;
--seed-color-manner-temp-l5-bg: #371f01;
--seed-color-manner-temp-l5-text: #faac4b;
--seed-color-manner-temp-l6-bg: #351b03;
--seed-color-manner-temp-l6-text: #fc9855;
--seed-color-manner-temp-l7-bg: #371701;
--seed-color-manner-temp-l7-text: #f97a25;
--seed-color-manner-temp-l8-bg: #380f00;
--seed-color-manner-temp-l8-text: #fe6a34;
--seed-color-manner-temp-l9-bg: #380500;
--seed-color-manner-temp-l9-text: #fe6a5d;
--seed-color-banner-blue: #0d2a3a;
--seed-color-banner-cool-gray: #242c33;
--seed-color-banner-green: #1e361c;
--seed-color-banner-orange: #42230a;
--seed-color-banner-pink: #3b172c;
--seed-color-banner-purple: #2e1e45;
--seed-color-banner-red: #3a0f15;
--seed-color-banner-teal: #143633;
--seed-color-banner-warm-gray: #2f2b27;
--seed-color-banner-yellow: #3e2b00;
--seed-gradient-glow-magic: #2d252d 0%, #3a312b 80%, #333232 100%;
--seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
--seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
--seed-gradient-highlight-magic-pressed: #ff9e65 20%, #e89bee 100%;
--seed-gradient-shimmer-magic: #fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;
--seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
--seed-shadow-s1: 0px 1px 4px 0px #00000080;
--seed-shadow-s2: 0px 2px 10px 0px #000000ad;
--seed-shadow-s3: 0px 4px 16px 0px #000c;
}
.seed-accordion__root, .seed-accordion__item {
flex-direction: column;
width: 100%;
display: flex;
}
.seed-accordion__header {
font: inherit;
margin: 0;
padding: 0;
display: flex;
}
.seed-accordion__trigger {
isolation: isolate;
cursor: pointer;
text-align: start;
width: 100%;
padding: 0;
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
background: none;
border: none;
align-items: center;
font-family: inherit;
display: flex;
position: relative;
}
.seed-accordion__trigger:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-accordion__trigger:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-accordion__prefix {
--seed-icon-color: var(--seed-color-fg-neutral);
flex-shrink: 0;
align-items: center;
display: inline-flex;
}
.seed-accordion__prefix:is(:disabled, [disabled], [data-disabled]) {
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-accordion__body {
gap: var(--seed-dimension-x0_5);
flex-direction: column;
flex: 1;
min-width: 0;
display: flex;
}
.seed-accordion__title {
color: var(--seed-color-fg-neutral);
font-weight: var(--seed-font-weight-medium);
}
.seed-accordion__title:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-accordion__description {
color: var(--seed-color-fg-neutral-subtle);
font-weight: var(--seed-font-weight-medium);
}
.seed-accordion__description:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-accordion__suffixIcon {
color: var(--seed-color-fg-neutral-subtle);
transition: transform var(--seed-duration-d6) var(--seed-timing-function-easing);
flex-shrink: 0;
align-items: center;
margin-left: auto;
display: inline-flex;
transform: rotate(0);
}
.seed-accordion__suffixIcon:is([data-state="open"], [data-open]) {
transform: rotate(180deg);
}
.seed-accordion__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-accordion__content {
opacity: 0;
height: 0;
transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
overflow: hidden;
}
.seed-accordion__content:is([data-state="open"], [data-open]) {
height: var(--collapsible-content-height);
opacity: 1;
transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
}
.seed-accordion__item--variant_inline {
position: relative;
}
.seed-accordion__item--variant_inline:not(:last-child):after {
content: "";
bottom: 0;
left: var(--seed-dimension-x3);
right: var(--seed-dimension-x3);
background-color: var(--seed-color-stroke-neutral-subtle);
height: 1px;
position: absolute;
}
.seed-accordion__trigger--variant_inline:before {
content: "";
z-index: -1;
transition-property: background-color, left, right, border-radius;
transition-duration: var(--seed-duration-color-transition);
transition-timing-function: var(--seed-timing-function-easing);
position: absolute;
inset: 0;
}
@media (hover: hover) and (pointer: fine) {
.seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x1_5);
right: var(--seed-dimension-x1_5);
border-radius: var(--seed-dimension-x2_5);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-accordion__trigger--variant_inline:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x1_5);
right: var(--seed-dimension-x1_5);
border-radius: var(--seed-dimension-x2_5);
}
}
.seed-accordion__item--variant_separated {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
border-radius: var(--seed-radius-r3);
overflow: hidden;
}
.seed-accordion__trigger--variant_separated:before {
content: "";
z-index: -1;
transition-property: background-color;
transition-duration: var(--seed-duration-color-transition);
transition-timing-function: var(--seed-timing-function-easing);
position: absolute;
inset: 0;
}
@media (hover: hover) and (pointer: fine) {
.seed-accordion__trigger--variant_separated:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-accordion__trigger--variant_separated:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
.seed-accordion__trigger--size_medium {
padding-top: var(--seed-dimension-x4);
padding-bottom: var(--seed-dimension-x4);
}
.seed-accordion__prefix--size_medium {
margin-right: var(--seed-dimension-x3);
--seed-icon-size: 22px;
}
.seed-accordion__title--size_medium {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-accordion__description--size_medium {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
}
.seed-accordion__suffixIcon--size_medium {
--seed-suffix-icon-size: var(--seed-dimension-x5);
--seed-suffix-icon-margin-left: var(--seed-dimension-x3);
}
.seed-accordion__trigger--size_large {
padding-top: var(--seed-dimension-x5);
padding-bottom: var(--seed-dimension-x5);
}
.seed-accordion__prefix--size_large {
margin-right: var(--seed-dimension-x3);
--seed-icon-size: 22px;
}
.seed-accordion__title--size_large {
font-size: var(--seed-font-size-t7);
line-height: var(--seed-line-height-t7);
}
.seed-accordion__description--size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-accordion__suffixIcon--size_large {
--seed-suffix-icon-size: var(--seed-dimension-x6);
--seed-suffix-icon-margin-left: var(--seed-dimension-x3);
}
.seed-accordion__trigger--size_responsive {
padding-top: var(--seed-dimension-x4);
padding-bottom: var(--seed-dimension-x4);
}
@media (width >= 768px) {
.seed-accordion__trigger--size_responsive {
padding-top: var(--seed-dimension-x5);
padding-bottom: var(--seed-dimension-x5);
}
}
.seed-accordion__prefix--size_responsive {
margin-right: var(--seed-dimension-x3);
--seed-icon-size: 22px;
}
@media (width >= 768px) {
.seed-accordion__prefix--size_responsive {
margin-right: var(--seed-dimension-x3);
--seed-icon-size: 22px;
}
}
.seed-accordion__title--size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 768px) {
.seed-accordion__title--size_responsive {
font-size: var(--seed-font-size-t7);
line-height: var(--seed-line-height-t7);
}
}
.seed-accordion__description--size_responsive {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
}
@media (width >= 768px) {
.seed-accordion__description--size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
}
.seed-accordion__suffixIcon--size_responsive {
--seed-suffix-icon-size: var(--seed-dimension-x5);
--seed-suffix-icon-margin-left: var(--seed-dimension-x3);
}
@media (width >= 768px) {
.seed-accordion__suffixIcon--size_responsive {
--seed-suffix-icon-size: var(--seed-dimension-x6);
--seed-suffix-icon-margin-left: var(--seed-dimension-x3);
}
}
.seed-accordion__root--variant_separated-size_medium {
gap: var(--seed-dimension-x3);
}
.seed-accordion__root--variant_separated-size_large {
gap: var(--seed-dimension-x4);
}
.seed-accordion__root--variant_separated-size_responsive {
gap: var(--seed-dimension-x3);
}
@media (width >= 768px) {
.seed-accordion__root--variant_separated-size_responsive {
gap: var(--seed-dimension-x4);
}
}
.seed-action-button {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
white-space: nowrap;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--seed-box-flex-grow: initial;
flex-shrink: 0;
flex-grow: var(--seed-box-flex-grow);
--seed-box-min-width: initial;
min-width: var(--seed-box-min-width);
--seed-box-padding-bottom: initial;
--seed-box-padding-top: initial;
--seed-box-padding-left: initial;
--seed-box-padding-right: initial;
padding-top: var(--seed-box-padding-top);
padding-bottom: var(--seed-box-padding-bottom);
padding-left: var(--seed-box-padding-left);
padding-right: var(--seed-box-padding-right);
--seed-box-bleed-bottom-base: 0px;
--seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
--seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
--seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
--seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
--seed-box-bleed-top-base: 0px;
--seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
--seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
--seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
--seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
--seed-box-bleed-top: var(--seed-box-bleed-top-base);
--seed-box-bleed-left-base: 0px;
--seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
--seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
--seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
--seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
--seed-box-bleed-left: var(--seed-box-bleed-left-base);
--seed-box-bleed-right-base: 0px;
--seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
--seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
--seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
--seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
--seed-box-bleed-right: var(--seed-box-bleed-right-base);
margin-top: calc(var(--seed-box-bleed-top) * -1);
margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
margin-left: calc(var(--seed-box-bleed-left) * -1);
margin-right: calc(var(--seed-box-bleed-right) * -1);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
border: none;
justify-content: center;
align-items: center;
font-family: inherit;
text-decoration: none;
display: inline-flex;
position: relative;
}
.seed-action-button:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-action-button:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-action-button {
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
}
.seed-action-button--variant_brandSolid {
background: var(--seed-color-bg-brand-solid);
color: var(--seed-color-palette-static-white);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
--seed-icon-color: var(--seed-color-palette-static-white);
--track-color: var(--seed-color-palette-static-white-alpha-300);
--range-color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-action-button--variant_brandSolid:is(:hover, [data-hover]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-action-button--variant_brandSolid:is(:active, [data-active]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
.seed-action-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-action-button--variant_brandSolid[data-loading] {
background: var(--seed-color-bg-brand-solid-pressed);
}
.seed-action-button--variant_neutralSolid {
background: var(--seed-color-bg-neutral-inverted);
color: var(--seed-color-fg-neutral-inverted);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
--track-color: var(--seed-color-palette-static-white-alpha-300);
--range-color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-action-button--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-action-button--variant_neutralSolid[data-loading] {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
.seed-action-button--variant_neutralWeak {
background: var(--seed-color-bg-neutral-weak);
color: var(--seed-color-fg-neutral);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
--seed-icon-color: var(--seed-color-fg-neutral);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-action-button--variant_neutralWeak:is(:hover, [data-hover]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-action-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-action-button--variant_neutralWeak[data-loading] {
background: var(--seed-color-bg-neutral-weak-pressed);
}
.seed-action-button--variant_criticalSolid {
background: var(--seed-color-bg-critical-solid);
color: var(--seed-color-palette-static-white);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
--seed-icon-color: var(--seed-color-palette-static-white);
--track-color: var(--seed-color-palette-static-white-alpha-300);
--range-color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-action-button--variant_criticalSolid:is(:hover, [data-hover]) {
background: var(--seed-color-bg-critical-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
background: var(--seed-color-bg-critical-solid-pressed);
}
}
.seed-action-button--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-action-button--variant_criticalSolid[data-loading] {
background: var(--seed-color-bg-critical-solid-pressed);
}
.seed-action-button--variant_brandOutline {
background: var(--seed-color-bg-transparent);
border-style: solid;
border-width: 1px;
border-color: var(--seed-color-stroke-neutral-muted);
color: var(--seed-color-fg-brand);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-color: var(--seed-color-fg-brand);
--seed-suffix-icon-color: var(--seed-color-fg-brand);
--seed-icon-color: var(--seed-color-fg-brand);
--track-color: var(--seed-color-palette-carrot-200);
--range-color: var(--seed-color-bg-brand-solid);
}
@media (hover: hover) and (pointer: fine) {
.seed-action-button--variant_brandOutline:is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-action-button--variant_brandOutline:is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-transparent);
border-color: var(--seed-color-stroke-neutral-muted);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-action-button--variant_brandOutline[data-loading] {
background: var(--seed-color-bg-transparent);
}
.seed-action-button--variant_neutralOutline {
background: var(--seed-color-bg-transparent);
border-style: solid;
border-width: 1px;
border-color: var(--seed-color-stroke-neutral-muted);
color: var(--seed-color-fg-neutral);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
--seed-icon-color: var(--seed-color-fg-neutral);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-action-button--variant_neutralOutline:is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-transparent);
border-color: var(--seed-color-stroke-neutral-muted);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-action-button--variant_neutralOutline[data-loading] {
background: var(--seed-color-bg-transparent);
}
.seed-action-button--variant_ghost {
--seed-box-color: var(--seed-color-fg-neutral);
color: var(--seed-box-color);
--seed-prefix-icon-color: var(--seed-box-color);
--seed-suffix-icon-color: var(--seed-box-color);
--seed-icon-color: var(--seed-box-color);
--seed-font-weight: var(--seed-font-weight-bold);
font-weight: var(--seed-font-weight);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
background: #fff0;
}
@media (hover: hover) and (pointer: fine) {
.seed-action-button--variant_ghost:is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-action-button--variant_ghost:is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-action-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
background: #fff0;
}
.seed-action-button--variant_ghost[data-loading] {
background: var(--seed-color-bg-transparent-pressed);
}
.seed-action-button--size_xsmall {
height: var(--seed-dimension-x8);
border-radius: var(--seed-radius-full);
--size: 14px;
--thickness: 2px;
--seed-prefix-icon-size: var(--seed-dimension-x3_5);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
--seed-icon-size: var(--seed-dimension-x3_5);
}
.seed-action-button--size_small {
height: var(--seed-dimension-x9);
border-radius: var(--seed-radius-r2);
--size: 14px;
--thickness: 2px;
--seed-prefix-icon-size: var(--seed-dimension-x3_5);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
--seed-icon-size: var(--seed-dimension-x4);
}
.seed-action-button--size_medium {
height: var(--seed-dimension-x10);
border-radius: var(--seed-radius-r2);
--size: 16px;
--thickness: 2px;
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-size: var(--seed-dimension-x4);
--seed-icon-size: 18px;
}
.seed-action-button--size_large {
height: var(--seed-dimension-x13);
border-radius: var(--seed-radius-r3);
--size: 18px;
--thickness: 2px;
--seed-prefix-icon-size: 22px;
--seed-suffix-icon-size: 22px;
--seed-icon-size: 22px;
}
.seed-action-button--size_xsmall-layout_withText {
gap: var(--seed-dimension-x1);
--seed-box-padding-left: var(--seed-dimension-x3_5);
--seed-box-padding-right: var(--seed-dimension-x3_5);
--seed-box-padding-top: var(--seed-dimension-x1_5);
--seed-box-padding-bottom: var(--seed-dimension-x1_5);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
}
.seed-action-button--size_xsmall-layout_iconOnly {
min-width: var(--seed-dimension-x8);
--seed-box-padding-left: var(--seed-dimension-x1_5);
--seed-box-padding-right: var(--seed-dimension-x1_5);
--seed-box-padding-top: var(--seed-dimension-x1_5);
--seed-box-padding-bottom: var(--seed-dimension-x1_5);
}
.seed-action-button--size_small-layout_withText {
gap: var(--seed-dimension-x1);
--seed-box-padding-left: var(--seed-dimension-x3_5);
--seed-box-padding-right: var(--seed-dimension-x3_5);
--seed-box-padding-top: var(--seed-dimension-x2);
--seed-box-padding-bottom: var(--seed-dimension-x2);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-action-button--size_small-layout_iconOnly {
min-width: var(--seed-dimension-x9);
--seed-box-padding-left: var(--seed-dimension-x2);
--seed-box-padding-right: var(--seed-dimension-x2);
--seed-box-padding-top: var(--seed-dimension-x2);
--seed-box-padding-bottom: var(--seed-dimension-x2);
}
.seed-action-button--size_medium-layout_withText {
gap: var(--seed-dimension-x1_5);
--seed-box-padding-left: var(--seed-dimension-x4);
--seed-box-padding-right: var(--seed-dimension-x4);
--seed-box-padding-top: var(--seed-dimension-x2_5);
--seed-box-padding-bottom: var(--seed-dimension-x2_5);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-action-button--size_medium-layout_iconOnly {
min-width: var(--seed-dimension-x10);
--seed-box-padding-left: var(--seed-dimension-x2_5);
--seed-box-padding-right: var(--seed-dimension-x2_5);
--seed-box-padding-top: var(--seed-dimension-x2_5);
--seed-box-padding-bottom: var(--seed-dimension-x2_5);
}
.seed-action-button--size_large-layout_withText {
gap: var(--seed-dimension-x2);
--seed-box-padding-left: var(--seed-dimension-x5);
--seed-box-padding-right: var(--seed-dimension-x5);
--seed-box-padding-top: var(--seed-dimension-x3_5);
--seed-box-padding-bottom: var(--seed-dimension-x3_5);
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
}
.seed-action-button--size_large-layout_iconOnly {
min-width: var(--seed-dimension-x13);
--seed-box-padding-left: var(--seed-dimension-x3_5);
--seed-box-padding-right: var(--seed-dimension-x3_5);
--seed-box-padding-top: var(--seed-dimension-x3_5);
--seed-box-padding-bottom: var(--seed-dimension-x3_5);
}
.seed-action-chip {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
text-align: start;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: inherit;
line-height: 1;
font-weight: var(--seed-font-weight-medium);
border-radius: var(--seed-radius-full);
background: var(--seed-color-bg-neutral-weak);
color: var(--seed-color-fg-neutral);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
--seed-icon-color: var(--seed-color-fg-neutral);
--seed-count-font-weight: var(--seed-font-weight-medium);
--seed-count-color: var(--seed-color-fg-neutral-muted);
border: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: inline-flex;
}
.seed-action-chip:is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
.seed-action-chip:is(:focus, [data-focus]) {
outline: none;
}
.seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
cursor: not-allowed;
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-action-chip--size_medium {
min-height: var(--seed-dimension-x9);
padding-block: var(--seed-dimension-x2);
gap: var(--seed-dimension-x1);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
--seed-count-font-size: var(--seed-font-size-t4);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
--seed-icon-size: var(--seed-dimension-x4);
}
.seed-action-chip--size_small {
min-height: var(--seed-dimension-x8);
padding-block: var(--seed-dimension-x1_5);
gap: var(--seed-dimension-x1);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
--seed-count-font-size: var(--seed-font-size-t4);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
--seed-icon-size: var(--seed-dimension-x4);
}
.seed-action-chip--size_medium-layout_withText {
padding-inline: var(--seed-dimension-x3_5);
}
.seed-action-chip--size_medium-layout_iconOnly {
min-width: var(--seed-dimension-x9);
}
.seed-action-chip--size_small-layout_withText {
padding-inline: var(--seed-dimension-x3);
}
.seed-action-chip--size_small-layout_iconOnly {
min-width: var(--seed-dimension-x8);
}
.seed-action-sheet__positioner {
overscroll-behavior-y: none;
--sheet-z-index: 2;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
justify-content: center;
align-items: flex-end;
display: flex;
position: fixed;
inset: 0;
}
.seed-action-sheet__backdrop {
background: var(--seed-color-bg-overlay);
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
position: fixed;
inset: 0;
}
.seed-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d2);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-action-sheet__backdrop:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d2);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1;
}
.seed-action-sheet__content {
box-sizing: border-box;
word-break: break-all;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
background: var(--seed-color-bg-layer-floating);
border-top-left-radius: var(--seed-radius-r5);
border-top-right-radius: var(--seed-radius-r5);
flex-direction: column;
flex: 1;
display: flex;
position: relative;
overflow: hidden;
}
.seed-action-sheet__content:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d4);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 100%;
--seed-exit-opacity: 1;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-action-sheet__content:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter-expressive);
animation-duration: var(--seed-duration-d6);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 100%;
--seed-enter-opacity: 1;
--seed-enter-scale: 1;
}
.seed-action-sheet__header {
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
padding-block: var(--seed-dimension-x3_5);
align-items: center;
gap: var(--seed-dimension-x1);
flex-direction: column;
display: flex;
position: relative;
}
.seed-action-sheet__header:after {
content: "";
left: var(--seed-dimension-spacing-x-global-gutter);
right: var(--seed-dimension-spacing-x-global-gutter);
background: var(--seed-color-stroke-neutral-muted);
height: 1px;
display: block;
position: absolute;
bottom: 0;
}
.seed-action-sheet__title {
color: var(--seed-color-fg-neutral-muted);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-bold);
}
.seed-action-sheet__description {
color: var(--seed-color-fg-neutral-muted);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-regular);
}
.seed-action-sheet__list {
flex-direction: column;
align-items: stretch;
display: flex;
}
.seed-action-sheet__closeButton {
background-color: var(--seed-color-bg-layer-floating);
min-height: 50px;
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
padding-block: var(--seed-dimension-x3_5);
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-bold);
justify-content: center;
align-items: center;
display: flex;
}
.seed-action-sheet__closeButton:is(:active, [data-active]) {
background-color: var(--seed-color-bg-layer-floating-pressed);
}
.seed-action-sheet-item {
background-color: var(--seed-color-bg-layer-floating);
min-height: 50px;
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
padding-block: var(--seed-dimension-x3_5);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
justify-content: center;
align-items: center;
display: flex;
position: relative;
}
.seed-action-sheet-item:is(:active, [data-active]) {
background-color: var(--seed-color-bg-layer-floating-pressed);
}
.seed-action-sheet-item:after {
content: "";
left: var(--seed-dimension-spacing-x-global-gutter);
right: var(--seed-dimension-spacing-x-global-gutter);
background: var(--seed-color-stroke-neutral-muted);
height: 1px;
display: block;
position: absolute;
bottom: 0;
}
.seed-action-sheet-item--tone_neutral {
color: var(--seed-color-fg-neutral);
}
.seed-action-sheet-item--tone_critical {
color: var(--seed-color-fg-critical);
}
.seed-aspect-ratio {
--seed-aspect-ratio-padding: 75%;
}
.seed-aspect-ratio:before {
content: "";
height: 0;
padding-bottom: var(--seed-aspect-ratio-padding);
display: block;
}
.seed-aspect-ratio > :not(style) {
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
position: absolute;
inset: 0;
}
.seed-aspect-ratio > img, .seed-aspect-ratio > video {
object-fit: cover;
}
.seed-app-bar__root {
z-index: var(--z-index-app-bar);
box-sizing: border-box;
align-items: flex-end;
width: 100%;
display: flex;
position: absolute;
top: 0;
}
.seed-app-bar__background {
pointer-events: none;
z-index: -1;
position: absolute;
inset: 0;
}
.seed-app-bar__left {
align-items: center;
height: 100%;
display: flex;
}
.seed-app-bar__right {
align-items: center;
height: 100%;
margin-left: auto;
display: flex;
}
.seed-app-bar__iconButton {
border-radius: var(--seed-radius-r1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
background: none;
border: none;
justify-content: center;
align-items: center;
padding: 0;
font-family: inherit;
display: flex;
}
.seed-app-bar__iconButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-app-bar__icon {
flex-shrink: 0;
display: inline-block;
}
.seed-app-bar__root--theme_cupertino {
height: calc(44px + var(--seed-safe-area-top));
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
padding-top: var(--seed-safe-area-top);
}
.seed-app-bar__iconButton--theme_cupertino {
width: 44px;
height: 44px;
}
.seed-app-bar__iconButton--theme_cupertino:first-child {
margin-left: -10px;
}
.seed-app-bar__iconButton--theme_cupertino:last-child {
margin-right: -10px;
}
.seed-app-bar__icon--theme_cupertino {
width: var(--seed-icon-size, 24px);
height: var(--seed-icon-size, 24px);
}
.seed-app-bar__root--theme_android {
height: calc(56px + var(--seed-safe-area-top));
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
padding-top: var(--seed-safe-area-top);
}
.seed-app-bar__iconButton--theme_android {
width: 44px;
height: 44px;
}
.seed-app-bar__iconButton--theme_android:first-child {
margin-left: -10px;
}
.seed-app-bar__iconButton--theme_android:last-child {
margin-right: -10px;
}
.seed-app-bar__icon--theme_android {
width: var(--seed-icon-size, 24px);
height: var(--seed-icon-size, 24px);
}
.seed-app-bar__left--theme_android {
padding-right: 16px;
}
.seed-app-bar__background--tone_layer {
background: var(--seed-box-background, var(--seed-color-bg-layer-default));
}
.seed-app-bar__icon--tone_layer {
color: var(--seed-icon-color, var(--seed-color-fg-neutral));
}
.seed-app-bar__root--tone_transparent {
background-color: #0000;
}
.seed-app-bar__icon--tone_transparent {
color: var(--seed-icon-color, var(--seed-color-palette-static-white));
}
.seed-app-bar-main__root {
flex: 1;
}
.seed-app-bar-main__title, .seed-app-bar-main__subtitle {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.seed-app-bar-main__title--layout_titleOnly {
font-size: clamp(calc(var(--seed-font-size-t6-static) * 1), var(--seed-font-size-t6), calc(var(--seed-font-size-t6-static) * 1.2));
font-weight: var(--seed-font-weight-bold);
line-height: clamp(calc(var(--seed-line-height-t6-static) * 1), var(--seed-line-height-t6), calc(var(--seed-line-height-t6-static) * 1.2));
}
.seed-app-bar-main__title--layout_withSubtitle {
font-size: clamp(calc(var(--seed-font-size-t5-static) * 1), var(--seed-font-size-t5), calc(var(--seed-font-size-t5-static) * 1.2));
font-weight: var(--seed-font-weight-bold);
line-height: clamp(calc(var(--seed-line-height-t5-static) * 1), var(--seed-line-height-t5), calc(var(--seed-line-height-t5-static) * 1.2));
}
.seed-app-bar-main__subtitle--layout_withSubtitle {
font-size: clamp(calc(var(--seed-font-size-t2-static) * 1), var(--seed-font-size-t2), calc(var(--seed-font-size-t2-static) * 1.2));
font-weight: var(--seed-font-weight-regular);
line-height: clamp(calc(var(--seed-line-height-t2-static) * 1), var(--seed-line-height-t2), calc(var(--seed-line-height-t2-static) * 1.2));
}
.seed-app-bar-main__root--theme_cupertino {
text-align: center;
top: var(--seed-safe-area-top);
padding-left: var(--centered-title-padding-x, 0);
padding-right: var(--centered-title-padding-x, 0);
pointer-events: none;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.seed-app-bar-main__root--theme_android {
justify-content: flex-start;
align-items: center;
width: 100%;
min-width: 0;
height: 100%;
display: flex;
}
.seed-app-bar-main__root--tone_layer, .seed-app-bar-main__title--tone_layer {
color: var(--seed-color-fg-neutral);
}
.seed-app-bar-main__subtitle--tone_layer {
color: var(--seed-color-fg-neutral-muted);
}
.seed-app-bar-main__root--tone_transparent, .seed-app-bar-main__title--tone_transparent, .seed-app-bar-main__subtitle--tone_transparent {
color: var(--seed-color-palette-static-white);
}
.seed-app-screen__root {
--app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top));
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
}
.seed-app-screen__dim {
z-index: var(--z-index-dim);
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.seed-app-screen__layer {
z-index: var(--z-index-layer);
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
overflow-y: scroll;
}
.seed-app-screen__layer::-webkit-scrollbar {
display: none;
}
.seed-app-screen__layer:focus {
outline: none;
}
.seed-app-screen__layer {
background-color: var(--seed-color-bg-layer-default);
}
.seed-app-screen__edge {
z-index: var(--z-index-edge);
width: 20px;
height: 100%;
position: absolute;
left: 0;
right: 0;
}
.seed-app-screen__root--theme_cupertino {
--app-bar-height: 44px;
}
.seed-app-screen__root--theme_android {
--app-bar-height: 56px;
}
.seed-app-screen__edge--theme_android {
display: none;
}
.seed-app-screen__root--transitionStyle_slideFromRightIOS {
--z-index-dim: calc(var(--z-index-base) + 0);
--z-index-layer: calc(var(--z-index-base) + 2);
--z-index-edge: calc(var(--z-index-base) + 4);
--z-index-app-bar: calc(var(--z-index-base) + 7);
}
.seed-app-screen__layer--transitionStyle_slideFromRightIOS {
transform: translate3d(0, 0, 0);
}
.seed-app-screen__dim--transitionStyle_slideFromRightIOS {
background: var(--seed-color-bg-overlay);
height: 100%;
}
.seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
--z-index-dim: calc(var(--z-index-base) + 0);
--z-index-layer: calc(var(--z-index-base) + 3);
--z-index-edge: calc(var(--z-index-base) + 4);
--z-index-app-bar: calc(var(--z-index-base) + 4);
}
.seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
background: linear-gradient(var(--seed-color-bg-overlay), #0000);
height: 160px;
}
.seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
transform: translate3d(0, 0, 0);
}
.seed-app-screen__root--transitionStyle_fadeIn {
--z-index-dim: calc(var(--z-index-base) + 0);
--z-index-layer: calc(var(--z-index-base) + 3);
--z-index-edge: calc(var(--z-index-base) + 4);
--z-index-app-bar: calc(var(--z-index-base) + 4);
}
.seed-app-screen__dim--transitionStyle_fadeIn {
display: none;
}
.seed-app-screen__layer--layerOffsetTop_safeArea {
padding-top: var(--seed-safe-area-top);
}
.seed-app-screen__layer--layerOffsetTop_appBar {
padding-top: var(--app-bar-offset);
}
.seed-app-screen__layer--layerOffsetBottom_safeArea {
padding-bottom: var(--seed-safe-area-bottom);
}
.seed-app-screen__layer--tone_transparent-gradient_true:before {
content: "";
margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
height: calc(66px + 400px + var(--seed-safe-area-top));
pointer-events: none;
z-index: 1;
background: linear-gradient(#0003 0%, #00000059 400px, #0000 100%);
display: block;
position: sticky;
top: 0;
left: 0;
right: 0;
}
.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {
transform: translateY(-400px);
}
.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_safeArea:before {
transform: translateY(calc(-400px - var(--seed-safe-area-top)));
}
.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_appBar:before {
transform: translateY(calc(-400px - var(--app-bar-offset)));
}
.seed-article {
user-select: text;
word-break: normal;
overflow-wrap: break-word;
line-break: strict;
}
.seed-article:lang(ko) {
word-break: keep-all;
}
.seed-avatar__root {
box-sizing: border-box;
vertical-align: top;
border-radius: var(--seed-radius-full);
width: var(--avatar-size);
height: var(--avatar-size);
justify-content: center;
align-items: center;
display: inline-flex;
position: relative;
}
.seed-avatar__root:after {
content: "";
pointer-events: none;
border-radius: var(--seed-radius-full);
box-shadow: inset 0 0 0 var(--avatar-stroke-width) var(--seed-color-stroke-neutral-subtle);
-webkit-mask-image: url("data:image/svg+xml;utf8,"), var(--svg-mask-uri);
-webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
-webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
-webkit-mask-composite: source-out;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml;utf8,"), var(--svg-mask-uri);
mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
position: absolute;
inset: 0;
transform: translateZ(0);
mask-repeat: no-repeat;
mask-composite: subtract;
}
.seed-avatar__image {
object-fit: cover;
width: 100%;
height: 100%;
-webkit-mask-image: url("data:image/svg+xml;utf8,"), var(--svg-mask-uri);
-webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
-webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
-webkit-mask-composite: source-out;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml;utf8,"), var(--svg-mask-uri);
mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
display: block;
overflow: hidden;
transform: translateZ(0);
mask-repeat: no-repeat;
mask-composite: subtract;
}
.seed-avatar__image:not([data-loading-state="loaded"]) {
display: none;
}
.seed-avatar__fallback {
object-fit: cover;
border-radius: var(--seed-radius-full);
width: 100%;
height: 100%;
-webkit-mask-image: url("data:image/svg+xml;utf8,"), var(--svg-mask-uri);
-webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
-webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
-webkit-mask-composite: source-out;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml;utf8,"), var(--svg-mask-uri);
mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
transform: translateZ(0);
mask-repeat: no-repeat;
mask-composite: subtract;
}
.seed-avatar__fallback[data-loading-state="loaded"] {
display: none;
}
.seed-avatar__badge {
box-sizing: border-box;
z-index: 1;
top: var(--badge-offset);
left: var(--badge-offset);
width: var(--badge-size);
height: var(--badge-size);
justify-content: center;
align-items: center;
display: flex;
position: absolute;
}
.seed-avatar__root--size_20 {
--avatar-size: 20px;
--avatar-stroke-width: 1px;
--badge-mask-size: 0px;
--badge-mask-offset: 0px;
}
.seed-avatar__badge--size_20 {
display: none;
}
.seed-avatar__root--size_24 {
--avatar-size: 24px;
--avatar-stroke-width: 1px;
--badge-mask-size: 12px;
--badge-mask-offset: 14px;
}
.seed-avatar__badge--size_24 {
--badge-size: 10px;
--badge-offset: 15px;
}
.seed-avatar__root--size_36 {
--avatar-size: 36px;
--avatar-stroke-width: 1px;
--badge-mask-size: 18px;
--badge-mask-offset: 20px;
}
.seed-avatar__badge--size_36 {
--badge-size: 14px;
--badge-offset: 22px;
}
.seed-avatar__root--size_42 {
--avatar-size: 42px;
--avatar-stroke-width: 1px;
--badge-mask-size: 20px;
--badge-mask-offset: 24px;
}
.seed-avatar__badge--size_42 {
--badge-size: 16px;
--badge-offset: 26px;
}
.seed-avatar__root--size_48 {
--avatar-size: 48px;
--avatar-stroke-width: 1px;
--badge-mask-size: 22px;
--badge-mask-offset: 28px;
}
.seed-avatar__badge--size_48 {
--badge-size: 18px;
--badge-offset: 30px;
}
.seed-avatar__root--size_56 {
--avatar-size: 56px;
--avatar-stroke-width: 1px;
--badge-mask-size: 24px;
--badge-mask-offset: 34px;
}
.seed-avatar__badge--size_56 {
--badge-size: 20px;
--badge-offset: 36px;
}
.seed-avatar__root--size_64 {
--avatar-size: 64px;
--avatar-stroke-width: 1px;
--badge-mask-size: 26px;
--badge-mask-offset: 40px;
}
.seed-avatar__badge--size_64 {
--badge-size: 22px;
--badge-offset: 42px;
}
.seed-avatar__root--size_80 {
--avatar-size: 80px;
--avatar-stroke-width: 1px;
--badge-mask-size: 32px;
--badge-mask-offset: 52px;
}
.seed-avatar__badge--size_80 {
--badge-size: 28px;
--badge-offset: 54px;
}
.seed-avatar__root--size_96 {
--avatar-size: 96px;
--avatar-stroke-width: 1px;
--badge-mask-size: 38px;
--badge-mask-offset: 62px;
}
.seed-avatar__badge--size_96 {
--badge-size: 32px;
--badge-offset: 65px;
}
.seed-avatar__root--size_108 {
--avatar-size: 108px;
--avatar-stroke-width: 1px;
--badge-mask-size: 44px;
--badge-mask-offset: 70px;
}
.seed-avatar__badge--size_108 {
--badge-size: 36px;
--badge-offset: 74px;
}
.seed-avatar__root--badgeMask_none {
--svg-mask-uri: url("data:image/svg+xml;utf8,");
}
.seed-avatar__root--badgeMask_circle {
--svg-mask-uri: url("data:image/svg+xml;utf8,");
}
.seed-avatar__badge--badgeMask_circle {
border-radius: 9999px;
}
.seed-avatar__root--badgeMask_flower {
--svg-mask-uri: url("data:image/svg+xml;utf8,");
}
.seed-avatar__root--badgeMask_shield {
--svg-mask-uri: url("data:image/svg+xml;utf8,");
}
.seed-avatar-stack__root {
box-sizing: border-box;
align-items: center;
display: inline-flex;
}
.seed-avatar-stack__item {
border-radius: var(--seed-radius-full);
background-clip: padding-box;
display: block;
}
.seed-avatar-stack__item--size_20:not(:first-child) {
margin-left: -5px;
}
.seed-avatar-stack__item--size_20 {
clip-path: inset(-1px);
box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_24:not(:first-child) {
margin-left: -6px;
}
.seed-avatar-stack__item--size_24 {
clip-path: inset(-1px);
box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_36:not(:first-child) {
margin-left: -8px;
}
.seed-avatar-stack__item--size_36 {
clip-path: inset(-2px);
box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_42:not(:first-child) {
margin-left: -10px;
}
.seed-avatar-stack__item--size_42 {
clip-path: inset(-2px);
box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_48:not(:first-child) {
margin-left: -12px;
}
.seed-avatar-stack__item--size_48 {
clip-path: inset(-2px);
box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_56:not(:first-child) {
margin-left: -13px;
}
.seed-avatar-stack__item--size_56 {
clip-path: inset(-3px);
box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_64:not(:first-child) {
margin-left: -16px;
}
.seed-avatar-stack__item--size_64 {
clip-path: inset(-3px);
box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_80:not(:first-child) {
margin-left: -20px;
}
.seed-avatar-stack__item--size_80 {
clip-path: inset(-4px);
box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_96:not(:first-child) {
margin-left: -24px;
}
.seed-avatar-stack__item--size_96 {
clip-path: inset(-5px);
box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default);
}
.seed-avatar-stack__item--size_108:not(:first-child) {
margin-left: -27px;
}
.seed-avatar-stack__item--size_108 {
clip-path: inset(-5px);
box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default);
}
.seed-badge__root {
box-sizing: border-box;
text-transform: none;
text-align: start;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
align-items: center;
text-decoration: none;
display: inline-flex;
}
.seed-badge__label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.seed-badge__root--size_medium {
max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
min-height: var(--seed-dimension-x5);
padding-left: var(--seed-dimension-x1_5);
padding-right: var(--seed-dimension-x1_5);
padding-top: var(--seed-dimension-x0_5);
padding-bottom: var(--seed-dimension-x0_5);
border-radius: var(--seed-radius-r1);
font-size: var(--seed-font-size-t1);
line-height: var(--seed-line-height-t1);
}
.seed-badge__root--size_large {
max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
min-height: var(--seed-dimension-x6);
padding-left: var(--seed-dimension-x2);
padding-right: var(--seed-dimension-x2);
padding-top: var(--seed-dimension-x1);
padding-bottom: var(--seed-dimension-x1);
border-radius: var(--seed-radius-r1_5);
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
}
.seed-badge__root--variant_weak {
font-weight: var(--seed-font-weight-medium);
}
.seed-badge__root--variant_solid, .seed-badge__root--variant_outline {
font-weight: var(--seed-font-weight-bold);
}
.seed-badge__root--tone_neutral-variant_weak {
background-color: var(--seed-color-bg-neutral-weak);
color: var(--seed-color-fg-neutral-muted);
}
.seed-badge__root--tone_neutral-variant_solid {
background-color: var(--seed-color-palette-gray-800);
color: var(--seed-color-fg-neutral-inverted);
}
.seed-badge__root--tone_neutral-variant_outline {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
color: var(--seed-color-fg-neutral-muted);
}
.seed-badge__root--tone_brand-variant_weak {
background-color: var(--seed-color-bg-brand-weak);
color: var(--seed-color-fg-brand-contrast);
}
.seed-badge__root--tone_brand-variant_solid {
background-color: var(--seed-color-bg-brand-solid);
color: var(--seed-color-palette-static-white);
}
.seed-badge__root--tone_brand-variant_outline {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
color: var(--seed-color-fg-brand);
}
.seed-badge__root--tone_informative-variant_weak {
background-color: var(--seed-color-bg-informative-weak);
color: var(--seed-color-fg-informative-contrast);
}
.seed-badge__root--tone_informative-variant_solid {
background-color: var(--seed-color-bg-informative-solid);
color: var(--seed-color-palette-static-white);
}
.seed-badge__root--tone_informative-variant_outline {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative-weak);
color: var(--seed-color-fg-informative);
}
.seed-badge__root--tone_positive-variant_weak {
background-color: var(--seed-color-bg-positive-weak);
color: var(--seed-color-fg-positive-contrast);
}
.seed-badge__root--tone_positive-variant_solid {
background-color: var(--seed-color-bg-positive-solid);
color: var(--seed-color-palette-static-white);
}
.seed-badge__root--tone_positive-variant_outline {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive-weak);
color: var(--seed-color-fg-positive);
}
.seed-badge__root--tone_warning-variant_weak {
background-color: var(--seed-color-bg-warning-weak);
color: var(--seed-color-fg-warning-contrast);
}
.seed-badge__root--tone_warning-variant_solid {
background-color: var(--seed-color-bg-warning-solid);
color: var(--seed-color-palette-static-black-alpha-900);
}
.seed-badge__root--tone_warning-variant_outline {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-warning-weak);
color: var(--seed-color-fg-warning);
}
.seed-badge__root--tone_critical-variant_weak {
background-color: var(--seed-color-bg-critical-weak);
color: var(--seed-color-fg-critical-contrast);
}
.seed-badge__root--tone_critical-variant_solid {
background-color: var(--seed-color-bg-critical-solid);
color: var(--seed-color-palette-static-white);
}
.seed-badge__root--tone_critical-variant_outline {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical-weak);
color: var(--seed-color-fg-critical);
}
.seed-bottom-sheet__positioner {
overscroll-behavior-y: none;
--sheet-z-index: 2;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
justify-content: center;
align-items: flex-end;
display: flex;
position: fixed;
inset: 0;
}
.seed-bottom-sheet__backdrop {
background: var(--seed-color-bg-overlay);
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
position: fixed;
inset: 0;
}
.seed-bottom-sheet__backdrop[data-snap-points="true"], .seed-bottom-sheet__backdrop:not(:is([data-state="open"], [data-open]))[data-snap-points="true"]:not([data-snap-points-overlay="true"]) {
opacity: 0;
}
.seed-bottom-sheet__backdrop:is([data-state="open"], [data-open])[data-snap-points-overlay="true"] {
opacity: 1;
}
.seed-bottom-sheet__content {
box-sizing: border-box;
word-break: break-all;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
background: var(--seed-color-bg-layer-floating);
border-top-left-radius: var(--seed-radius-r6);
border-top-right-radius: var(--seed-radius-r6);
padding-bottom: var(--seed-safe-area-bottom);
touch-action: none;
will-change: transform;
transition: transform var(--seed-duration-d6) var(--seed-timing-function-enter-expressive);
flex-direction: column;
flex: 1;
display: flex;
position: relative;
}
.seed-bottom-sheet__content[data-snap-points="true"] {
transform: translate3d(0, var(--initial-transform, 100%), 0);
}
.seed-bottom-sheet__content[data-delayed-snap-points="true"] {
transform: translate3d(0, var(--snap-point-height, 0), 0);
}
.seed-bottom-sheet__content:is(:focus, [data-focus]) {
outline: none;
}
.seed-bottom-sheet__content:after {
content: "";
background: inherit;
z-index: -1;
height: 200vh;
position: absolute;
top: 100%;
left: 0;
right: 0;
}
.seed-bottom-sheet__header {
gap: var(--seed-dimension-x2);
padding-top: var(--seed-dimension-x6);
padding-bottom: var(--seed-dimension-x4);
flex-direction: column;
display: flex;
}
.seed-bottom-sheet__title {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t8);
line-height: var(--seed-line-height-t8);
font-weight: var(--seed-font-weight-bold);
word-break: keep-all;
margin: 0;
}
.seed-bottom-sheet__description {
color: var(--seed-color-fg-neutral-muted);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
white-space: pre-wrap;
margin: 0;
}
.seed-bottom-sheet__body {
--seed-box-padding-x-base: var(--seed-dimension-spacing-x-global-gutter);
--seed-box-padding-x-sm: var(--seed-box-padding-x-base);
--seed-box-padding-x-md: var(--seed-box-padding-x-sm);
--seed-box-padding-x-lg: var(--seed-box-padding-x-md);
--seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
--seed-box-padding-x: var(--seed-box-padding-x-base);
--seed-box-height-base: initial;
--seed-box-height-sm: var(--seed-box-height-base);
--seed-box-height-md: var(--seed-box-height-sm);
--seed-box-height-lg: var(--seed-box-height-md);
--seed-box-height-xl: var(--seed-box-height-lg);
--seed-box-height: var(--seed-box-height-base);
--seed-box-min-height-base: initial;
--seed-box-min-height-sm: var(--seed-box-min-height-base);
--seed-box-min-height-md: var(--seed-box-min-height-sm);
--seed-box-min-height-lg: var(--seed-box-min-height-md);
--seed-box-min-height-xl: var(--seed-box-min-height-lg);
--seed-box-min-height: var(--seed-box-min-height-base);
--seed-box-max-height-base: initial;
--seed-box-max-height-sm: var(--seed-box-max-height-base);
--seed-box-max-height-md: var(--seed-box-max-height-sm);
--seed-box-max-height-lg: var(--seed-box-max-height-md);
--seed-box-max-height-xl: var(--seed-box-max-height-lg);
--seed-box-max-height: var(--seed-box-max-height-base);
--seed-box-justify-content: initial;
--seed-box-align-items: initial;
padding-left: var(--seed-box-padding-x);
padding-right: var(--seed-box-padding-x);
height: var(--seed-box-height);
min-height: var(--seed-box-min-height);
max-height: var(--seed-box-max-height);
justify-content: var(--seed-box-justify-content);
align-items: var(--seed-box-align-items);
flex-direction: column;
display: flex;
}
.seed-bottom-sheet__footer {
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
padding-top: var(--seed-dimension-x3);
padding-bottom: var(--seed-dimension-x4);
flex-direction: column;
display: flex;
}
.seed-bottom-sheet__closeButton {
top: var(--seed-dimension-x6);
right: var(--seed-dimension-x4);
border-radius: var(--seed-radius-full);
background: var(--seed-color-bg-neutral-weak);
cursor: pointer;
--seed-icon-size: 14px;
--seed-icon-color: var(--seed-color-fg-neutral);
border: none;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
display: flex;
position: absolute;
}
.seed-bottom-sheet__closeButton:after {
content: "";
border-radius: var(--seed-radius-r1);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
position: absolute;
inset: -8px;
}
.seed-bottom-sheet__closeButton:is(:focus, [data-focus]) {
outline: none;
}
.seed-bottom-sheet__closeButton:is(:focus-visible, [data-focus-visible]):after {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-bottom-sheet__header--headerAlign_left {
justify-content: flex-start;
}
.seed-bottom-sheet__title--headerAlign_left {
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
}
.seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: 56px;
}
.seed-bottom-sheet__header--headerAlign_center {
text-align: center;
justify-content: center;
}
.seed-bottom-sheet__title--headerAlign_center {
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
}
.seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
padding-left: 56px;
padding-right: 56px;
}
.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {
animation-name: fade-in;
animation-duration: var(--seed-duration-d6);
animation-timing-function: var(--seed-timing-function-enter);
}
.seed-bottom-sheet__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
animation-name: fade-out;
animation-duration: var(--seed-duration-d4);
animation-timing-function: var(--seed-timing-function-exit);
animation-fill-mode: forwards;
}
.seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="true"][data-should-overlay-animate="true"]:not([data-animation-done="true"]) {
animation-name: fade-in;
animation-duration: var(--seed-duration-d6);
animation-timing-function: var(--seed-timing-function-enter);
}
.seed-bottom-sheet__content--skipAnimation_false {
animation-duration: var(--seed-duration-d6);
animation-timing-function: var(--seed-timing-function-enter-expressive);
}
.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {
animation-name: drawer-slide-from-bottom;
animation-duration: var(--seed-duration-d6);
animation-timing-function: var(--seed-timing-function-enter-expressive);
}
.seed-bottom-sheet__content--skipAnimation_false:not(:is([data-state="open"], [data-open]))[data-snap-points="false"] {
animation-name: drawer-slide-to-bottom;
animation-duration: var(--seed-duration-d4);
animation-timing-function: var(--seed-timing-function-exit);
animation-fill-mode: forwards;
}
.seed-bottom-sheet__content--skipAnimation_false:is([data-state="open"], [data-open])[data-delayed-snap-points="true"]:not([data-animation-done="true"]) {
animation-name: drawer-slide-from-bottom;
animation-duration: var(--seed-duration-d6);
animation-timing-function: var(--seed-timing-function-enter-expressive);
}
.seed-bottom-sheet-handle__root {
background-color: var(--seed-color-palette-gray-400);
width: 36px;
height: 4px;
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
touch-action: pan-y;
border-radius: 9999px;
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
}
@media (hover: hover) and (pointer: fine) {
.seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
background-color: var(--seed-color-palette-gray-500);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-bottom-sheet-handle__root:is(:active, [data-active]) {
background-color: var(--seed-color-palette-gray-500);
}
}
.seed-bottom-sheet-handle__touchArea {
touch-action: inherit;
width: 44px;
height: 44px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.seed-callout__root {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: inherit;
font-size: unset;
text-align: start;
width: 100%;
min-height: 50px;
padding-left: var(--seed-dimension-x3_5);
padding-right: var(--seed-dimension-x3_5);
padding-top: var(--seed-dimension-x3_5);
padding-bottom: var(--seed-dimension-x3_5);
align-items: center;
gap: var(--seed-dimension-x3);
border-radius: var(--seed-radius-r2_5);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-size: var(--seed-dimension-x4);
border: none;
text-decoration: none;
display: flex;
}
.seed-callout__root:is(button, a) {
cursor: pointer;
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
}
.seed-callout__root:is(button, a):is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-callout__content {
line-height: var(--seed-line-height-t4);
margin-right: auto;
}
.seed-callout__title {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-bold);
}
.seed-callout__title:after {
content: " ";
white-space: pre;
}
.seed-callout__description {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-regular);
}
.seed-callout__description:not(:last-child):after {
content: " ";
white-space: pre;
}
.seed-callout__link {
cursor: pointer;
font-family: inherit;
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-regular);
text-underline-offset: 2px;
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
border-radius: var(--seed-radius-r1);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
background-color: #0000;
border: none;
padding: 0;
text-decoration: underline;
display: inline-block;
}
.seed-callout__link:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-callout__closeButton {
cursor: pointer;
width: var(--seed-dimension-x10);
height: var(--seed-dimension-x10);
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
border-radius: var(--seed-radius-r2_5);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
background-color: #0000;
border: none;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
align-items: center;
padding: 0;
display: flex;
}
.seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-callout__root--tone_neutral {
background-color: var(--seed-color-bg-neutral-weak);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
color: var(--seed-color-fg-neutral);
}
.seed-callout__root--tone_informative {
background-color: var(--seed-color-bg-informative-weak);
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-informative-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
background-color: var(--seed-color-bg-informative-weak-pressed);
}
}
.seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
color: var(--seed-color-fg-informative-contrast);
}
.seed-callout__root--tone_positive {
background-color: var(--seed-color-bg-positive-weak);
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-positive-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
background-color: var(--seed-color-bg-positive-weak-pressed);
}
}
.seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
color: var(--seed-color-fg-positive-contrast);
}
.seed-callout__root--tone_warning {
background-color: var(--seed-color-bg-warning-weak);
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-warning-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
background-color: var(--seed-color-bg-warning-weak-pressed);
}
}
.seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
color: var(--seed-color-fg-warning-contrast);
}
.seed-callout__root--tone_critical {
background-color: var(--seed-color-bg-critical-weak);
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-critical-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
background-color: var(--seed-color-bg-critical-weak-pressed);
}
}
.seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
color: var(--seed-color-fg-critical-contrast);
}
.seed-callout__root--tone_magic {
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
}
}
.seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
color: var(--seed-color-fg-neutral);
}
.seed-checkbox__root {
vertical-align: top;
isolation: isolate;
cursor: pointer;
align-items: flex-start;
gap: var(--seed-dimension-x2);
max-width: 100%;
display: inline-flex;
position: relative;
}
.seed-checkbox__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-checkbox__label {
color: var(--seed-color-fg-neutral);
}
.seed-checkbox__label:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-checkbox__label--weight_regular {
font-weight: var(--seed-font-weight-regular);
}
.seed-checkbox__label--weight_bold {
font-weight: var(--seed-font-weight-bold);
}
.seed-checkbox__root--size_large {
min-height: var(--seed-dimension-x9);
--checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
}
.seed-checkbox__label--size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
}
.seed-checkbox__root--size_medium {
min-height: var(--seed-dimension-x8);
--checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
}
.seed-checkbox__label--size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
}
.seed-checkbox-group {
gap: var(--seed-dimension-x1);
flex-direction: column;
display: flex;
}
.seed-checkmark__root {
box-sizing: border-box;
margin-top: var(--checkmark-margin-top, 0);
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
outline-offset: var(--seed-dimension-x0_5);
flex: none;
position: relative;
}
.seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
outline-offset: var(--seed-dimension-x0_5);
}
.seed-checkmark__icon {
content: "";
text-align: center;
overflow: initial;
margin: auto;
display: none;
position: absolute;
inset: 0;
}
.seed-checkmark__root--variant_square {
border-style: solid;
border-width: 1px;
border-color: var(--seed-color-stroke-neutral-weak);
}
.seed-checkmark__root--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
border-width: 0;
}
@media (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
border-color: var(--seed-color-stroke-neutral-muted);
}
.seed-checkmark__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
display: block;
}
.seed-checkmark__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
color: var(--seed-color-fg-disabled);
}
@media (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-checkmark__icon--variant_ghost {
color: var(--seed-color-fg-placeholder);
transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
display: block;
}
.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]), .seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
color: var(--seed-color-fg-disabled);
}
.seed-checkmark__root--size_large {
border-radius: var(--seed-radius-r1);
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
}
.seed-checkmark__root--size_medium {
border-radius: var(--seed-radius-r1);
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
background: var(--seed-color-bg-neutral-inverted);
}
@media (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
color: var(--seed-color-fg-neutral-inverted);
}
.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
background: var(--seed-color-bg-brand-solid);
}
@media (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
.seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
background: var(--seed-color-palette-gray-200);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
background: var(--seed-color-palette-gray-200);
}
}
.seed-checkmark__icon--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
background: var(--seed-color-palette-carrot-200);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
background: var(--seed-color-palette-carrot-200);
}
}
.seed-checkmark__icon--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
color: var(--seed-color-fg-brand);
}
.seed-checkmark__icon--size_medium-variant_ghost {
width: 14px;
height: 14px;
}
.seed-checkmark__icon--size_large-variant_ghost {
width: 18px;
height: 18px;
}
.seed-checkmark__icon--size_medium-variant_square {
width: 12px;
height: 12px;
}
.seed-checkmark__icon--size_large-variant_square {
width: 14px;
height: 14px;
}
.seed-chip__root {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
text-align: start;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: var(--seed-radius-full);
transition-duration: var(--seed-duration-color-transition);
transition-timing-function: var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
border: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-family: inherit;
line-height: 1;
transition-property: background-color, color, border-color, box-shadow, outline-color;
display: inline-flex;
position: relative;
}
.seed-chip__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-chip__label {
font-weight: var(--seed-font-weight-medium);
padding-left: var(--seed-dimension-x1_5);
padding-right: var(--seed-dimension-x1_5);
justify-content: center;
align-items: center;
display: inline-flex;
}
.seed-chip__prefixIcon {
padding-left: var(--seed-dimension-x1_5);
flex-shrink: 0;
align-items: center;
display: inline-flex;
}
.seed-chip__prefixAvatar {
flex-shrink: 0;
align-items: center;
display: inline-flex;
}
.seed-chip__suffixIcon {
padding-right: var(--seed-dimension-x1_5);
flex-shrink: 0;
align-items: center;
display: inline-flex;
}
.seed-chip__root--variant_solid {
background: var(--seed-color-bg-neutral-weak-alpha);
--seed-icon-color: var(--seed-color-fg-neutral);
}
.seed-chip__root--variant_solid:is(:checked, [data-checked]) {
box-shadow: none;
background: var(--seed-color-bg-neutral-inverted);
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
}
@media (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-weak-alpha-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-weak-alpha-pressed);
}
}
@media (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
opacity: .5;
}
.seed-chip__label--variant_solid {
color: var(--seed-color-fg-neutral);
}
.seed-chip__label--variant_solid:is(:checked, [data-checked]) {
color: var(--seed-color-fg-neutral-inverted);
}
.seed-chip__prefixIcon--variant_solid, .seed-chip__suffixIcon--variant_solid {
color: var(--seed-color-fg-neutral);
}
.seed-chip__root--variant_outlineStrong {
background: var(--seed-color-bg-transparent);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
--seed-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
background: var(--seed-color-bg-neutral-inverted);
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
}
@media (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
opacity: .5;
}
.seed-chip__label--variant_outlineStrong {
color: var(--seed-color-fg-neutral);
}
.seed-chip__label--variant_outlineStrong:is(:checked, [data-checked]) {
color: var(--seed-color-fg-neutral-inverted);
}
.seed-chip__prefixIcon--variant_outlineStrong, .seed-chip__suffixIcon--variant_outlineStrong {
color: var(--seed-color-fg-neutral);
}
.seed-chip__root--variant_outlineWeak {
background: var(--seed-color-bg-transparent);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
--seed-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
background: var(--seed-color-bg-neutral-weak);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
opacity: .5;
}
.seed-chip__label--variant_outlineWeak, .seed-chip__prefixIcon--variant_outlineWeak, .seed-chip__suffixIcon--variant_outlineWeak {
color: var(--seed-color-fg-neutral);
}
.seed-chip__root--size_large {
height: 40px;
padding-left: var(--seed-dimension-x2_5);
padding-right: var(--seed-dimension-x2_5);
--seed-icon-size: var(--seed-dimension-x4);
}
.seed-chip__label--size_large {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-chip__prefixIcon--size_large, .seed-chip__suffixIcon--size_large {
--seed-icon-size: var(--seed-dimension-x4);
}
.seed-chip__root--size_medium {
height: 36px;
padding-left: var(--seed-dimension-x2);
padding-right: var(--seed-dimension-x2);
--seed-icon-size: var(--seed-dimension-x4);
}
.seed-chip__label--size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-chip__prefixIcon--size_medium {
--seed-icon-size: var(--seed-dimension-x4);
}
.seed-chip__suffixIcon--size_medium {
--seed-icon-size: var(--seed-dimension-x3_5);
}
.seed-chip__root--size_small {
height: 32px;
padding-left: var(--seed-dimension-x1_5);
padding-right: var(--seed-dimension-x1_5);
--seed-icon-size: var(--seed-dimension-x3_5);
}
.seed-chip__label--size_small {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-chip__prefixIcon--size_small, .seed-chip__suffixIcon--size_small {
--seed-icon-size: var(--seed-dimension-x3_5);
}
.seed-chip__root--size_small-layout_withText {
min-width: 44px;
}
.seed-chip__root--size_medium-layout_withText {
min-width: var(--seed-dimension-x12);
}
.seed-chip__root--size_large-layout_withText {
min-width: var(--seed-dimension-x13);
}
.seed-chip__root--size_small-layout_iconOnly {
min-width: var(--seed-dimension-x8);
}
.seed-chip__root--size_medium-layout_iconOnly {
min-width: var(--seed-dimension-x9);
}
.seed-chip__root--size_large-layout_iconOnly {
min-width: var(--seed-dimension-x10);
}
.seed-chip-tabs__root {
position: relative;
}
.seed-chip-tabs__list {
isolation: isolate;
-ms-overflow-style: none;
scrollbar-width: none;
padding: 0px var(--seed-dimension-x4);
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
display: flex;
position: relative;
overflow-x: auto;
}
.seed-chip-tabs__list::-webkit-scrollbar {
display: none;
}
.seed-chip-tabs__carousel {
display: block;
overflow: hidden;
}
.seed-chip-tabs__carouselCamera {
display: flex;
}
.seed-chip-tabs__carouselCamera[data-auto-height] {
align-items: flex-start;
}
.seed-chip-tabs__content {
flex: 0 0 100%;
min-width: 0;
overflow: hidden auto;
transform: translate3d(0, 0, 0);
}
.seed-chip-tabs__content:not([data-carousel]):not(:is([aria-selected="true"], [data-selected])) {
display: none;
}
.seed-chip-tabs__trigger {
cursor: pointer;
box-sizing: border-box;
white-space: nowrap;
border-radius: var(--seed-radius-full);
font-family: inherit;
font-weight: var(--seed-font-weight-medium);
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
border: none;
justify-content: center;
align-items: center;
display: flex;
}
.seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-chip-tabs__list--size_medium {
gap: 8px;
}
.seed-chip-tabs__trigger--size_medium {
min-height: 36px;
min-width: var(--seed-dimension-x12);
font-size: var(--seed-font-size-t4);
padding-left: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
padding-right: calc(var(--seed-dimension-x2) + var(--seed-dimension-x1_5));
}
.seed-chip-tabs__list--size_large {
gap: 8px;
}
.seed-chip-tabs__trigger--size_large {
min-height: 40px;
min-width: var(--seed-dimension-x13);
font-size: var(--seed-font-size-t4);
padding-left: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
padding-right: calc(var(--seed-dimension-x2_5) + var(--seed-dimension-x1_5));
}
.seed-chip-tabs__trigger--variant_neutralSolid {
background-color: var(--seed-color-bg-neutral-weak-alpha);
color: var(--seed-color-fg-neutral);
}
.seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]) {
background-color: var(--seed-color-bg-neutral-inverted);
color: var(--seed-color-fg-neutral-inverted);
}
@media (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralSolid:is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
}
}
@media (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
opacity: .5;
}
.seed-chip-tabs__trigger--variant_neutralOutline {
background-color: var(--seed-color-bg-transparent);
border: 1px solid var(--seed-color-stroke-neutral-muted);
color: var(--seed-color-fg-neutral);
}
.seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]) {
background-color: var(--seed-color-bg-neutral-inverted);
color: var(--seed-color-fg-neutral-inverted);
border-color: #0000;
}
@media (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralOutline:is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
opacity: .5;
}
.seed-chip-tabs__root--contentLayout_fill {
flex-direction: column;
height: 100%;
display: flex;
}
.seed-chip-tabs__carousel--contentLayout_fill {
flex: 1;
}
.seed-chip-tabs__carouselCamera--contentLayout_fill {
align-items: stretch;
height: 100%;
}
.seed-chip-tabs__root--contentLayout_hug {
display: block;
}
.seed-chip-tabs__root--stickyList_true {
position: relative;
}
.seed-chip-tabs__list--stickyList_true {
z-index: 1;
position: sticky;
top: 0;
}
.seed-content-placeholder__root {
box-sizing: border-box;
vertical-align: top;
background-color: var(--seed-color-palette-gray-200);
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: inline-flex;
position: relative;
overflow: hidden;
}
.seed-content-placeholder__asset {
height: 50%;
min-width: var(--seed-dimension-x4);
aspect-ratio: 1;
width: auto;
max-width: 160px;
color: var(--seed-color-palette-gray-400);
fill: currentColor;
stroke: currentColor;
object-fit: contain;
display: block;
}
.seed-contextual-floating-button {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
border: none;
justify-content: center;
align-items: center;
font-family: inherit;
text-decoration: none;
display: inline-flex;
}
.seed-contextual-floating-button:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-contextual-floating-button {
border-radius: var(--seed-radius-full);
box-shadow: var(--seed-shadow-s3);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
--seed-box-z-index: initial;
z-index: var(--seed-box-z-index);
--seed-box-position: initial;
position: var(--seed-box-position);
--seed-box-top: initial;
--seed-box-right: initial;
--seed-box-bottom: initial;
--seed-box-left: initial;
top: var(--seed-box-top);
right: var(--seed-box-right);
bottom: var(--seed-box-bottom);
left: var(--seed-box-left);
--seed-icon-size: 22px;
--size: 16px;
--thickness: 2px;
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
}
.seed-contextual-floating-button--variant_solid {
background: var(--seed-color-bg-neutral-inverted);
color: var(--seed-color-fg-neutral-inverted);
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
--track-color: var(--seed-color-palette-gray-700);
--range-color: var(--seed-color-fg-neutral-inverted);
}
@media (hover: hover) and (pointer: fine) {
.seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-contextual-floating-button--variant_solid[data-loading] {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
.seed-contextual-floating-button--variant_layer {
background: var(--seed-color-bg-layer-floating);
color: var(--seed-color-fg-neutral);
--seed-icon-color: var(--seed-color-fg-neutral);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
background: var(--seed-color-bg-layer-floating-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
background: var(--seed-color-bg-layer-floating-pressed);
}
}
.seed-contextual-floating-button--variant_layer:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-contextual-floating-button--variant_layer[data-loading] {
background: var(--seed-color-bg-layer-floating-pressed);
}
.seed-contextual-floating-button--layout_withText {
min-height: 36px;
padding-left: var(--seed-dimension-x3_5);
padding-right: var(--seed-dimension-x3_5);
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
gap: var(--seed-dimension-x1);
--seed-prefix-icon-size: 16px;
}
.seed-contextual-floating-button--layout_iconOnly {
--seed-icon-size: 22px;
width: 44px;
height: 44px;
}
.seed-control-chip {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
text-align: start;
white-space: nowrap;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: var(--seed-radius-full);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
color: var(--seed-color-fg-neutral);
line-height: 1;
font-weight: var(--seed-font-weight-medium);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
--seed-icon-color: var(--seed-color-fg-neutral);
--seed-count-font-weight: var(--seed-font-weight-medium);
--seed-count-color: var(--seed-color-fg-neutral-muted);
border: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
display: inline-flex;
position: relative;
}
.seed-control-chip:is(:focus, [data-focus]) {
outline: none;
}
.seed-control-chip:is(:active, [data-active]) {
background: var(--seed-color-bg-layer-default-pressed);
}
.seed-control-chip:is(:checked, [data-checked]) {
box-shadow: none;
background: var(--seed-color-bg-neutral-solid-muted);
color: var(--seed-color-palette-static-white);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
--seed-icon-color: var(--seed-color-palette-static-white);
--seed-count-color: var(--seed-color-palette-static-white-alpha-800);
}
.seed-control-chip:is(:checked, [data-checked]):is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-solid-muted-pressed);
}
.seed-control-chip:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-control-chip--size_medium {
min-height: var(--seed-dimension-x9);
padding-block: var(--seed-dimension-x2);
gap: var(--seed-dimension-x1);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
--seed-icon-size: var(--seed-dimension-x4);
--seed-count-font-size: var(--seed-font-size-t4);
}
.seed-control-chip--size_small {
min-height: var(--seed-dimension-x8);
padding-block: var(--seed-dimension-x1_5);
gap: var(--seed-dimension-x1);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
--seed-icon-size: var(--seed-dimension-x4);
--seed-count-font-size: var(--seed-font-size-t4);
}
.seed-control-chip--size_medium-layout_withText {
padding-inline: var(--seed-dimension-x3_5);
}
.seed-control-chip--size_medium-layout_iconOnly {
min-width: var(--seed-dimension-x9);
}
.seed-control-chip--size_small-layout_withText {
padding-inline: var(--seed-dimension-x3);
}
.seed-control-chip--size_small-layout_iconOnly {
min-width: var(--seed-dimension-x8);
}
.seed-dialog__positioner {
overscroll-behavior-y: none;
--dialog-z-index: 2;
z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
justify-content: center;
align-items: center;
display: flex;
position: fixed;
inset: 0;
}
.seed-dialog__backdrop {
background: var(--seed-color-bg-overlay);
z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
position: fixed;
inset: 0;
}
.seed-dialog__content {
box-sizing: border-box;
word-break: break-all;
z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
background: var(--seed-color-bg-layer-floating);
max-width: 272px;
margin: auto var(--seed-dimension-x8);
border-radius: var(--seed-radius-r5);
outline: none;
flex-direction: column;
flex: 1;
display: flex;
position: relative;
}
.seed-dialog__content:is(:focus, [data-focus]) {
outline: none;
}
.seed-dialog__header {
padding-left: var(--seed-dimension-x5);
padding-right: var(--seed-dimension-x5);
padding-top: var(--seed-dimension-x5);
gap: var(--seed-dimension-x1_5);
flex-direction: column;
display: flex;
}
.seed-dialog__title {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t7);
line-height: var(--seed-line-height-t7);
font-weight: var(--seed-font-weight-bold);
margin: 0;
}
.seed-dialog__description {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
white-space: pre-wrap;
margin: 0;
}
.seed-dialog__footer {
padding-left: var(--seed-dimension-x5);
padding-right: var(--seed-dimension-x5);
padding-top: var(--seed-dimension-x4);
padding-bottom: var(--seed-dimension-x5);
flex-direction: column;
align-items: stretch;
display: flex;
}
.seed-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d2);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1;
}
.seed-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d2);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter-expressive);
animation-duration: var(--seed-duration-d4);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1.3;
}
.seed-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d2);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-extended-action-sheet__positioner {
overscroll-behavior-y: none;
--sheet-z-index: 2;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
justify-content: center;
align-items: flex-end;
display: flex;
position: fixed;
inset: 0;
}
.seed-extended-action-sheet__backdrop {
background: var(--seed-color-bg-overlay);
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
position: fixed;
inset: 0;
}
.seed-extended-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d2);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-extended-action-sheet__backdrop:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d2);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1;
}
.seed-extended-action-sheet__content {
box-sizing: border-box;
word-break: break-all;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
background: var(--seed-color-bg-layer-floating);
padding-inline: var(--seed-dimension-spacing-x-global-gutter);
padding-block: var(--seed-dimension-x4);
border-top-left-radius: var(--seed-radius-r5);
border-top-right-radius: var(--seed-radius-r5);
flex-direction: column;
flex: 1;
display: flex;
position: relative;
}
.seed-extended-action-sheet__content:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d4);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 100%;
--seed-exit-opacity: 1;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-extended-action-sheet__content:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter-expressive);
animation-duration: var(--seed-duration-d6);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 100%;
--seed-enter-opacity: 1;
--seed-enter-scale: 1;
}
.seed-extended-action-sheet__header {
align-items: center;
gap: var(--seed-dimension-x1);
padding-bottom: var(--seed-dimension-x4);
flex-direction: column;
display: flex;
}
.seed-extended-action-sheet__title {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
font-weight: var(--seed-font-weight-bold);
}
.seed-extended-action-sheet__list {
align-items: stretch;
gap: var(--seed-dimension-x2_5);
flex-direction: column;
display: flex;
}
.seed-extended-action-sheet__group {
border-radius: var(--seed-radius-r4);
flex-direction: column;
align-items: stretch;
display: flex;
overflow: hidden;
}
.seed-extended-action-sheet__footer {
padding-top: var(--seed-dimension-x2_5);
flex-direction: column;
align-items: stretch;
display: flex;
}
.seed-extended-action-sheet__closeButton {
background-color: var(--seed-color-bg-neutral-weak);
min-height: 52px;
padding-inline: var(--seed-dimension-x5);
padding-block: var(--seed-dimension-x3_5);
border-radius: var(--seed-radius-r3);
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-medium);
justify-content: center;
align-items: center;
display: flex;
}
.seed-extended-action-sheet__closeButton:is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
.seed-extended-action-sheet-item {
background-color: var(--seed-color-bg-neutral-weak);
min-height: 52px;
padding-inline: var(--seed-dimension-x4);
padding-block: var(--seed-dimension-x3_5);
justify-content: flex-start;
align-items: center;
gap: var(--seed-dimension-x3_5);
box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
display: flex;
}
.seed-extended-action-sheet-item:is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
.seed-extended-action-sheet-item:last-child {
box-shadow: none;
}
.seed-extended-action-sheet-item {
--seed-prefix-icon-size: 22px;
}
.seed-extended-action-sheet-item--tone_neutral {
color: var(--seed-color-fg-neutral);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
}
.seed-extended-action-sheet-item--tone_critical {
color: var(--seed-color-fg-critical);
--seed-prefix-icon-color: var(--seed-color-fg-critical);
}
.seed-extended-fab {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
white-space: nowrap;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-family: inherit;
text-decoration: none;
display: inline-flex;
}
.seed-extended-fab:is(:focus, [data-focus]) {
outline: none;
}
.seed-extended-fab:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-extended-fab {
border-radius: var(--seed-radius-full);
box-shadow: 0 2px 6px #00000026;
}
.seed-extended-fab--variant_neutralSolid {
background: var(--seed-color-bg-neutral-inverted);
color: var(--seed-color-fg-neutral-inverted);
}
.seed-extended-fab--variant_neutralSolid:is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-inverted-pressed);
}
.seed-extended-fab--variant_neutralSolid {
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
}
.seed-extended-fab--variant_layerFloating {
background: var(--seed-color-bg-layer-floating);
color: var(--seed-color-fg-neutral);
}
.seed-extended-fab--variant_layerFloating:is(:active, [data-active]) {
background: var(--seed-color-bg-layer-floating-pressed);
}
.seed-extended-fab--variant_layerFloating {
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
}
.seed-extended-fab--size_small {
padding-inline: var(--seed-dimension-x3_5);
padding-block: var(--seed-dimension-x2_5);
gap: var(--seed-dimension-x1);
min-height: 40px;
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
--seed-prefix-icon-size: 16px;
}
.seed-extended-fab--size_medium {
padding-inline: var(--seed-dimension-x4);
padding-block: var(--seed-dimension-x3);
gap: var(--seed-dimension-x1);
min-height: 48px;
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-bold);
--seed-prefix-icon-size: 16px;
}
.seed-fab {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
justify-content: center;
align-items: center;
font-family: inherit;
text-decoration: none;
display: inline-flex;
}
.seed-fab:is(:focus, [data-focus]) {
outline: none;
}
.seed-fab:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-fab {
background: var(--seed-color-bg-layer-floating);
border-radius: var(--seed-radius-full);
--seed-icon-size: 22px;
--seed-icon-color: var(--seed-color-fg-neutral);
width: 44px;
height: 44px;
box-shadow: 0 2px 6px #00000026;
}
.seed-fab:is(:active, [data-active]) {
background: var(--seed-color-bg-layer-floating-pressed);
}
.seed-field__root {
gap: var(--seed-dimension-x2);
flex-direction: column;
width: 100%;
display: flex;
}
.seed-field__header {
padding-left: var(--seed-dimension-x0_5);
padding-right: var(--seed-dimension-x0_5);
justify-content: space-between;
align-items: center;
gap: var(--seed-dimension-x2_5);
display: flex;
}
.seed-field__footer {
padding-left: var(--seed-dimension-x0_5);
padding-right: var(--seed-dimension-x0_5);
align-items: flex-start;
gap: var(--seed-dimension-x2);
display: flex;
}
.seed-field__description {
color: var(--seed-color-fg-neutral-subtle);
font-weight: var(--seed-font-weight-regular);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
--seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
--seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
display: flex;
}
.seed-field__errorMessage {
color: var(--seed-color-fg-critical);
font-weight: var(--seed-font-weight-regular);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-prefix-icon-color: var(--seed-color-fg-critical);
--seed-prefix-icon-margin-right: var(--seed-dimension-x1_5);
--seed-prefix-icon-margin-top: calc((var(--seed-line-height-t4) - var(--seed-dimension-x4)) / 2);
display: flex;
}
.seed-field__characterCountArea {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
margin-left: auto;
}
.seed-field__characterCount {
color: var(--seed-color-fg-neutral);
font-weight: var(--seed-font-weight-regular);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-field__characterCount[data-empty]:not(:is(:invalid, [data-invalid])) {
color: var(--seed-color-fg-neutral-subtle);
}
.seed-field__characterCount:is(:invalid, [data-invalid]) {
color: var(--seed-color-fg-critical);
}
.seed-field__maxCharacterCount {
color: var(--seed-color-fg-neutral-subtle);
font-weight: var(--seed-font-weight-regular);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-field__maxCharacterCount:is(:invalid, [data-invalid]) {
color: var(--seed-color-fg-critical);
}
.seed-field-label__root {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-field-label__indicatorText {
vertical-align: bottom;
padding-left: clamp(calc(4px * var(--seed-font-size-limit-min)), .25rem, calc(4px * var(--seed-font-size-limit-max)));
color: var(--seed-color-fg-neutral-subtle);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
display: inline;
}
.seed-field-label__indicatorIcon {
vertical-align: top;
width: clamp(calc(6px * var(--seed-font-size-limit-min)), .375rem, calc(6px * var(--seed-font-size-limit-max)));
height: clamp(calc(6px * var(--seed-font-size-limit-min)), .375rem, calc(6px * var(--seed-font-size-limit-max)));
margin-top: clamp(calc(4px * var(--seed-font-size-limit-min)), .25rem, calc(4px * var(--seed-font-size-limit-max)));
margin-left: clamp(calc(2px * var(--seed-font-size-limit-min)), .125rem, calc(2px * var(--seed-font-size-limit-max)));
color: var(--seed-color-fg-critical);
display: inline;
}
.seed-field-label__root--weight_medium {
font-weight: var(--seed-font-weight-medium);
}
.seed-field-label__root--weight_bold {
font-weight: var(--seed-font-weight-bold);
}
.seed-attachment-input__root {
gap: var(--seed-dimension-x2);
margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
margin-right: calc(var(--seed-attachment-input-extend-x) * -1);
flex-direction: column;
display: flex;
}
.seed-attachment-input__dropzone {
justify-content: center;
align-items: center;
gap: var(--seed-dimension-x2);
border: 1px dashed var(--seed-color-palette-gray-500);
border-radius: var(--seed-radius-r3);
height: 120px;
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
margin-left: var(--seed-attachment-input-extend-x);
margin-right: var(--seed-attachment-input-extend-x);
flex-direction: column;
transition: border-color .2s;
display: flex;
}
.seed-attachment-input__dropzone[data-dragging-over] {
border-style: solid;
border-color: var(--seed-color-stroke-neutral-solid);
}
.seed-attachment-input__dropzone:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-attachment-input__dropzoneLabel {
color: var(--seed-color-fg-neutral-subtle);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-font-size-t4);
font-weight: var(--seed-font-weight-medium);
text-align: center;
}
.seed-attachment-input__dropzoneLabel:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-attachment-input__container {
gap: var(--seed-dimension-x2);
padding-top: var(--seed-dimension-x1);
margin-top: calc(var(--seed-dimension-x1) * -1);
padding-left: var(--seed-attachment-input-extend-x);
padding-right: var(--seed-attachment-input-extend-x);
display: flex;
overflow-x: auto;
}
.seed-attachment-input__itemGroup {
gap: var(--seed-dimension-x2);
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.seed-attachment-input-item__root {
isolation: isolate;
justify-content: center;
align-items: center;
gap: var(--seed-dimension-x2_5);
border-radius: var(--seed-radius-r3);
--remove-button-mask-size: var(--seed-dimension-x6);
--remove-button-mask-offset: var(--seed-dimension-x1_5);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
height: 80px;
display: flex;
position: relative;
}
.seed-attachment-input-item__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-attachment-input-item__root:before {
content: "";
border-radius: inherit;
pointer-events: none;
-webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
-webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
-webkit-mask-composite: source-out;
mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
position: absolute;
inset: 0;
transform: translateZ(0);
mask-repeat: no-repeat;
mask-composite: subtract;
}
.seed-attachment-input-item__root[role="button"]:not([aria-grabbed="true"]):not([data-readonly]) {
cursor: grab;
}
.seed-attachment-input-item__root[aria-grabbed="true"] {
--remove-button-mask-size: 0px;
--remove-button-mask-offset: 0px;
}
.seed-attachment-input-item__image {
object-fit: cover;
border-radius: inherit;
width: 100%;
height: 100%;
-webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
-webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
-webkit-mask-composite: source-out;
mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
transform: translateZ(0);
mask-repeat: no-repeat;
mask-composite: subtract;
}
.seed-attachment-input-item__thumbnail {
width: var(--seed-dimension-x12);
height: var(--seed-dimension-x12);
background-color: var(--seed-color-bg-neutral-weak);
border-radius: var(--seed-radius-r2);
--seed-icon-size: var(--seed-dimension-x6);
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.seed-attachment-input-item__metadata {
flex-direction: column;
flex-grow: 1;
width: 100%;
display: flex;
}
.seed-attachment-input-item__name {
word-break: break-all;
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-fg-neutral);
overflow: hidden;
}
.seed-attachment-input-item__size {
font-size: var(--seed-font-size-t1);
line-height: var(--seed-line-height-t1);
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral-subtle);
}
.seed-attachment-input-item__backdrop {
border-radius: inherit;
-webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
-webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
-webkit-mask-composite: source-out;
mask-image: linear-gradient(#000, #000), url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
inset: 0;
transform: translateZ(0);
mask-repeat: no-repeat;
mask-composite: subtract;
}
.seed-attachment-input-item__actionButton {
text-align: center;
width: 100%;
height: 100%;
font: inherit;
cursor: pointer;
border-radius: inherit;
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
background: none;
border: none;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
display: flex;
}
.seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-attachment-input-item__actionButton {
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
font-weight: var(--seed-font-weight-medium);
gap: var(--seed-dimension-x1);
--seed-icon-size: var(--seed-dimension-x6);
}
.seed-attachment-input-item__removeButton {
top: calc(var(--seed-dimension-x1) * -1);
right: calc(var(--seed-dimension-x1) * -1);
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
background-color: var(--seed-color-bg-layer-default);
border-radius: var(--seed-radius-full);
cursor: pointer;
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
border: none;
justify-content: center;
align-items: center;
padding: 0;
display: flex;
position: absolute;
}
.seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-attachment-input-item__removeButton {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
--seed-icon-size: var(--seed-dimension-x2_5);
--seed-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-layer-default-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
background-color: var(--seed-color-bg-layer-default-pressed);
}
}
.seed-attachment-input-item__removeButton:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
--seed-icon-color: var(--seed-color-fg-disabled);
}
[aria-grabbed="true"] .seed-attachment-input-item__removeButton {
display: none;
}
.seed-attachment-input-item__root--type_general {
width: 160px;
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
}
.seed-attachment-input-item__root--type_general:before {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
}
.seed-attachment-input-item__thumbnail--type_general[data-has-overlay] {
display: none;
}
.seed-attachment-input-item__thumbnail--type_general[data-readonly], [aria-grabbed="true"] .seed-attachment-input-item__thumbnail--type_general {
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-attachment-input-item__metadata--type_general[data-has-overlay] {
display: none;
}
.seed-attachment-input-item__name--type_general[data-readonly], [aria-grabbed="true"] .seed-attachment-input-item__name--type_general, .seed-attachment-input-item__size--type_general[data-readonly], [aria-grabbed="true"] .seed-attachment-input-item__size--type_general {
color: var(--seed-color-fg-disabled);
}
.seed-attachment-input-item__actionButton--type_general {
color: var(--seed-color-fg-neutral-subtle);
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
}
.seed-attachment-input-item__root--type_image {
width: 80px;
transition: opacity .2s;
}
.seed-attachment-input-item__root--type_image:before {
z-index: 1;
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
}
.seed-attachment-input-item__root--type_image[data-readonly], .seed-attachment-input-item__root--type_image[aria-grabbed="true"] {
opacity: .5;
}
.seed-attachment-input-item__thumbnail--type_image, .seed-attachment-input-item__metadata--type_image {
display: none;
}
.seed-attachment-input-item__badge--type_image {
height: var(--seed-dimension-x6);
padding-left: var(--seed-dimension-x1);
padding-right: var(--seed-dimension-x1);
background-color: var(--seed-color-bg-overlay);
border-radius: 0 0 var(--seed-radius-r3) var(--seed-radius-r3);
justify-content: center;
align-items: center;
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.seed-attachment-input-item__badgeLabel--type_image {
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-palette-static-white);
overflow: hidden;
}
.seed-attachment-input-item__backdrop--type_image {
background: var(--seed-color-bg-overlay);
}
.seed-attachment-input-item__actionButton--type_image {
color: var(--seed-color-palette-static-white);
--seed-icon-color: var(--seed-color-palette-static-white);
}
.seed-attachment-input-trigger__root {
justify-content: center;
align-items: center;
gap: var(--seed-dimension-x1);
width: 80px;
height: 80px;
font: inherit;
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
cursor: pointer;
border-radius: var(--seed-radius-r3);
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
background-color: #0000;
border: none;
flex-direction: column;
flex-shrink: 0;
padding: 0;
display: flex;
}
.seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
@media (hover: hover) and (pointer: fine) {
.seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
.seed-attachment-input-trigger__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-attachment-input-trigger__icon {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
color: var(--seed-color-fg-neutral-subtle);
flex-shrink: 0;
}
.seed-attachment-input-trigger__icon:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-attachment-input-trigger__itemCountArea {
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
}
.seed-attachment-input-trigger__itemCount {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
font-weight: var(--seed-font-weight-regular);
}
.seed-attachment-input-trigger__itemCount[data-empty] {
color: var(--seed-color-fg-neutral-subtle);
}
.seed-attachment-input-trigger__itemCount:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-attachment-input-trigger__maxItemCount {
color: var(--seed-color-fg-neutral-subtle);
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
font-weight: var(--seed-font-weight-regular);
}
.seed-attachment-input-trigger__maxItemCount:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-floating-action-button__root {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
border: none;
justify-content: center;
align-items: center;
font-family: inherit;
text-decoration: none;
display: inline-flex;
}
.seed-floating-action-button__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-floating-action-button__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-floating-action-button__root {
background: var(--seed-color-bg-brand-solid);
border-radius: var(--seed-radius-full);
box-shadow: var(--seed-shadow-s3);
color: var(--seed-color-palette-static-white);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-bold);
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
position: relative;
overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
.seed-floating-action-button__root:is(:hover, [data-hover]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-floating-action-button__root:is(:active, [data-active]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
.seed-floating-action-button__icon {
color: var(--seed-color-palette-static-white);
transition: margin-right var(--seed-duration-d4) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing);
flex-shrink: 0;
justify-content: center;
align-items: center;
display: inline-flex;
}
.seed-floating-action-button__label {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
}
.seed-floating-action-button__root--extended_true {
padding-left: var(--seed-dimension-x4_5);
padding-right: var(--seed-dimension-x4_5);
width: fit-content;
max-width: 999px;
height: 48px;
}
.seed-floating-action-button__icon--extended_true {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
margin-right: var(--seed-dimension-x1);
transition: none;
}
.seed-floating-action-button__root--extended_false {
min-width: 56px;
max-width: 56px;
height: 56px;
padding: 0;
}
.seed-floating-action-button__icon--extended_false {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.seed-floating-action-button__label--extended_false {
opacity: 0;
}
.seed-footer__linkText {
cursor: pointer;
align-items: center;
gap: var(--seed-dimension-x1);
transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
text-decoration: none;
display: inline-flex;
}
.seed-footer__linkText--size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-fg-neutral);
--seed-suffix-icon-size: 14px;
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-footer__linkText--size_large:is(:hover, [data-hover]) {
color: var(--seed-color-fg-neutral-subtle);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-footer__linkText--size_large:is(:active, [data-active]) {
color: var(--seed-color-fg-neutral-subtle);
}
}
.seed-footer__linkText--size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-fg-neutral-muted);
--seed-suffix-icon-size: 12px;
--seed-suffix-icon-color: var(--seed-color-fg-neutral-muted);
}
@media (hover: hover) and (pointer: fine) {
.seed-footer__linkText--size_medium:is(:hover, [data-hover]) {
color: var(--seed-color-fg-neutral);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-footer__linkText--size_medium:is(:active, [data-active]) {
color: var(--seed-color-fg-neutral);
}
}
.seed-help-bubble__positioner {
--popover-z-index: 99;
z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
max-width: var(--seed-popover-available-width, none);
}
.seed-help-bubble__content {
background: var(--seed-color-bg-neutral-inverted);
padding-left: var(--seed-dimension-x3);
padding-right: var(--seed-dimension-x3);
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
border-radius: var(--seed-radius-r3);
--seed-box-max-width-base: initial;
--seed-box-max-width-sm: var(--seed-box-max-width-base);
--seed-box-max-width-md: var(--seed-box-max-width-sm);
--seed-box-max-width-lg: var(--seed-box-max-width-md);
--seed-box-max-width-xl: var(--seed-box-max-width-lg);
--seed-box-max-width: var(--seed-box-max-width-base);
max-width: var(--seed-box-max-width);
align-items: flex-start;
display: flex;
}
.seed-help-bubble__content:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d4);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: .9;
}
.seed-help-bubble__content:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-easing);
animation-duration: var(--seed-duration-d4);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-help-bubble__content[data-instant] {
animation-duration: 0s;
}
.seed-help-bubble__content:is([hidden], [data-hidden]) {
display: none !important;
}
.seed-help-bubble__arrow {
width: 12px;
height: 12px;
}
.seed-help-bubble__arrowTip {
fill: var(--seed-color-bg-neutral-inverted);
width: 12px;
height: 8px;
display: block;
}
.seed-help-bubble__body {
gap: var(--seed-dimension-x0_5);
word-break: keep-all;
overflow-wrap: break-word;
flex-direction: column;
min-width: 0;
display: flex;
}
.seed-help-bubble__title {
color: var(--seed-color-fg-neutral-inverted);
font-size: var(--seed-font-size-t3);
font-weight: var(--seed-font-weight-bold);
line-height: var(--seed-line-height-t3);
white-space: pre-wrap;
}
.seed-help-bubble__description {
color: var(--seed-color-fg-neutral-inverted);
font-size: var(--seed-font-size-t3);
font-weight: var(--seed-font-weight-regular);
line-height: var(--seed-line-height-t3);
white-space: pre-wrap;
}
.seed-help-bubble__closeButton {
cursor: pointer;
padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
color: var(--seed-color-fg-neutral-inverted);
--seed-icon-size: var(--seed-dimension-x3_5);
--seed-icon-color: var(--seed-color-fg-neutral-inverted);
border-radius: var(--seed-radius-r3);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
background: none;
border: none;
justify-content: center;
align-items: center;
display: flex;
}
.seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-identity-placeholder__root {
box-sizing: border-box;
vertical-align: top;
background-color: var(--seed-color-palette-gray-500);
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: inline-flex;
position: relative;
}
.seed-identity-placeholder__image {
object-fit: cover;
width: 100%;
height: 100%;
fill: var(--seed-color-palette-static-white-alpha-800);
display: block;
overflow: hidden;
}
.seed-image-frame__root {
border-radius: inherit;
position: relative;
overflow: hidden;
}
.seed-image-frame__content {
object-fit: cover;
border-radius: inherit;
width: 100%;
height: 100%;
display: block;
}
.seed-image-frame__content:not([data-loading-state="loaded"]) {
display: none;
}
.seed-image-frame__fallback {
width: 100%;
height: 100%;
}
.seed-image-frame__fallback[data-loading-state="loaded"] {
display: none;
}
.seed-image-frame__root--stroke_true:after {
content: "";
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
position: absolute;
inset: 0;
}
.seed-image-frame-indicator {
box-sizing: border-box;
background-color: var(--seed-color-palette-static-black-alpha-800);
color: var(--seed-color-palette-static-white);
border-radius: var(--seed-radius-full);
padding-left: var(--seed-dimension-x1_5);
padding-right: var(--seed-dimension-x1_5);
padding-top: var(--seed-dimension-x0_5);
padding-bottom: var(--seed-dimension-x0_5);
font-size: var(--seed-font-size-t1);
line-height: var(--seed-line-height-t1);
font-weight: var(--seed-font-weight-medium);
justify-content: center;
align-items: center;
display: inline-flex;
}
.seed-image-frame-icon {
color: var(--seed-color-palette-static-white);
justify-content: center;
align-items: center;
display: inline-flex;
}
.seed-image-frame-reaction-button__root {
box-sizing: border-box;
cursor: pointer;
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
background: none;
border: none;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
position: relative;
}
.seed-image-frame-reaction-button__root:before {
content: "";
top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
position: absolute;
}
.seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
outline: none;
}
.seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
border-radius: var(--seed-radius-r1);
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-image-frame-reaction-button__fillIcon {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
pointer-events: none;
margin: auto;
position: absolute;
inset: 0;
}
.seed-image-frame-reaction-button__lineIcon {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
color: var(--seed-color-palette-static-white);
pointer-events: none;
margin: auto;
position: absolute;
inset: 0;
}
.seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
color: var(--seed-color-bg-transparent);
}
.seed-inline-banner__root {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: start;
width: 100%;
min-height: var(--seed-dimension-x10);
padding-inline: var(--seed-dimension-x4);
padding-block: var(--seed-dimension-x2_5);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-prefix-icon-margin-right: var(--seed-dimension-x2);
--seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
--seed-suffix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-margin-left: var(--seed-dimension-x4);
--seed-suffix-icon-align-self: center;
border: none;
align-items: flex-start;
font-family: inherit;
display: flex;
}
.seed-inline-banner__root:is(button) {
cursor: pointer;
}
.seed-inline-banner__content {
margin-inline-end: auto;
}
.seed-inline-banner__title {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-bold);
flex-shrink: 0;
}
.seed-inline-banner__title:after {
content: " ";
white-space: pre;
}
.seed-inline-banner__description {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
}
.seed-inline-banner__link {
cursor: pointer;
margin-block: auto;
margin-left: var(--seed-dimension-x4);
font-family: inherit;
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
font-weight: var(--seed-font-weight-regular);
text-underline-offset: 2px;
background-color: #0000;
border: none;
flex-grow: 0;
flex-shrink: 0;
align-items: center;
text-decoration: underline;
display: flex;
}
.seed-inline-banner__closeButton {
width: var(--seed-dimension-x10);
height: var(--seed-dimension-x10);
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
--seed-suffix-icon-margin-left: initial;
cursor: pointer;
background-color: #0000;
border: none;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
align-self: center;
align-items: center;
padding: 0;
display: flex;
}
.seed-inline-banner__root--variant_neutralWeak {
background-color: var(--seed-color-bg-neutral-weak);
color: var(--seed-color-fg-neutral);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
.seed-inline-banner__title--variant_neutralWeak, .seed-inline-banner__description--variant_neutralWeak, .seed-inline-banner__link--variant_neutralWeak {
color: var(--seed-color-fg-neutral);
}
.seed-inline-banner__root--variant_positiveWeak {
background-color: var(--seed-color-bg-positive-weak);
color: var(--seed-color-fg-positive-contrast);
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
}
.seed-inline-banner__title--variant_positiveWeak, .seed-inline-banner__description--variant_positiveWeak, .seed-inline-banner__link--variant_positiveWeak {
color: var(--seed-color-fg-positive-contrast);
}
.seed-inline-banner__root--variant_informativeWeak {
background-color: var(--seed-color-bg-informative-weak);
color: var(--seed-color-fg-informative-contrast);
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
}
.seed-inline-banner__title--variant_informativeWeak, .seed-inline-banner__description--variant_informativeWeak, .seed-inline-banner__link--variant_informativeWeak {
color: var(--seed-color-fg-informative-contrast);
}
.seed-inline-banner__root--variant_warningWeak {
background-color: var(--seed-color-bg-warning-weak);
color: var(--seed-color-fg-warning-contrast);
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
}
.seed-inline-banner__title--variant_warningWeak, .seed-inline-banner__description--variant_warningWeak, .seed-inline-banner__link--variant_warningWeak {
color: var(--seed-color-fg-warning-contrast);
}
.seed-inline-banner__root--variant_warningSolid {
background-color: var(--seed-color-bg-warning-solid);
color: var(--seed-color-fg-neutral);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
.seed-inline-banner__title--variant_warningSolid, .seed-inline-banner__description--variant_warningSolid, .seed-inline-banner__link--variant_warningSolid {
color: var(--seed-color-fg-neutral);
}
.seed-inline-banner__root--variant_criticalWeak {
background-color: var(--seed-color-bg-critical-weak);
color: var(--seed-color-fg-critical-contrast);
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
}
.seed-inline-banner__title--variant_criticalWeak, .seed-inline-banner__description--variant_criticalWeak, .seed-inline-banner__link--variant_criticalWeak {
color: var(--seed-color-fg-critical-contrast);
}
.seed-inline-banner__root--variant_criticalSolid {
background-color: var(--seed-color-bg-critical-solid);
color: var(--seed-color-palette-static-white);
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
}
.seed-inline-banner__title--variant_criticalSolid, .seed-inline-banner__description--variant_criticalSolid, .seed-inline-banner__link--variant_criticalSolid {
color: var(--seed-color-palette-static-white);
}
.seed-input-button__root {
box-sizing: border-box;
isolation: isolate;
align-items: center;
width: 100%;
display: flex;
position: relative;
}
.seed-input-button__button {
z-index: -1;
cursor: pointer;
background-color: var(--seed-color-bg-transparent);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
border: none;
padding: 0;
position: absolute;
inset: 0;
}
.seed-input-button__button:after {
content: "";
border-radius: inherit;
transition: border-color .1s var(--seed-timing-function-easing);
pointer-events: none;
border: 2px solid #0000;
position: absolute;
inset: 0;
}
.seed-input-button__button[data-disabled] {
cursor: not-allowed;
background-color: var(--seed-color-bg-disabled);
}
@media (hover: hover) and (pointer: fine) {
.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
.seed-input-button__button[data-readonly]:not([data-disabled]) {
cursor: default;
background-color: var(--seed-color-bg-disabled);
}
.seed-input-button__button {
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
}
.seed-input-button__button:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-input-button__button:is(:invalid, [data-invalid]):after {
border-width: 2px;
border-color: var(--seed-color-stroke-critical-solid);
}
.seed-input-button__value {
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral);
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
flex-grow: 1;
overflow: hidden;
}
.seed-input-button__value[data-disabled] {
color: var(--seed-color-fg-disabled);
}
.seed-input-button__value[data-readonly]:not([data-disabled]) {
color: var(--seed-color-fg-neutral);
}
.seed-input-button__placeholder {
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-placeholder);
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
flex-grow: 1;
overflow: hidden;
}
.seed-input-button__placeholder[data-disabled] {
color: var(--seed-color-fg-disabled);
}
.seed-input-button__placeholder[data-readonly]:not([data-disabled]) {
color: var(--seed-color-fg-placeholder);
}
.seed-input-button__prefixText {
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral-subtle);
pointer-events: none;
}
.seed-input-button__prefixText[data-disabled] {
color: var(--seed-color-fg-disabled);
}
.seed-input-button__prefixIcon {
color: var(--seed-color-fg-neutral-muted);
pointer-events: none;
flex-shrink: 0;
}
.seed-input-button__prefixIcon[data-disabled] {
color: var(--seed-color-fg-disabled);
}
.seed-input-button__suffixText {
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral-subtle);
pointer-events: none;
}
.seed-input-button__suffixText[data-disabled] {
color: var(--seed-color-fg-disabled);
}
.seed-input-button__suffixIcon {
color: var(--seed-color-fg-neutral-muted);
pointer-events: none;
flex-shrink: 0;
}
.seed-input-button__suffixIcon[data-disabled] {
color: var(--seed-color-fg-disabled);
}
.seed-input-button__clearButton {
cursor: pointer;
border-radius: var(--seed-radius-full);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
background-color: #0000;
border: none;
padding: 0;
}
.seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-input-button__clearButton {
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
}
.seed-input-button__root--size_large {
height: var(--seed-dimension-x13);
gap: var(--seed-dimension-x2_5);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
}
.seed-input-button__button--size_large {
border-radius: var(--seed-radius-r3);
}
.seed-input-button__value--size_large, .seed-input-button__placeholder--size_large, .seed-input-button__prefixText--size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-input-button__prefixIcon--size_large {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-input-button__suffixText--size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-input-button__suffixIcon--size_large {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-input-button__clearButton--size_large {
--seed-icon-size: 22px;
}
.seed-input-button__root--size_medium {
height: var(--seed-dimension-x10);
gap: var(--seed-dimension-x2);
padding-left: var(--seed-dimension-x3_5);
padding-right: var(--seed-dimension-x3_5);
}
.seed-input-button__button--size_medium {
border-radius: var(--seed-radius-r2);
}
.seed-input-button__value--size_medium, .seed-input-button__placeholder--size_medium, .seed-input-button__prefixText--size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-input-button__prefixIcon--size_medium {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
.seed-input-button__suffixText--size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-input-button__suffixIcon--size_medium {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
.seed-input-button__clearButton--size_medium {
--seed-icon-size: var(--seed-dimension-x4_5);
}
.seed-input-button__root--size_responsive {
height: var(--seed-dimension-x13);
gap: var(--seed-dimension-x2_5);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
}
@media (width >= 1280px) {
.seed-input-button__root--size_responsive {
height: var(--seed-dimension-x10);
gap: var(--seed-dimension-x2);
padding-left: var(--seed-dimension-x3_5);
padding-right: var(--seed-dimension-x3_5);
}
}
.seed-input-button__button--size_responsive {
border-radius: var(--seed-radius-r3);
}
@media (width >= 1280px) {
.seed-input-button__button--size_responsive {
border-radius: var(--seed-radius-r2);
}
}
.seed-input-button__value--size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-input-button__value--size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-input-button__placeholder--size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-input-button__placeholder--size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-input-button__prefixText--size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-input-button__prefixText--size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-input-button__prefixIcon--size_responsive {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
@media (width >= 1280px) {
.seed-input-button__prefixIcon--size_responsive {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
}
.seed-input-button__suffixText--size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-input-button__suffixText--size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-input-button__suffixIcon--size_responsive {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
@media (width >= 1280px) {
.seed-input-button__suffixIcon--size_responsive {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
}
.seed-input-button__clearButton--size_responsive {
--seed-icon-size: 22px;
}
@media (width >= 1280px) {
.seed-input-button__clearButton--size_responsive {
--seed-icon-size: var(--seed-dimension-x4_5);
}
}
.seed-layout__root {
height: 100vh;
display: flex;
overflow-y: auto;
}
.seed-layout__content {
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (width >= 768px) {
.seed-layout__content--density_low, .seed-layout__content--density_medium {
max-width: 720px;
}
}
@media (width >= 1280px) {
.seed-layout__content--density_medium {
max-width: 1040px;
}
}
.seed-link-content {
cursor: pointer;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: var(--seed-box-color);
--seed-suffix-icon-color: var(--seed-box-color);
background-color: #0000;
border: none;
outline: none;
align-items: center;
padding-block: 0;
padding-inline: 0;
font-family: inherit;
display: inline-flex;
}
.seed-link-content--weight_bold {
font-weight: var(--seed-font-weight-bold);
}
.seed-link-content--weight_regular {
font-weight: var(--seed-font-weight-regular);
}
.seed-link-content--size_t6 {
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
gap: var(--seed-dimension-x0_5);
--seed-suffix-icon-size: var(--seed-dimension-x4);
}
.seed-link-content--size_t5 {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
gap: var(--seed-dimension-x0_5);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
}
.seed-link-content--size_t4 {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
gap: var(--seed-dimension-x0_5);
--seed-suffix-icon-size: var(--seed-dimension-x3);
}
.seed-list-header {
align-items: center;
gap: var(--seed-dimension-x2_5);
box-sizing: border-box;
width: 100%;
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
justify-content: space-between;
display: flex;
}
.seed-list-header--variant_mediumWeak {
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-fg-neutral-subtle);
}
.seed-list-header--variant_boldSolid {
font-weight: var(--seed-font-weight-bold);
color: var(--seed-color-fg-neutral);
}
.seed-list-item__root {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
isolation: isolate;
width: 100%;
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
padding-top: var(--seed-dimension-x3);
padding-bottom: var(--seed-dimension-x3);
--seed-box-align-items: center;
align-items: var(--seed-box-align-items);
border: none;
font-family: inherit;
display: flex;
position: relative;
}
.seed-list-item__prefix {
--seed-box-padding-right-base: var(--seed-dimension-x3);
--seed-box-padding-right-sm: var(--seed-box-padding-right-base);
--seed-box-padding-right-md: var(--seed-box-padding-right-sm);
--seed-box-padding-right-lg: var(--seed-box-padding-right-md);
--seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
--seed-box-padding-right: var(--seed-box-padding-right-base);
padding-right: var(--seed-box-padding-right);
--seed-focus-ring: none;
--seed-icon-size: 22px;
--seed-icon-color: var(--seed-color-fg-neutral);
flex-shrink: 0;
align-items: center;
display: inline-flex;
}
.seed-list-item__prefix:is(:disabled, [disabled], [data-disabled]) {
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-list-item__suffix {
--seed-box-position: initial;
position: var(--seed-box-position);
--seed-box-gap-base: var(--seed-dimension-x1);
--seed-box-gap-sm: var(--seed-box-gap-base);
--seed-box-gap-md: var(--seed-box-gap-sm);
--seed-box-gap-lg: var(--seed-box-gap-md);
--seed-box-gap-xl: var(--seed-box-gap-lg);
--seed-box-gap: var(--seed-box-gap-base);
align-items: center;
gap: var(--seed-box-gap);
--seed-focus-ring: none;
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral-subtle);
--seed-icon-size: 18px;
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
flex-shrink: 0;
display: inline-flex;
}
.seed-list-item__suffix:is(:disabled, [disabled], [data-disabled]) {
--seed-icon-color: var(--seed-color-fg-disabled);
}
.seed-list-item__content {
box-sizing: border-box;
text-align: start;
--seed-box-gap-base: var(--seed-dimension-x0_5);
--seed-box-gap-sm: var(--seed-box-gap-base);
--seed-box-gap-md: var(--seed-box-gap-sm);
--seed-box-gap-lg: var(--seed-box-gap-md);
--seed-box-gap-xl: var(--seed-box-gap-lg);
--seed-box-gap: var(--seed-box-gap-base);
align-items: flex-start;
gap: var(--seed-box-gap);
--seed-box-padding-right-base: var(--seed-dimension-x2_5);
--seed-box-padding-right-sm: var(--seed-box-padding-right-base);
--seed-box-padding-right-md: var(--seed-box-padding-right-sm);
--seed-box-padding-right-lg: var(--seed-box-padding-right-md);
--seed-box-padding-right-xl: var(--seed-box-padding-right-lg);
--seed-box-padding-right: var(--seed-box-padding-right-base);
padding: 0 var(--seed-box-padding-right) 0 0;
background-color: #0000;
border: none;
flex-direction: column;
flex-grow: 1;
font-family: inherit;
text-decoration: none;
display: inline-flex;
}
.seed-list-item__content:after {
content: "";
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
position: absolute;
inset: 0;
}
.seed-list-item__content:is(:focus, [data-focus]) {
outline: none;
}
.seed-list-item__content:is(:focus-visible, [data-focus-visible]):after {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-list-item__content:before {
content: "";
z-index: -1;
transition-property: background-color, left, right, border-radius;
transition-duration: var(--seed-duration-color-transition);
transition-timing-function: var(--seed-timing-function-easing);
position: absolute;
inset: 0;
}
@media (hover: hover) and (pointer: fine) {
.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x1_5);
right: var(--seed-dimension-x1_5);
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x1_5);
right: var(--seed-dimension-x1_5);
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
}
}
@media (hover: hover) and (pointer: fine) {
.seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x1_5);
right: var(--seed-dimension-x1_5);
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x1_5);
right: var(--seed-dimension-x1_5);
border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
}
}
.seed-list-item__title {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral);
flex-shrink: 0;
}
.seed-list-item__title:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-list-item__detail {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral-subtle);
}
.seed-list-item__detail:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-list-item__content--highlighted_true:before {
background-color: var(--seed-color-bg-brand-weak);
}
@media (hover: hover) and (pointer: fine) {
.seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
background-color: var(--seed-color-bg-brand-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
background-color: var(--seed-color-bg-brand-weak-pressed);
}
}
@media (hover: hover) and (pointer: fine) {
.seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
background-color: var(--seed-color-bg-brand-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
background-color: var(--seed-color-bg-brand-weak-pressed);
}
}
.seed-manner-temp {
justify-content: flex-start;
align-items: center;
gap: var(--seed-dimension-x1);
box-sizing: border-box;
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-bold);
--seed-suffix-icon-size: var(--seed-dimension-x8);
--seed-suffix-icon-margin-left: calc(var(--seed-dimension-x1) * -1);
--seed-suffix-icon-margin-right: calc(var(--seed-dimension-x1) * -1);
--seed-suffix-icon-margin-top: calc(var(--seed-dimension-x1) * -1);
--seed-suffix-icon-margin-bottom: calc(var(--seed-dimension-x1) * -1);
display: inline-flex;
}
.seed-manner-temp--level_l1 {
color: var(--seed-color-manner-temp-l1-text);
}
.seed-manner-temp--level_l2 {
color: var(--seed-color-manner-temp-l2-text);
}
.seed-manner-temp--level_l3 {
color: var(--seed-color-manner-temp-l3-text);
}
.seed-manner-temp--level_l4 {
color: var(--seed-color-manner-temp-l4-text);
}
.seed-manner-temp--level_l5 {
color: var(--seed-color-manner-temp-l5-text);
}
.seed-manner-temp--level_l6 {
color: var(--seed-color-manner-temp-l6-text);
}
.seed-manner-temp--level_l7 {
color: var(--seed-color-manner-temp-l7-text);
}
.seed-manner-temp--level_l8 {
color: var(--seed-color-manner-temp-l8-text);
}
.seed-manner-temp--level_l9 {
color: var(--seed-color-manner-temp-l9-text);
}
.seed-manner-temp--level_l10 {
color: var(--seed-color-manner-temp-l10-text);
}
.seed-manner-temp-badge {
box-sizing: border-box;
text-transform: none;
text-align: start;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: var(--seed-radius-full);
min-height: var(--seed-dimension-x5);
padding-left: var(--seed-dimension-x1_5);
padding-right: var(--seed-dimension-x1_5);
padding-top: var(--seed-dimension-x0_5);
padding-bottom: var(--seed-dimension-x0_5);
font-size: var(--seed-font-size-t1);
line-height: var(--seed-line-height-t1);
font-weight: var(--seed-font-weight-bold);
justify-content: center;
align-items: center;
text-decoration: none;
display: inline-flex;
}
.seed-manner-temp-badge--level_l1 {
background-color: var(--seed-color-manner-temp-l1-bg);
color: var(--seed-color-manner-temp-l1-text);
}
.seed-manner-temp-badge--level_l2 {
background-color: var(--seed-color-manner-temp-l2-bg);
color: var(--seed-color-manner-temp-l2-text);
}
.seed-manner-temp-badge--level_l3 {
background-color: var(--seed-color-manner-temp-l3-bg);
color: var(--seed-color-manner-temp-l3-text);
}
.seed-manner-temp-badge--level_l4 {
background-color: var(--seed-color-manner-temp-l4-bg);
color: var(--seed-color-manner-temp-l4-text);
}
.seed-manner-temp-badge--level_l5 {
background-color: var(--seed-color-manner-temp-l5-bg);
color: var(--seed-color-manner-temp-l5-text);
}
.seed-manner-temp-badge--level_l6 {
background-color: var(--seed-color-manner-temp-l6-bg);
color: var(--seed-color-manner-temp-l6-text);
}
.seed-manner-temp-badge--level_l7 {
background-color: var(--seed-color-manner-temp-l7-bg);
color: var(--seed-color-manner-temp-l7-text);
}
.seed-manner-temp-badge--level_l8 {
background-color: var(--seed-color-manner-temp-l8-bg);
color: var(--seed-color-manner-temp-l8-text);
}
.seed-manner-temp-badge--level_l9 {
background-color: var(--seed-color-manner-temp-l9-bg);
color: var(--seed-color-manner-temp-l9-text);
}
.seed-manner-temp-badge--level_l10 {
background-color: var(--seed-color-manner-temp-l10-bg);
color: var(--seed-color-manner-temp-l10-text);
}
.seed-menu__positioner {
--menu-z-index: 99999;
z-index: calc(var(--menu-z-index) + var(--z-index-offset, 0));
outline: none;
}
.seed-menu__content {
border-radius: var(--seed-radius-r5);
background: var(--seed-color-bg-layer-floating);
box-shadow: var(--seed-shadow-s3);
transform-origin: var(--seed-menu-transform-origin);
overflow: hidden;
}
.seed-menu__content:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d3);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: .95;
}
.seed-menu__content:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d2);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: .95;
animation-fill-mode: forwards;
}
.seed-menu__content[data-instant] {
animation-duration: 0s;
}
.seed-menu__content:is([hidden], [data-hidden]) {
display: none !important;
}
.seed-menu__content:is(:focus, [data-focus]) {
outline: none;
}
.seed-menu__scrollArea {
max-height: min(480px, var(--seed-menu-available-height, 480px));
box-sizing: border-box;
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
gap: var(--seed-dimension-x2);
flex-direction: column;
display: flex;
overflow-y: auto;
}
.seed-menu__group {
flex-direction: column;
display: flex;
}
.seed-menu__group + .seed-menu__group:before {
content: "";
margin-left: var(--seed-dimension-x4);
margin-right: var(--seed-dimension-x4);
margin-bottom: var(--seed-dimension-x2);
background-color: var(--seed-color-stroke-neutral-muted);
flex-shrink: 0;
height: 1px;
display: block;
}
.seed-menu__groupLabel {
color: var(--seed-color-fg-neutral-subtle);
}
.seed-menu__content--size_medium {
width: var(--seed-menu-reference-width, 240px);
}
.seed-menu__groupLabel--size_medium {
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
}
.seed-menu__content--size_small {
width: var(--seed-menu-reference-width, 200px);
}
.seed-menu__groupLabel--size_small {
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-regular);
}
.seed-menu__content--size_responsive {
width: var(--seed-menu-reference-width, 240px);
}
@media (width >= 1280px) {
.seed-menu__content--size_responsive {
width: var(--seed-menu-reference-width, 200px);
}
}
.seed-menu__groupLabel--size_responsive {
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
}
@media (width >= 1280px) {
.seed-menu__groupLabel--size_responsive {
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-regular);
}
}
.seed-menu-item__root {
scroll-margin-top: var(--seed-dimension-x2);
scroll-margin-bottom: var(--seed-dimension-x2);
cursor: default;
user-select: none;
color: inherit;
text-align: start;
isolation: isolate;
background: none;
border: none;
outline: none;
align-items: center;
margin: 0;
font-family: inherit;
text-decoration: none;
display: flex;
position: relative;
}
.seed-menu-item__root:before {
content: "";
z-index: -1;
transition-property: background-color, left, right, border-radius;
transition-duration: var(--seed-duration-color-transition);
transition-timing-function: var(--seed-timing-function-easing);
position: absolute;
inset: 0;
}
.seed-menu-item__root:after {
content: "";
top: 0;
right: var(--seed-dimension-x2);
bottom: 0;
left: var(--seed-dimension-x2);
border-radius: var(--seed-radius-r3);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
position: absolute;
}
@media (hover: hover) and (pointer: fine) {
.seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x2);
right: var(--seed-dimension-x2);
border-radius: var(--seed-radius-r3);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
background-color: var(--seed-color-bg-transparent-pressed);
left: var(--seed-dimension-x2);
right: var(--seed-dimension-x2);
border-radius: var(--seed-radius-r3);
}
}
.seed-menu-item__root:is(:focus-visible, [data-focus-visible]):after {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-menu-item__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
}
.seed-menu-item__body {
gap: var(--seed-dimension-x0_5);
flex-direction: column;
flex-grow: 1;
display: flex;
}
.seed-menu-item__label {
font-weight: var(--seed-font-weight-regular);
}
.seed-menu-item__label:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-menu-item__description {
font-weight: var(--seed-font-weight-regular);
color: var(--seed-color-fg-neutral-subtle);
}
.seed-menu-item__description:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-menu-item__root--size_medium {
padding-top: var(--seed-dimension-x3);
padding-bottom: var(--seed-dimension-x3);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
gap: var(--seed-dimension-x3);
--seed-prefix-icon-size: 22px;
--seed-suffix-icon-size: 18px;
}
.seed-menu-item__label--size_medium {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-menu-item__description--size_medium {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
}
.seed-menu-item__root--size_small {
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
gap: var(--seed-dimension-x2);
--seed-prefix-icon-size: 18px;
--seed-suffix-icon-size: 16px;
}
.seed-menu-item__label--size_small {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-menu-item__description--size_small {
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
}
.seed-menu-item__root--size_responsive {
padding-top: var(--seed-dimension-x3);
padding-bottom: var(--seed-dimension-x3);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
gap: var(--seed-dimension-x3);
--seed-prefix-icon-size: 22px;
--seed-suffix-icon-size: 18px;
}
@media (width >= 1280px) {
.seed-menu-item__root--size_responsive {
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
gap: var(--seed-dimension-x2);
--seed-prefix-icon-size: 18px;
--seed-suffix-icon-size: 16px;
}
}
.seed-menu-item__label--size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-menu-item__label--size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-menu-item__description--size_responsive {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
}
@media (width >= 1280px) {
.seed-menu-item__description--size_responsive {
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
}
}
.seed-menu-item__root--tone_neutral {
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
.seed-menu-item__label--tone_neutral {
color: var(--seed-color-fg-neutral);
}
.seed-menu-item__root--tone_critical {
--seed-prefix-icon-color: var(--seed-color-fg-critical);
--seed-suffix-icon-color: var(--seed-color-fg-critical);
}
.seed-menu-item__label--tone_critical {
color: var(--seed-color-fg-critical);
}
.seed-menu-sheet__positioner {
overscroll-behavior-y: none;
--sheet-z-index: 2;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
justify-content: center;
align-items: flex-end;
display: flex;
position: fixed;
inset: 0;
}
.seed-menu-sheet__backdrop {
background: var(--seed-color-bg-overlay);
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
position: fixed;
inset: 0;
}
.seed-menu-sheet__content {
box-sizing: border-box;
word-break: break-all;
z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
background: var(--seed-color-bg-layer-floating);
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
border-top-left-radius: var(--seed-radius-r5);
border-top-right-radius: var(--seed-radius-r5);
outline: none;
flex-direction: column;
flex: 1;
display: flex;
position: relative;
}
.seed-menu-sheet__content:is(:focus, [data-focus]) {
outline: none;
}
.seed-menu-sheet__content[data-drawer] {
touch-action: none;
will-change: transform;
--menu-sheet-header-padding-top: var(--seed-dimension-x6);
}
.seed-menu-sheet__content[data-drawer]:after {
content: "";
background: inherit;
z-index: -1;
height: 200vh;
position: absolute;
top: 100%;
left: 0;
right: 0;
}
.seed-menu-sheet__header {
text-align: center;
align-items: center;
gap: var(--seed-dimension-x1);
padding-bottom: var(--seed-dimension-x4);
flex-direction: column;
display: flex;
}
.seed-menu-sheet__title {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
font-weight: var(--seed-font-weight-bold);
margin: 0;
}
.seed-menu-sheet__description {
color: var(--seed-color-fg-neutral-muted);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-regular);
margin: 0;
}
.seed-menu-sheet__list {
align-items: stretch;
gap: var(--seed-dimension-x2_5);
flex-direction: column;
display: flex;
}
.seed-menu-sheet__group {
border-radius: var(--seed-radius-r4);
flex-direction: column;
align-items: stretch;
display: flex;
overflow: hidden;
}
.seed-menu-sheet__footer {
padding-top: var(--seed-dimension-x2_5);
flex-direction: column;
align-items: stretch;
display: flex;
}
.seed-menu-sheet__closeButton {
background-color: var(--seed-color-bg-neutral-weak);
min-height: 52px;
padding-left: var(--seed-dimension-x5);
padding-right: var(--seed-dimension-x5);
padding-top: var(--seed-dimension-x3_5);
padding-bottom: var(--seed-dimension-x3_5);
border-radius: var(--seed-radius-r3);
color: var(--seed-color-fg-neutral);
font-family: inherit;
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-medium);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
border: none;
justify-content: center;
align-items: center;
display: flex;
}
@media (hover: hover) and (pointer: fine) {
.seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-menu-sheet__closeButton:is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-menu-sheet__closeButton {
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
}
.seed-menu-sheet__closeButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d2);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1;
}
.seed-menu-sheet__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d2);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-menu-sheet__content--skipAnimation_false:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter-expressive);
animation-duration: var(--seed-duration-d6);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 100%;
--seed-enter-opacity: 1;
--seed-enter-scale: 1;
}
.seed-menu-sheet__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d4);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 100%;
--seed-exit-opacity: 1;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-menu-sheet-item__root {
background-color: var(--seed-color-bg-neutral-weak);
min-height: 52px;
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
padding-top: var(--seed-dimension-x3_5);
padding-bottom: var(--seed-dimension-x3_5);
align-items: center;
gap: var(--seed-dimension-x3_5);
box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
border: none;
margin: 0;
font-family: inherit;
display: flex;
}
@media (hover: hover) and (pointer: fine) {
.seed-menu-sheet-item__root:is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-menu-sheet-item__root:is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-menu-sheet-item__root:first-child {
border-top-left-radius: var(--seed-radius-r4);
border-top-right-radius: var(--seed-radius-r4);
}
.seed-menu-sheet-item__root:last-child {
border-bottom-left-radius: var(--seed-radius-r4);
border-bottom-right-radius: var(--seed-radius-r4);
box-shadow: none;
}
.seed-menu-sheet-item__root {
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-menu-sheet-item__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-menu-sheet-item__root {
--seed-prefix-icon-size: 22px;
}
.seed-menu-sheet-item__content {
gap: var(--seed-dimension-x0_5);
flex-direction: column;
display: flex;
}
.seed-menu-sheet-item__label {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
}
.seed-menu-sheet-item__description {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-fg-neutral-subtle);
}
.seed-menu-sheet-item__root--tone_neutral {
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
}
.seed-menu-sheet-item__label--tone_neutral {
color: var(--seed-color-fg-neutral);
}
.seed-menu-sheet-item__root--tone_critical {
--seed-prefix-icon-color: var(--seed-color-fg-critical);
}
.seed-menu-sheet-item__label--tone_critical {
color: var(--seed-color-fg-critical);
}
.seed-menu-sheet-item__content--labelAlign_left {
text-align: start;
}
.seed-menu-sheet-item__root--labelAlign_center {
justify-content: center;
}
.seed-menu-sheet-item__content--labelAlign_center {
align-items: center;
}
.seed-notification-badge {
box-sizing: border-box;
text-transform: none;
text-align: start;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--seed-color-bg-brand-solid);
color: var(--seed-color-palette-static-white);
justify-content: center;
align-items: center;
text-decoration: none;
display: inline-flex;
}
.seed-notification-badge--size_small {
border-radius: var(--seed-radius-full);
width: 6px;
height: 6px;
}
.seed-notification-badge--size_large {
border-radius: var(--seed-radius-full);
min-width: 18px;
min-height: 18px;
padding-left: var(--seed-dimension-x1);
padding-right: var(--seed-dimension-x1);
font-size: var(--seed-font-size-t1-static);
line-height: var(--seed-line-height-t1-static);
font-weight: var(--seed-font-weight-bold);
padding-top: 0;
padding-bottom: 0;
}
.seed-notification-badge-positioner {
box-sizing: border-box;
justify-content: center;
align-items: center;
display: inline-flex;
position: absolute;
}
.seed-notification-badge-positioner--attach_icon {
bottom: auto;
left: auto;
translate: 100% -100%;
}
.seed-notification-badge-positioner--attach_text {
bottom: auto;
left: auto;
translate: 100%;
}
.seed-notification-badge-positioner--size_large-attach_icon {
top: 14px;
right: 8px;
}
.seed-notification-badge-positioner--size_small-attach_icon {
top: 7px;
right: 7px;
}
.seed-notification-badge-positioner--size_large-attach_text, .seed-notification-badge-positioner--size_small-attach_text {
right: -2px;
}
.seed-page-banner__root {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: inherit;
font-size: unset;
text-align: start;
width: 100%;
min-height: var(--seed-dimension-x10);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
--seed-prefix-icon-size: var(--seed-dimension-x4);
--seed-prefix-icon-margin-right: var(--seed-dimension-x2);
--seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
--seed-suffix-icon-size: var(--seed-dimension-x4);
--seed-suffix-icon-margin-left: var(--seed-dimension-x2);
--seed-suffix-icon-align-self: center;
border: none;
align-items: flex-start;
display: flex;
}
.seed-page-banner__root:is(button) {
cursor: pointer;
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-page-banner__root:is(button):is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-page-banner__content {
justify-content: space-between;
align-items: center;
gap: var(--seed-dimension-x1_5);
flex-wrap: wrap;
flex-grow: 1;
display: flex;
}
.seed-page-banner__body {
line-height: var(--seed-line-height-t4);
flex-grow: 1;
}
.seed-page-banner__title {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-bold);
flex-shrink: 0;
}
.seed-page-banner__title:after {
content: " ";
white-space: pre;
}
.seed-page-banner__description {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
}
.seed-page-banner__button {
cursor: pointer;
margin: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5 * -1);
padding: calc((var(--seed-dimension-x10) - var(--seed-line-height-t3)) * .5);
font-family: inherit;
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-bold);
border-radius: var(--seed-radius-r1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
background-color: #0000;
border: none;
align-items: center;
display: flex;
}
.seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-page-banner__closeButton {
width: var(--seed-dimension-x10);
height: var(--seed-dimension-x10);
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
--seed-suffix-icon-margin-left: initial;
cursor: pointer;
border-radius: var(--seed-radius-r1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
background-color: #0000;
border: none;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
align-self: center;
align-items: center;
padding: 0;
display: flex;
}
.seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-page-banner__root--tone_neutral-variant_weak {
background-color: var(--seed-color-bg-neutral-weak);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-page-banner__title--tone_neutral-variant_weak, .seed-page-banner__description--tone_neutral-variant_weak, .seed-page-banner__button--tone_neutral-variant_weak {
color: var(--seed-color-fg-neutral);
}
.seed-page-banner__root--tone_neutral-variant_solid {
background-color: var(--seed-color-bg-neutral-inverted);
--seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
--seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
color: var(--seed-color-fg-neutral-inverted);
}
.seed-page-banner__root--tone_informative-variant_weak {
background-color: var(--seed-color-bg-informative-weak);
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-informative-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-informative-weak-pressed);
}
}
.seed-page-banner__title--tone_informative-variant_weak, .seed-page-banner__description--tone_informative-variant_weak, .seed-page-banner__button--tone_informative-variant_weak {
color: var(--seed-color-fg-informative-contrast);
}
.seed-page-banner__root--tone_informative-variant_solid {
background-color: var(--seed-color-bg-informative-solid);
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-informative-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-informative-solid-pressed);
}
}
.seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
color: var(--seed-color-palette-static-white);
}
.seed-page-banner__root--tone_positive-variant_weak {
background-color: var(--seed-color-bg-positive-weak);
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-positive-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-positive-weak-pressed);
}
}
.seed-page-banner__title--tone_positive-variant_weak, .seed-page-banner__description--tone_positive-variant_weak, .seed-page-banner__button--tone_positive-variant_weak {
color: var(--seed-color-fg-positive-contrast);
}
.seed-page-banner__root--tone_positive-variant_solid {
background-color: var(--seed-color-bg-positive-solid);
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-positive-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-positive-solid-pressed);
}
}
.seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
color: var(--seed-color-palette-static-white);
}
.seed-page-banner__root--tone_warning-variant_weak {
background-color: var(--seed-color-bg-warning-weak);
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-warning-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-warning-weak-pressed);
}
}
.seed-page-banner__title--tone_warning-variant_weak, .seed-page-banner__description--tone_warning-variant_weak, .seed-page-banner__button--tone_warning-variant_weak {
color: var(--seed-color-fg-warning-contrast);
}
.seed-page-banner__root--tone_warning-variant_solid {
background-color: var(--seed-color-bg-warning-solid);
--seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
--seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-warning-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-warning-solid-pressed);
}
}
.seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
color: var(--seed-color-palette-static-black-alpha-900);
}
.seed-page-banner__root--tone_critical-variant_weak {
background-color: var(--seed-color-bg-critical-weak);
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-critical-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-critical-weak-pressed);
}
}
.seed-page-banner__title--tone_critical-variant_weak, .seed-page-banner__description--tone_critical-variant_weak, .seed-page-banner__button--tone_critical-variant_weak {
color: var(--seed-color-fg-critical-contrast);
}
.seed-page-banner__root--tone_critical-variant_solid {
background-color: var(--seed-color-bg-critical-solid);
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-critical-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
background-color: var(--seed-color-bg-critical-solid-pressed);
}
}
.seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
color: var(--seed-color-palette-static-white);
}
.seed-page-banner__root--tone_magic-variant_weak {
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
}
}
.seed-page-banner__title--tone_magic-variant_weak, .seed-page-banner__description--tone_magic-variant_weak, .seed-page-banner__button--tone_magic-variant_weak {
color: var(--seed-color-fg-neutral);
}
.seed-progress-circle__root {
box-sizing: border-box;
display: inline-flex;
position: relative;
}
.seed-progress-circle__root[data-progress-state="indeterminate"] {
animation: 1.2s cubic-bezier(.35, .25, .65, .75) infinite rotate;
}
.seed-progress-circle__track {
stroke: var(--track-color);
}
.seed-progress-circle__range {
stroke: var(--range-color);
stroke-linecap: round;
transition-property: stroke-dasharray;
transition-duration: .3s;
transition-timing-function: cubic-bezier(0, 0, .15, 1);
}
.seed-progress-circle__range[data-progress-state="indeterminate"] {
animation: 1.2s cubic-bezier(.35, 0, .65, 1) infinite progress-circle-head, 1.2s cubic-bezier(.35, 0, .65, .6) infinite progress-circle-tail;
}
.seed-progress-circle__root--tone_neutral {
--track-color: var(--seed-color-palette-gray-200);
--range-color: var(--seed-color-palette-gray-500);
}
.seed-progress-circle__root--tone_brand {
--track-color: var(--seed-color-palette-carrot-200);
--range-color: var(--seed-color-bg-brand-solid);
}
.seed-progress-circle__root--tone_staticWhite {
--track-color: var(--seed-color-palette-static-white-alpha-300);
--range-color: var(--seed-color-palette-static-white);
}
.seed-progress-circle__root--size_24 {
--size: var(--seed-dimension-x6);
--thickness: 3px;
}
.seed-progress-circle__root--size_40 {
--size: var(--seed-dimension-x10);
--thickness: 5px;
}
.seed-pull-to-refresh__root {
--ptr-size: 44px;
--ptr-transition-duration: var(--seed-duration-d6);
height: 100%;
}
.seed-pull-to-refresh__indicator {
transform: translateY(min(calc(var(--ptr-displacement, 0) - var(--ptr-size)), 0px));
transition: transform var(--seed-duration-d6);
justify-content: center;
align-items: center;
display: flex;
}
.seed-pull-to-refresh__indicator[data-ptr-dragging] {
transition: none;
}
.seed-radio__root {
vertical-align: top;
isolation: isolate;
cursor: pointer;
align-items: flex-start;
gap: var(--seed-dimension-x2);
max-width: 100%;
display: inline-flex;
position: relative;
}
.seed-radio__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-radio__label {
color: var(--seed-color-fg-neutral);
}
.seed-radio__label:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-radio__label--weight_regular {
font-weight: var(--seed-font-weight-regular);
}
.seed-radio__label--weight_bold {
font-weight: var(--seed-font-weight-bold);
}
.seed-radio__root--size_large {
min-height: var(--seed-dimension-x9);
--radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
}
.seed-radio__label--size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
}
.seed-radio__root--size_medium {
min-height: var(--seed-dimension-x8);
--radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
}
.seed-radio__label--size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
}
.seed-radio-group {
gap: var(--seed-dimension-x1);
flex-direction: column;
display: flex;
}
.seed-radiomark__root {
box-sizing: border-box;
border-style: solid;
border-width: 1px;
border-color: var(--seed-color-stroke-neutral-weak);
border-radius: var(--seed-radius-full);
margin-top: var(--radiomark-margin-top, 0);
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
outline-offset: var(--seed-dimension-x0_5);
flex: none;
justify-content: center;
align-items: center;
display: flex;
position: relative;
}
@media (hover: hover) and (pointer: fine) {
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
.seed-radiomark__root:is(:checked, [data-checked]) {
border-width: 0;
}
.seed-radiomark__root:is(:disabled, [disabled], [data-disabled]) {
background-color: var(--seed-color-palette-gray-300);
}
.seed-radiomark__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
background-color: var(--seed-color-bg-transparent);
border-width: 1px;
border-color: var(--seed-color-palette-gray-300);
}
.seed-radiomark__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
outline-offset: var(--seed-dimension-x0_5);
}
.seed-radiomark__icon {
border-radius: var(--seed-radius-full);
display: none;
}
.seed-radiomark__icon:is(:checked, [data-checked]) {
display: block;
}
.seed-radiomark__icon:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
color: var(--seed-color-palette-gray-300);
}
.seed-radiomark__root--tone_neutral:is(:checked, [data-checked]) {
background-color: var(--seed-color-bg-neutral-inverted);
}
@media (hover: hover) and (pointer: fine) {
.seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-inverted-pressed);
}
}
.seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
color: var(--seed-color-fg-neutral-inverted);
}
.seed-radiomark__root--tone_brand:is(:checked, [data-checked]) {
background-color: var(--seed-color-bg-brand-solid);
}
@media (hover: hover) and (pointer: fine) {
.seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-brand-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
background-color: var(--seed-color-bg-brand-solid-pressed);
}
}
.seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
color: var(--seed-color-palette-static-white);
}
.seed-radiomark__root--size_large {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
}
.seed-radiomark__icon--size_large {
width: var(--seed-dimension-x2_5);
height: var(--seed-dimension-x2_5);
}
.seed-radiomark__icon--size_large:is(:disabled, [disabled], [data-disabled]) {
width: var(--seed-dimension-x3);
height: var(--seed-dimension-x3);
}
.seed-radiomark__root--size_medium {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-radiomark__icon--size_medium {
width: var(--seed-dimension-x2);
height: var(--seed-dimension-x2);
}
.seed-radiomark__icon--size_medium:is(:disabled, [disabled], [data-disabled]) {
width: var(--seed-dimension-x2_5);
height: var(--seed-dimension-x2_5);
}
.seed-reaction-button {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
white-space: nowrap;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
border: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-family: inherit;
text-decoration: none;
display: inline-flex;
position: relative;
}
.seed-reaction-button:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-reaction-button {
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
background: var(--seed-color-bg-transparent);
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-fg-neutral);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
--seed-count-font-weight: var(--seed-font-weight-bold);
--seed-count-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-reaction-button:is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-reaction-button:is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
background: var(--seed-color-bg-transparent);
color: var(--seed-color-fg-brand);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
--seed-prefix-icon-color: var(--seed-color-fg-brand);
--seed-count-color: var(--seed-color-fg-brand);
}
@media (hover: hover) and (pointer: fine) {
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
box-shadow: inset 0 0 0 0px var(--seed-color-stroke-brand-weak);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-count-color: var(--seed-color-fg-disabled);
}
.seed-reaction-button[data-loading] {
background: var(--seed-color-bg-neutral-weak-pressed);
}
.seed-reaction-button:is([aria-pressed="true"], [data-pressed])[data-loading] {
background: var(--seed-color-bg-transparent-pressed);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
--track-color: var(--seed-color-palette-carrot-200);
--range-color: var(--seed-color-fg-brand);
}
.seed-reaction-button--size_xsmall {
height: var(--seed-dimension-x8);
padding-left: var(--seed-dimension-x3);
padding-right: var(--seed-dimension-x3);
padding-top: var(--seed-dimension-x1_5);
padding-bottom: var(--seed-dimension-x1_5);
gap: var(--seed-dimension-x1);
border-radius: var(--seed-radius-full);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
--size: 14px;
--thickness: 2px;
--seed-count-font-size: var(--seed-font-size-t3);
--seed-count-line-height: var(--seed-line-height-t3);
--seed-prefix-icon-size: 18px;
}
.seed-reaction-button--size_small {
height: var(--seed-dimension-x9);
padding-left: var(--seed-dimension-x3_5);
padding-right: var(--seed-dimension-x3_5);
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
gap: var(--seed-dimension-x1);
border-radius: var(--seed-radius-full);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
--size: 14px;
--thickness: 2px;
--seed-count-font-size: var(--seed-font-size-t3);
--seed-count-line-height: var(--seed-line-height-t3);
--seed-prefix-icon-size: 18px;
}
.seed-scroll-fog {
--scroll-fog-from-color: #0000;
--scroll-fog-to-color: #000;
width: 100%;
height: 100%;
mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
-webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
-webkit-mask-composite: source-in;
position: relative;
overflow: auto;
-webkit-mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-composite: intersect;
}
.seed-scroll-fog--hideScrollBar_true {
scrollbar-width: none;
-ms-overflow-style: none;
}
.seed-scroll-fog--hideScrollBar_true::-webkit-scrollbar {
display: none;
}
.seed-segmented-control__root {
box-sizing: border-box;
max-width: 100%;
padding: var(--seed-dimension-x1);
border-radius: var(--seed-radius-full);
background-color: var(--seed-color-bg-neutral-weak-alpha);
isolation: isolate;
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
grid-auto-flow: column;
align-items: center;
display: grid;
position: relative;
}
.seed-segmented-control__indicator {
z-index: -1;
will-change: transform;
transform: translateX(calc(var(--segment-index) * 100%));
top: var(--seed-dimension-x1);
bottom: var(--seed-dimension-x1);
left: var(--seed-dimension-x1);
width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count));
border-radius: var(--seed-radius-full);
background-color: var(--seed-color-palette-gray-00);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
transition: transform var(--seed-duration-d4) var(--seed-timing-function-easing);
position: absolute;
}
.seed-segmented-control__item {
text-align: center;
cursor: pointer;
user-select: none;
box-sizing: border-box;
overflow-wrap: break-word;
justify-content: center;
align-items: center;
gap: var(--seed-dimension-x1_5);
min-width: 86px;
height: 100%;
min-height: 34px;
padding-left: var(--seed-dimension-x6);
padding-right: var(--seed-dimension-x6);
padding-top: var(--seed-dimension-x1_5);
padding-bottom: var(--seed-dimension-x1_5);
border-radius: var(--seed-radius-full);
font-weight: var(--seed-font-weight-bold);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
color: var(--seed-color-fg-neutral-subtle);
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
display: flex;
}
.seed-segmented-control__item:is(:checked, [data-checked]) {
color: var(--seed-color-fg-neutral);
}
.seed-segmented-control__item {
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
}
.seed-segmented-control__item:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
color: var(--seed-color-fg-disabled);
}
.seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
background-color: var(--seed-color-bg-disabled);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
}
@media (hover: hover) and (pointer: fine) {
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
background-color: var(--seed-color-palette-gray-100);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
background-color: var(--seed-color-palette-gray-100);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
}
}
@media (hover: hover) and (pointer: fine) {
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
background-color: var(--seed-color-bg-neutral-weak-pressed);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
}
}
.seed-select-box__root {
cursor: pointer;
border-radius: var(--seed-radius-r3);
background-color: var(--seed-color-bg-transparent);
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
flex-direction: column;
display: flex;
position: relative;
overflow: hidden;
}
.seed-select-box__root:after {
content: "";
border-radius: inherit;
transition: border-color .1s var(--seed-timing-function-easing);
pointer-events: none;
border: 2px solid #0000;
position: absolute;
inset: 0;
}
@media (hover: hover) and (pointer: fine) {
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
.seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):after {
border-width: 2px;
border-color: var(--seed-color-stroke-neutral-contrast);
}
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
}
.seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
}
.seed-select-box__root {
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
}
.seed-select-box__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-select-box__trigger {
justify-content: space-between;
gap: var(--seed-dimension-x1_5);
--seed-focus-ring: none;
flex-grow: 1;
display: flex;
}
.seed-select-box__content {
--seed-prefix-icon-size: 22px;
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
display: flex;
}
.seed-select-box__content:is(:disabled, [disabled], [data-disabled]) {
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
}
.seed-select-box__body {
gap: var(--seed-dimension-x0_5);
flex-direction: column;
margin-right: auto;
display: flex;
}
.seed-select-box__label {
align-items: center;
gap: var(--seed-dimension-x1);
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-medium);
justify-content: flex-start;
display: flex;
}
.seed-select-box__label:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-select-box__description {
color: var(--seed-color-fg-neutral-muted);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-regular);
}
.seed-select-box__description:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-select-box__footer[data-collapsible] {
opacity: 0;
height: 0;
transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity .4s var(--seed-timing-function-easing);
overflow: hidden;
}
.seed-select-box__footer[data-collapsible]:is([data-state="open"], [data-open]) {
height: var(--collapsible-content-height);
opacity: 1;
transition: height .4s var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
}
.seed-select-box__trigger--layout_horizontal {
padding-left: var(--seed-dimension-x5);
padding-right: var(--seed-dimension-x4);
padding-top: var(--seed-dimension-x4);
padding-bottom: var(--seed-dimension-x4);
align-items: center;
}
.seed-select-box__content--layout_horizontal {
align-items: center;
gap: var(--seed-dimension-x3);
}
.seed-select-box__trigger--layout_vertical {
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
padding-top: var(--seed-dimension-x5);
padding-bottom: var(--seed-dimension-x5);
}
.seed-select-box__content--layout_vertical {
gap: var(--seed-dimension-x2_5);
flex-direction: column;
}
.seed-select-box-checkmark__root {
box-sizing: border-box;
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
flex: none;
position: relative;
}
.seed-select-box-checkmark__icon {
text-align: center;
overflow: initial;
width: 15px;
height: 15px;
color: var(--seed-color-fg-placeholder);
transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
margin: auto;
display: block;
position: absolute;
inset: 0;
}
@media (hover: hover) and (pointer: fine) {
.seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
color: var(--seed-color-fg-neutral-subtle);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
color: var(--seed-color-fg-neutral-subtle);
}
}
.seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
color: var(--seed-color-fg-neutral);
}
.seed-select-box-checkmark__icon:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-select-box-group {
grid-template-columns: repeat(var(--seed-select-box-group--columns, 1), minmax(0, 1fr));
row-gap: var(--seed-dimension-spacing-y-component-default);
column-gap: var(--seed-dimension-x3);
width: 100%;
display: grid;
}
.seed-select-box-group:not([data-columns="1"]) {
grid-auto-rows: 1fr;
}
.seed-side-navigation__root {
flex-direction: column;
flex-shrink: 0;
width: 240px;
height: 100%;
transition: width .2s;
display: flex;
position: relative;
overflow-x: hidden;
}
.seed-side-navigation__root[data-side-navigation-state="collapsed"] {
width: 56px;
}
.seed-side-navigation__header {
box-sizing: border-box;
flex-shrink: 0;
min-height: 64px;
padding: 8px;
}
.seed-side-navigation__content {
flex-direction: column;
flex: 1;
gap: 8px;
padding: 8px 8px 24px;
display: flex;
overflow-y: auto;
}
.seed-side-navigation__content[data-scrolled] {
box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
}
.seed-side-navigation__content {
transition: gap .2s, box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
scrollbar-width: thin;
scrollbar-color: var(--seed-color-bg-neutral-weak-alpha) transparent;
-webkit-mask-image: linear-gradient(to top, #0000 0, #000 24px);
mask-image: linear-gradient(to top, #0000 0, #000 24px);
}
.seed-side-navigation__content[data-side-navigation-state="collapsed"] {
scrollbar-width: none;
gap: 0;
}
.seed-side-navigation__footer {
flex-shrink: 0;
padding: 8px;
}
.seed-side-navigation__footer:empty {
display: none;
}
.seed-side-navigation__group {
flex-direction: column;
display: flex;
}
.seed-side-navigation__groupLabel {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-bold);
color: var(--seed-color-fg-neutral-muted);
white-space: nowrap;
text-overflow: ellipsis;
opacity: 1;
pointer-events: none;
padding: 6px;
transition: margin .2s, opacity .2s;
overflow: hidden;
}
.seed-side-navigation__groupLabel[data-side-navigation-state="collapsed"] {
opacity: 0;
margin-top: calc(-1lh - 12px);
}
.seed-side-navigation__trigger {
cursor: pointer;
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
min-width: 40px;
min-height: 40px;
transition: right .2s, background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
background: none;
border: none;
border-radius: 8px;
justify-content: center;
align-items: center;
padding: 10px;
display: inline-flex;
position: absolute;
top: 12px;
right: 12px;
}
.seed-side-navigation__trigger:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-side-navigation__trigger {
--seed-icon-size: 18px;
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
}
@media (hover: hover) and (pointer: fine) {
.seed-side-navigation__trigger:is(:hover, [data-hover]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-side-navigation__trigger:is(:active, [data-active]) {
background: var(--seed-color-bg-transparent-pressed);
}
}
.seed-side-navigation__trigger[data-side-navigation-state="collapsed"] {
right: 8px;
}
.seed-side-navigation__root--tone_neutral {
background-color: var(--seed-color-palette-gray-100);
box-shadow: inset -1px 0 0 0 var(--seed-color-stroke-neutral-muted);
}
.seed-side-navigation-inset {
flex-grow: 1;
overflow-y: auto;
}
.seed-side-navigation-menu-item__root {
text-align: left;
background: none;
border: none;
border-radius: 10px;
outline: none;
align-items: center;
gap: 12px;
width: 100%;
height: 44px;
padding-left: 8px;
padding-right: 8px;
scroll-margin-top: 8px;
scroll-margin-bottom: 24px;
transition: padding .2s, background-color .2s;
display: flex;
position: relative;
overflow: hidden;
}
.seed-side-navigation-menu-item__root:before {
content: "";
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
border-radius: 10px;
position: absolute;
inset: 0;
}
.seed-side-navigation-menu-item__root:is(:focus-visible, [data-focus-visible]):before {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"]:before {
right: unset;
width: 40px;
}
.seed-side-navigation-menu-item__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])) {
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:hover, [data-hover]):before {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-side-navigation-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):not([data-current]):is(:active, [data-active]):before {
background-color: var(--seed-color-bg-transparent-pressed);
}
}
.seed-side-navigation-menu-item__root[data-current] {
background-color: var(--seed-color-bg-transparent-selected);
}
@media (hover: hover) and (pointer: fine) {
.seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
background-color: var(--seed-color-bg-transparent-selected-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-side-navigation-menu-item__root[data-current]:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
background-color: var(--seed-color-bg-transparent-selected-pressed);
}
}
.seed-side-navigation-menu-item__root[data-side-navigation-state="collapsed"] {
padding-left: 10px;
padding-right: 10px;
}
.seed-side-navigation-menu-item__prefixIcon {
width: 20px;
height: 20px;
color: var(--seed-color-palette-gray-600);
flex-shrink: 0;
transition: color .2s;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.seed-side-navigation-menu-item__prefixIcon[data-current] {
color: var(--seed-color-fg-neutral);
}
.seed-side-navigation-menu-item__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-side-navigation-menu-item__label {
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
color: var(--seed-color-fg-neutral-muted);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-medium);
flex-grow: 1;
padding: 6px 6px 6px 32px;
transition: opacity .2s, color .2s;
overflow: hidden;
}
.seed-side-navigation-menu-item__label[data-side-navigation-state="collapsed"] {
opacity: 0;
}
.seed-side-navigation-menu-item__label[data-current] {
color: var(--seed-color-fg-neutral);
}
.seed-side-navigation-menu-item__label:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-side-navigation-menu-item__suffixIcon {
width: 16px;
height: 16px;
color: var(--seed-color-fg-neutral-subtle);
flex-shrink: 0;
transition: transform .2s, opacity .2s;
}
.seed-side-navigation-menu-item__suffixIcon:not(:is([data-state="open"], [data-open])) {
transform: rotate(180deg);
}
.seed-side-navigation-menu-item__suffixIcon[data-side-navigation-state="collapsed"] {
opacity: 0;
}
.seed-side-navigation-menu-item__panel[data-collapsible] {
opacity: 0;
height: 0;
transition: height .2s, opacity .2s;
overflow: hidden;
}
.seed-side-navigation-menu-item__panel[data-collapsible]:is([data-state="open"], [data-open]) {
height: var(--collapsible-content-height);
opacity: 1;
transition: height .2s, opacity .2s;
}
.seed-side-panel__positioner {
overscroll-behavior-y: none;
--side-panel-z-index: 2;
z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
position: fixed;
inset: 0;
}
.seed-side-panel__backdrop {
background: var(--seed-color-bg-overlay);
z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
position: fixed;
inset: 0;
}
.seed-side-panel__backdrop:is([data-state="open"], [data-open]) {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d6);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1;
}
.seed-side-panel__backdrop:not(:is([data-state="open"], [data-open])) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d6);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-side-panel__content {
box-sizing: border-box;
word-break: break-all;
z-index: calc(var(--side-panel-z-index) + var(--layer-index, 0));
background: var(--seed-color-bg-layer-floating);
touch-action: none;
will-change: transform;
--seed-box-width-base: initial;
--seed-box-width-sm: var(--seed-box-width-base);
--seed-box-width-md: var(--seed-box-width-sm);
--seed-box-width-lg: var(--seed-box-width-md);
--seed-box-width-xl: var(--seed-box-width-lg);
--seed-box-width: var(--seed-box-width-base);
--seed-box-max-width-base: calc(.8 * 100%);
--seed-box-max-width-sm: var(--seed-box-max-width-base);
--seed-box-max-width-md: var(--seed-box-max-width-sm);
--seed-box-max-width-lg: var(--seed-box-max-width-md);
--seed-box-max-width-xl: var(--seed-box-max-width-lg);
--seed-box-max-width: var(--seed-box-max-width-base);
width: var(--seed-box-width, calc(.8 * 100vw));
max-width: var(--seed-box-max-width);
padding-bottom: var(--seed-safe-area-bottom);
flex-direction: column;
display: flex;
position: absolute;
top: 0;
bottom: 0;
}
@media (width >= 768px) {
.seed-side-panel__content {
width: var(--seed-box-width, var(--side-panel-size-width));
}
}
.seed-side-panel__content:after {
content: "";
background: inherit;
z-index: -1;
width: 100vw;
position: absolute;
top: 0;
bottom: 0;
}
.seed-side-panel__content:is(:focus, [data-focus]) {
outline: none;
}
.seed-side-panel__content[data-drawer-direction="left"] {
padding-left: env(safe-area-inset-left, 0);
left: 0;
}
.seed-side-panel__content[data-drawer-direction="left"]:after {
right: 100%;
}
.seed-side-panel__content[data-drawer-direction="right"] {
padding-right: env(safe-area-inset-right, 0);
right: 0;
}
.seed-side-panel__content[data-drawer-direction="right"]:after {
left: 100%;
}
.seed-side-panel__content:is([data-state="open"], [data-open])[data-drawer-direction="right"] {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter-expressive);
animation-duration: var(--seed-duration-d6);
--seed-enter-translate-x: 100%;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 1;
--seed-enter-scale: 1;
}
.seed-side-panel__content:not(:is([data-state="open"], [data-open]))[data-drawer-direction="right"] {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit-expressive);
animation-duration: var(--seed-duration-d6);
--seed-exit-translate-x: 100%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 1;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-side-panel__content:is([data-state="open"], [data-open])[data-drawer-direction="left"] {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter-expressive);
animation-duration: var(--seed-duration-d6);
--seed-enter-translate-x: -100%;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 1;
--seed-enter-scale: 1;
}
.seed-side-panel__content:not(:is([data-state="open"], [data-open]))[data-drawer-direction="left"] {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit-expressive);
animation-duration: var(--seed-duration-d6);
--seed-exit-translate-x: -100%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 1;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-side-panel__header {
box-sizing: border-box;
gap: var(--seed-dimension-x1_5);
min-height: calc(70px + var(--seed-safe-area-top));
padding-left: var(--seed-dimension-x6);
padding-right: var(--seed-dimension-x6);
padding-top: calc(var(--seed-dimension-x6) + var(--seed-safe-area-top));
padding-bottom: var(--seed-dimension-x4);
flex-direction: column;
display: flex;
position: relative;
}
.seed-side-panel__header[data-show-close-button] {
padding-right: calc(var(--seed-dimension-x6) + 52px);
}
.seed-side-panel__title {
color: var(--seed-color-fg-neutral);
font-size: var(--seed-font-size-t8);
line-height: var(--seed-line-height-t8);
font-weight: var(--seed-font-weight-bold);
word-break: keep-all;
margin: 0;
}
.seed-side-panel__description {
color: var(--seed-color-fg-neutral-muted);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-regular);
white-space: pre-wrap;
margin: 0;
}
.seed-side-panel__body {
--seed-box-padding-x-base: var(--seed-dimension-x6);
--seed-box-padding-x-sm: var(--seed-box-padding-x-base);
--seed-box-padding-x-md: var(--seed-box-padding-x-sm);
--seed-box-padding-x-lg: var(--seed-box-padding-x-md);
--seed-box-padding-x-xl: var(--seed-box-padding-x-lg);
--seed-box-padding-x: var(--seed-box-padding-x-base);
--seed-box-height-base: initial;
--seed-box-height-sm: var(--seed-box-height-base);
--seed-box-height-md: var(--seed-box-height-sm);
--seed-box-height-lg: var(--seed-box-height-md);
--seed-box-height-xl: var(--seed-box-height-lg);
--seed-box-height: var(--seed-box-height-base);
--seed-box-min-height-base: initial;
--seed-box-min-height-sm: var(--seed-box-min-height-base);
--seed-box-min-height-md: var(--seed-box-min-height-sm);
--seed-box-min-height-lg: var(--seed-box-min-height-md);
--seed-box-min-height-xl: var(--seed-box-min-height-lg);
--seed-box-min-height: var(--seed-box-min-height-base);
--seed-box-max-height-base: initial;
--seed-box-max-height-sm: var(--seed-box-max-height-base);
--seed-box-max-height-md: var(--seed-box-max-height-sm);
--seed-box-max-height-lg: var(--seed-box-max-height-md);
--seed-box-max-height-xl: var(--seed-box-max-height-lg);
--seed-box-max-height: var(--seed-box-max-height-base);
--seed-box-justify-content: initial;
--seed-box-align-items: initial;
padding-left: var(--seed-box-padding-x);
padding-right: var(--seed-box-padding-x);
padding-bottom: var(--seed-dimension-x12);
height: var(--seed-box-height);
min-height: var(--seed-box-min-height);
max-height: var(--seed-box-max-height);
justify-content: var(--seed-box-justify-content);
align-items: var(--seed-box-align-items);
transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
flex-direction: column;
flex: 1;
display: flex;
overflow-y: auto;
}
.seed-side-panel__body[data-scrolled]:not(:first-child) {
box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
}
.seed-side-panel__body {
mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
-webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
}
.seed-side-panel__footer {
padding-left: var(--seed-dimension-x6);
padding-right: var(--seed-dimension-x6);
padding-top: var(--seed-dimension-x4);
padding-bottom: var(--seed-dimension-x6);
flex-direction: column;
display: flex;
}
.seed-side-panel__closeButton {
top: calc(28px + var(--seed-safe-area-top));
border-radius: var(--seed-radius-r3);
background: var(--seed-color-bg-transparent);
cursor: pointer;
--seed-icon-size: 22px;
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
border: none;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
display: flex;
position: absolute;
right: 24px;
}
.seed-side-panel__closeButton :where(.seed-icon) {
transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
}
@media (hover: hover) and (pointer: fine) {
.seed-side-panel__closeButton:is(:hover, [data-hover]) {
--seed-icon-color: var(--seed-color-fg-neutral);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-side-panel__closeButton:is(:active, [data-active]) {
--seed-icon-color: var(--seed-color-fg-neutral);
}
}
.seed-side-panel__closeButton:after {
content: "";
border-radius: var(--seed-radius-r3);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
position: absolute;
inset: -15px;
}
.seed-side-panel__closeButton:is(:focus, [data-focus]) {
outline: none;
}
.seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]):after {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-side-panel__content--size_small {
--side-panel-size-width: 480px;
}
.seed-side-panel__content--size_medium {
--side-panel-size-width: 720px;
}
.seed-side-panel__content--size_large {
--side-panel-size-width: 960px;
}
.seed-skeleton {
box-sizing: border-box;
--seed-box-width-base: initial;
--seed-box-width-sm: var(--seed-box-width-base);
--seed-box-width-md: var(--seed-box-width-sm);
--seed-box-width-lg: var(--seed-box-width-md);
--seed-box-width-xl: var(--seed-box-width-lg);
--seed-box-width: var(--seed-box-width-base);
--seed-box-height-base: initial;
--seed-box-height-sm: var(--seed-box-height-base);
--seed-box-height-md: var(--seed-box-height-sm);
--seed-box-height-lg: var(--seed-box-height-md);
--seed-box-height-xl: var(--seed-box-height-lg);
--seed-box-height: var(--seed-box-height-base);
width: var(--seed-box-width);
height: var(--seed-box-height);
display: inline-block;
overflow: hidden;
}
.seed-skeleton:after {
content: "";
width: 100%;
height: 100%;
animation-name: slide-x;
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-timing-function: var(--seed-timing-function-easing);
background-repeat: no-repeat;
animation-iteration-count: infinite;
display: block;
}
.seed-skeleton--radius_0 {
border-radius: 0;
}
.seed-skeleton--radius_8 {
border-radius: 8px;
}
.seed-skeleton--radius_16 {
border-radius: 16px;
}
.seed-skeleton--radius_full {
border-radius: var(--seed-radius-full);
}
.seed-skeleton--tone_neutral {
background: var(--seed-color-palette-gray-200);
}
.seed-skeleton--tone_neutral:after {
background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-neutral));
}
.seed-skeleton--tone_magic {
background: var(--seed-color-bg-magic-weak);
}
.seed-skeleton--tone_magic:after {
background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
}
.seed-slider__root {
align-items: stretch;
gap: var(--seed-dimension-x0_5);
user-select: none;
touch-action: none;
flex-direction: column;
width: 100%;
display: flex;
}
.seed-slider__root[data-dragging] {
cursor: grabbing;
}
.seed-slider__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-slider__control {
align-items: center;
height: 26px;
display: flex;
position: relative;
}
.seed-slider__track {
background-color: var(--seed-color-palette-gray-400);
height: var(--seed-dimension-x1);
border-radius: var(--seed-radius-full);
flex-grow: 1;
position: relative;
overflow: hidden;
}
.seed-slider__range {
background-color: var(--seed-color-fg-neutral);
height: 100%;
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
will-change: left, right;
position: absolute;
}
.seed-slider__range[data-dir="ltr"] {
left: var(--range-start);
right: var(--range-end);
}
.seed-slider__range[data-dir="rtl"] {
right: var(--range-start);
left: var(--range-end);
}
.seed-slider__range:is(:disabled, [disabled], [data-disabled]) {
background-color: var(--seed-color-fg-disabled);
}
.seed-slider__range[data-dragging] {
transition: none;
}
.seed-slider__thumb {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing), opacity var(--seed-duration-d2) var(--seed-timing-function-easing);
will-change: left, right, opacity;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.seed-slider__thumb[data-ssr] {
opacity: 0;
}
.seed-slider__thumb[data-dir="ltr"] {
left: calc(var(--thumb-position) * 1% + var(--thumb-offset));
}
.seed-slider__thumb[data-dir="rtl"] {
right: calc(var(--thumb-position) * 1% + var(--thumb-offset));
}
.seed-slider__thumb:after {
content: "";
background-color: var(--seed-color-bg-neutral-inverted);
border-radius: var(--seed-radius-full);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
will-change: transform;
cursor: grab;
position: absolute;
inset: 0;
}
.seed-slider__thumb:is(:disabled, [disabled], [data-disabled]):after {
background-color: var(--seed-color-fg-disabled);
cursor: not-allowed;
}
.seed-slider__thumb[data-dragging] {
transition: none;
}
.seed-slider__thumb[data-thumb-dragging]:after {
transform: scale(1.2);
}
.seed-slider__thumb:is(:focus, [data-focus]) {
outline: none;
}
.seed-slider__thumb:is(:focus-visible, [data-focus-visible]):after {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-slider__markers {
height: var(--seed-line-height-t3);
position: relative;
}
.seed-slider__valueIndicatorRoot {
box-sizing: border-box;
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
will-change: left, right;
background: var(--seed-color-bg-neutral-inverted);
padding-left: var(--seed-dimension-x2);
padding-right: var(--seed-dimension-x2);
padding-top: var(--seed-dimension-x1);
padding-bottom: var(--seed-dimension-x1);
border-radius: var(--seed-radius-r1_5);
color: var(--seed-color-fg-neutral-inverted);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
font-weight: var(--seed-font-weight-medium);
white-space: pre-wrap;
text-align: center;
width: max-content;
min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
flex-direction: column;
align-items: center;
display: flex;
position: absolute;
top: 50%;
}
.seed-slider__valueIndicatorRoot[data-dir="ltr"] {
left: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
transform: translate(-50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
}
.seed-slider__valueIndicatorRoot[data-dir="rtl"] {
right: calc(var(--indicator-label-position) * 1% + var(--indicator-label-offset));
transform: translate(50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3)));
}
.seed-slider__valueIndicatorRoot[data-value-indicator-shown][data-dir="ltr"] {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d4);
--seed-enter-translate-x: -50%;
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
--seed-enter-opacity: 0;
--seed-enter-scale: .9;
}
.seed-slider__valueIndicatorRoot[data-value-indicator-shown][data-dir="rtl"] {
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d4);
--seed-enter-translate-x: 50%;
--seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
--seed-enter-opacity: 0;
--seed-enter-scale: .9;
}
.seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir="ltr"] {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-easing);
animation-duration: var(--seed-duration-d4);
--seed-exit-translate-x: -50%;
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-slider__valueIndicatorRoot:not([data-value-indicator-shown])[data-dir="rtl"] {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-easing);
animation-duration: var(--seed-duration-d4);
--seed-exit-translate-x: 50%;
--seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation-fill-mode: forwards;
}
.seed-slider__valueIndicatorRoot[data-dragging] {
transition: none;
}
.seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
animation-duration: 0s;
}
.seed-slider__valueIndicatorArrow {
width: var(--seed-dimension-x2);
height: var(--seed-dimension-x2);
transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
will-change: left, right;
position: absolute;
top: 100%;
}
.seed-slider__valueIndicatorArrow[data-dir="ltr"] {
left: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
transform: translateX(-50%);
}
.seed-slider__valueIndicatorArrow[data-dir="rtl"] {
right: calc(50% + (var(--thumb-offset) - var(--indicator-label-offset)));
transform: translateX(50%);
}
.seed-slider__valueIndicatorArrow[data-dragging] {
transition: none;
}
.seed-slider__valueIndicatorArrowTip {
fill: var(--seed-color-bg-neutral-inverted);
width: var(--seed-dimension-x2);
height: var(--seed-dimension-x1_5);
display: block;
}
.seed-slider-marker {
width: max-content;
color: var(--seed-color-fg-neutral-muted);
font-weight: var(--seed-font-weight-regular);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
position: absolute;
top: 0;
bottom: 0;
}
.seed-slider-marker[data-dir="ltr"] {
left: calc(var(--marker-position) * 1% + var(--marker-offset));
}
.seed-slider-marker[data-dir="rtl"] {
right: calc(var(--marker-position) * 1% + var(--marker-offset));
}
.seed-slider-marker:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-slider-marker--align_start[data-dir="ltr"] {
text-align: left;
}
.seed-slider-marker--align_start[data-dir="rtl"] {
text-align: right;
}
.seed-slider-marker--align_center {
text-align: center;
}
.seed-slider-marker--align_center[data-dir="ltr"] {
transform: translateX(-50%);
}
.seed-slider-marker--align_center[data-dir="rtl"] {
transform: translateX(50%);
}
.seed-slider-marker--align_end[data-dir="ltr"] {
text-align: right;
transform: translateX(-100%);
}
.seed-slider-marker--align_end[data-dir="rtl"] {
text-align: left;
transform: translateX(100%);
}
.seed-slider-tick {
background-color: var(--seed-color-fg-neutral-inverted);
height: 100%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.seed-slider-tick[data-dir="ltr"] {
left: calc(var(--tick-position) * 1% + var(--tick-offset));
}
.seed-slider-tick[data-dir="rtl"] {
right: calc(var(--tick-position) * 1% + var(--tick-offset));
}
.seed-slider-tick--weight_thin {
width: 1px;
}
.seed-slider-tick--weight_thick {
width: var(--seed-dimension-x1);
}
.seed-snackbar__root {
box-sizing: border-box;
background: var(--seed-color-bg-neutral-inverted);
border-radius: var(--seed-radius-r2);
width: 100%;
max-width: 560px;
padding-left: var(--seed-dimension-x2_5);
padding-right: var(--seed-dimension-x2_5);
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
min-height: 44px;
animation: seed-enter;
animation-timing-function: var(--seed-timing-function-enter);
animation-duration: var(--seed-duration-d3);
--seed-enter-translate-x: 0;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: .8;
align-items: center;
display: flex;
}
.seed-snackbar__root:not([data-open]) {
animation: seed-exit;
animation-timing-function: var(--seed-timing-function-exit);
animation-duration: var(--seed-duration-d2);
--seed-exit-translate-x: 0;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: .8;
animation-fill-mode: forwards;
}
.seed-snackbar__root {
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
}
.seed-snackbar__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-snackbar__content {
padding-left: var(--seed-dimension-x1_5);
padding-right: var(--seed-dimension-x1_5);
justify-content: space-between;
align-items: center;
gap: var(--seed-dimension-x2_5);
flex-grow: 1;
display: flex;
}
.seed-snackbar__message {
color: var(--seed-color-fg-neutral-inverted);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-regular);
margin: 0;
}
.seed-snackbar__prefixIcon {
width: 24px;
height: 24px;
padding-right: var(--seed-dimension-x0_5);
flex-shrink: 0;
}
.seed-snackbar__actionButton {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: unset;
color: var(--seed-color-fg-brand);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-bold);
border: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
text-decoration: none;
display: inline-flex;
position: relative;
}
.seed-snackbar__actionButton:after {
content: "";
top: 50%;
left: calc(-1 * var(--seed-dimension-x2));
right: calc(-1 * var(--seed-dimension-x2));
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
min-height: 44px;
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
background: none;
position: absolute;
transform: translateY(-50%);
}
.seed-snackbar__actionButton:is(:focus, [data-focus]) {
outline: none;
}
.seed-snackbar__actionButton:is(:focus-visible, [data-focus-visible]):after {
border-radius: var(--seed-radius-r1);
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-snackbar__prefixIcon--variant_default {
display: none;
}
.seed-snackbar__prefixIcon--variant_positive {
color: var(--seed-color-fg-positive);
}
.seed-snackbar__prefixIcon--variant_critical {
color: var(--seed-color-fg-critical);
}
.seed-snackbar-region {
z-index: 2147483647;
left: calc(env(safe-area-inset-left, 0px));
right: calc(env(safe-area-inset-right, 0px));
bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px));
padding-left: var(--seed-dimension-x2);
padding-right: var(--seed-dimension-x2);
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
transition-property: bottom;
transition-duration: var(--seed-duration-d4);
transition-timing-function: var(--seed-timing-function-easing);
flex-direction: column;
align-items: center;
display: flex;
}
.seed-switch__root {
box-sizing: border-box;
vertical-align: top;
isolation: isolate;
cursor: pointer;
justify-content: space-between;
align-items: flex-start;
display: inline-flex;
position: relative;
}
.seed-switch__root:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-switch__label {
font-weight: var(--seed-font-weight-medium);
color: var(--seed-color-fg-neutral);
transition: opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
}
.seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
opacity: .58;
}
.seed-switch__root--size_16 {
min-height: var(--seed-dimension-x6);
gap: var(--seed-dimension-x1_5);
--switchmark-margin-top: calc((var(--seed-dimension-x6) - 16px) / 2);
}
.seed-switch__label--size_16 {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t3) / 2);
}
.seed-switch__root--size_24 {
min-height: var(--seed-dimension-x6);
gap: var(--seed-dimension-x2);
--switchmark-margin-top: calc((var(--seed-dimension-x6) - 24px) / 2);
}
.seed-switch__label--size_24 {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
margin-top: calc(var(--seed-dimension-x6) / 2 - var(--seed-line-height-t4) / 2);
}
.seed-switch__root--size_32 {
min-height: var(--seed-dimension-x8);
gap: var(--seed-dimension-x2_5);
--switchmark-margin-top: calc((var(--seed-dimension-x8) - 32px) / 2);
}
.seed-switch__label--size_32 {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t5) / 2);
}
.seed-switchmark__root {
box-sizing: border-box;
border-radius: var(--seed-radius-full);
background: var(--seed-color-palette-gray-600);
margin: var(--switchmark-margin-top, 0) 0;
transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
display: block;
position: relative;
}
.seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
opacity: .38;
}
.seed-switchmark__root {
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-switchmark__root:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
outline-offset: var(--seed-dimension-x0_5);
}
.seed-switchmark__thumb {
border-radius: var(--seed-radius-full);
transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
transform: scale(.8);
}
.seed-switchmark__root--tone_neutral:is(:checked, [data-checked]) {
background: var(--seed-color-bg-neutral-inverted);
}
.seed-switchmark__root--tone_neutral:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
background: var(--seed-color-palette-gray-600);
}
.seed-switchmark__thumb--tone_neutral {
background: var(--seed-color-fg-neutral-inverted);
}
.seed-switchmark__thumb--tone_neutral:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-palette-static-black-alpha-700);
}
.seed-switchmark__root--tone_brand:is(:checked, [data-checked]) {
background: var(--seed-color-bg-brand-solid);
}
.seed-switchmark__thumb--tone_brand {
background: var(--seed-color-palette-static-white);
}
.seed-switchmark__root--size_16 {
min-width: 26px;
min-height: 16px;
padding: 2px;
}
.seed-switchmark__thumb--size_16 {
width: 12px;
height: 12px;
}
.seed-switchmark__thumb--size_16:is(:checked, [data-checked]) {
transform: scale(1) translateX(10px);
}
.seed-switchmark__root--size_24 {
min-width: 38px;
min-height: 24px;
padding: 2px;
}
.seed-switchmark__thumb--size_24 {
width: 20px;
height: 20px;
}
.seed-switchmark__thumb--size_24:is(:checked, [data-checked]) {
transform: scale(1) translateX(14px);
}
.seed-switchmark__root--size_32 {
min-width: 52px;
min-height: 32px;
padding: 3px;
}
.seed-switchmark__thumb--size_32 {
width: 26px;
height: 26px;
}
.seed-switchmark__thumb--size_32:is(:checked, [data-checked]) {
transform: scale(1) translateX(20px);
}
.seed-tabs__root {
position: relative;
}
.seed-tabs__list {
isolation: isolate;
-ms-overflow-style: none;
scrollbar-width: none;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
display: flex;
position: relative;
overflow-x: auto;
}
.seed-tabs__list::-webkit-scrollbar {
display: none;
}
.seed-tabs__list {
background: var(--seed-color-bg-layer-default);
box-shadow: inset 0 -1px var(--seed-color-stroke-neutral-muted);
}
.seed-tabs__carousel {
display: block;
overflow: hidden;
}
.seed-tabs__carouselCamera {
display: flex;
}
.seed-tabs__carouselCamera[data-auto-height] {
align-items: flex-start;
}
.seed-tabs__content {
flex: 0 0 100%;
min-width: 0;
overflow: hidden auto;
transform: translate3d(0, 0, 0);
}
.seed-tabs__content[data-ssr]:not(:is([aria-selected="true"], [data-selected])), .seed-tabs__content:not([data-carousel]):not(:is([aria-selected="true"], [data-selected])) {
display: none;
}
.seed-tabs__indicator {
will-change: left, width;
transition-property: left, width;
transition-duration: var(--seed-duration-d4);
transition-timing-function: var(--seed-timing-function-easing);
left: var(--indicator-left, 0px);
width: var(--indicator-width, 0px);
color: var(--seed-color-fg-neutral);
border-bottom: 2px solid var(--seed-color-fg-neutral);
position: absolute;
bottom: 0;
}
.seed-tabs__indicator[data-ssr] {
display: none;
}
.seed-tabs__trigger {
cursor: pointer;
box-sizing: border-box;
white-space: nowrap;
color: var(--seed-color-fg-neutral-subtle);
background-color: #0000;
border: none;
justify-content: center;
align-items: flex-end;
display: flex;
position: relative;
}
.seed-tabs__trigger:is([aria-selected="true"], [data-selected]) {
color: var(--seed-color-fg-neutral);
}
.seed-tabs__trigger:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
color: var(--seed-color-fg-disabled);
}
.seed-tabs__trigger:is([aria-selected="true"], [data-selected])[data-ssr]:after {
content: "";
background-color: var(--seed-color-fg-neutral);
height: 2px;
position: absolute;
bottom: 0;
}
.seed-tabs__trigger {
transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: calc(var(--seed-dimension-x0_5) * -1);
}
.seed-tabs__list--triggerLayout_fill {
justify-content: space-around;
padding-left: 0;
padding-right: 0;
}
.seed-tabs__indicator--triggerLayout_fill {
left: calc(var(--indicator-left, 0px) + var(--seed-dimension-spacing-x-global-gutter));
width: calc(var(--indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
}
.seed-tabs__trigger--triggerLayout_fill {
flex: 1;
}
.seed-tabs__trigger--triggerLayout_fill:is([aria-selected="true"], [data-selected])[data-ssr]:after {
left: var(--seed-dimension-spacing-x-global-gutter);
right: var(--seed-dimension-spacing-x-global-gutter);
}
.seed-tabs__list--triggerLayout_hug {
padding-left: var(--seed-dimension-spacing-x-global-gutter);
padding-right: var(--seed-dimension-spacing-x-global-gutter);
justify-content: flex-start;
}
.seed-tabs__indicator--triggerLayout_hug {
left: calc(var(--indicator-left, 0px) + 0px);
width: calc(var(--indicator-width, 0px) - 2 * 0px);
}
.seed-tabs__trigger--triggerLayout_hug:is([aria-selected="true"], [data-selected])[data-ssr]:after {
left: 0;
right: 0;
}
.seed-tabs__root--contentLayout_fill {
flex-direction: column;
height: 100%;
display: flex;
}
.seed-tabs__carousel--contentLayout_fill {
flex: 1;
}
.seed-tabs__carouselCamera--contentLayout_fill {
align-items: stretch;
height: 100%;
}
.seed-tabs__root--contentLayout_hug {
display: block;
}
.seed-tabs__root--size_small {
--tabs-list-height: 40px;
}
.seed-tabs__list--size_small {
min-height: 40px;
}
.seed-tabs__trigger--size_small {
min-height: 40px;
padding-left: var(--seed-dimension-x2_5);
padding-right: var(--seed-dimension-x2_5);
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
font-weight: var(--seed-font-weight-bold);
}
.seed-tabs__root--size_medium {
--tabs-list-height: 44px;
}
.seed-tabs__list--size_medium {
min-height: 44px;
}
.seed-tabs__trigger--size_medium {
min-height: 44px;
padding-left: var(--seed-dimension-x2_5);
padding-right: var(--seed-dimension-x2_5);
padding-top: var(--seed-dimension-x2_5);
padding-bottom: var(--seed-dimension-x2_5);
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
font-weight: var(--seed-font-weight-bold);
}
.seed-tabs__root--stickyList_true {
position: relative;
}
.seed-tabs__list--stickyList_true {
z-index: 1;
position: sticky;
top: 0;
}
.seed-tag-group__separator {
color: var(--seed-color-palette-gray-600);
font-weight: var(--seed-font-weight-regular);
white-space: pre;
user-select: none;
}
.seed-tag-group__separator--size_t2 {
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
}
.seed-tag-group__separator--size_t3 {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
}
.seed-tag-group__separator--size_t4 {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-tag-group__root--truncate_true {
--tag-group-item-display: inline-flex;
--tag-group-item-overflow: hidden;
--tag-group-item-text-overflow: ellipsis;
--tag-group-item-white-space: nowrap;
align-items: center;
max-width: 100%;
display: inline-flex;
}
.seed-tag-group__root--truncate_false {
--tag-group-item-display: inline;
--tag-group-item-overflow: visible;
--tag-group-item-text-overflow: clip;
--tag-group-item-white-space: normal;
font-size: 0;
display: inline-block;
}
.seed-tag-group__separator--truncate_false {
vertical-align: middle;
}
.seed-tag-group__root--size_t2-truncate_false {
line-height: var(--seed-line-height-t2);
}
.seed-tag-group__root--size_t3-truncate_false {
line-height: var(--seed-line-height-t3);
}
.seed-tag-group__root--size_t4-truncate_false {
line-height: var(--seed-line-height-t4);
}
.seed-tag-group-item__root {
display: var(--tag-group-item-display);
vertical-align: middle;
flex-shrink: var(--seed-box-flex-shrink, 1);
align-items: center;
min-width: 0;
}
.seed-tag-group-item__label {
vertical-align: middle;
min-width: 0;
overflow: var(--tag-group-item-overflow);
text-overflow: var(--tag-group-item-text-overflow);
white-space: var(--tag-group-item-white-space);
word-break: normal;
display: inline;
}
.seed-tag-group-item__label:not(:first-child) {
margin-left: var(--seed-dimension-x0_5);
}
.seed-tag-group-item__label:not(:last-child) {
margin-right: var(--seed-dimension-x0_5);
}
.seed-tag-group-item__root--size_t2 {
--seed-prefix-icon-size: var(--seed-dimension-x3);
--seed-suffix-icon-size: var(--seed-dimension-x3);
--seed-icon-size: var(--seed-dimension-x3);
}
.seed-tag-group-item__label--size_t2 {
font-size: var(--seed-font-size-t2);
line-height: var(--seed-line-height-t2);
}
.seed-tag-group-item__root--size_t3 {
--seed-prefix-icon-size: 13px;
--seed-suffix-icon-size: 13px;
--seed-icon-size: 13px;
}
.seed-tag-group-item__label--size_t3 {
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
}
.seed-tag-group-item__root--size_t4 {
--seed-prefix-icon-size: var(--seed-dimension-x3_5);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
--seed-icon-size: var(--seed-dimension-x3_5);
}
.seed-tag-group-item__label--size_t4 {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-tag-group-item__label--weight_regular {
font-weight: var(--seed-font-weight-regular);
}
.seed-tag-group-item__label--weight_bold {
font-weight: var(--seed-font-weight-bold);
}
.seed-tag-group-item__root--tone_neutralSubtle {
--seed-prefix-icon-color: var(--seed-color-fg-neutral-subtle);
--seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
--seed-icon-color: var(--seed-color-fg-neutral-subtle);
}
.seed-tag-group-item__label--tone_neutralSubtle {
color: var(--seed-color-fg-neutral-subtle);
}
.seed-tag-group-item__root--tone_neutral {
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
--seed-icon-color: var(--seed-color-fg-neutral);
}
.seed-tag-group-item__label--tone_neutral {
color: var(--seed-color-fg-neutral);
}
.seed-tag-group-item__root--tone_brand {
--seed-prefix-icon-color: var(--seed-color-fg-brand);
--seed-suffix-icon-color: var(--seed-color-fg-brand);
--seed-icon-color: var(--seed-color-fg-brand);
}
.seed-tag-group-item__label--tone_brand {
color: var(--seed-color-fg-brand);
}
.seed-text {
color: var(--seed-text-color);
font-size: var(--seed-font-size);
font-weight: var(--seed-font-weight);
line-height: var(--seed-line-height);
text-align: var(--seed-text-align);
user-select: var(--seed-user-select);
--seed-text-color: inherit;
--seed-font-size: inherit;
--seed-font-weight: inherit;
--seed-line-height: inherit;
--seed-text-align: inherit;
--seed-user-select: inherit;
--seed-white-space: inherit;
--seed-max-lines: initial;
margin: 0;
}
.seed-text--textStyle_screenTitle {
--seed-font-size: var(--seed-font-size-t10);
--seed-line-height: var(--seed-line-height-t10);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_articleBody {
--seed-font-size: var(--seed-font-size-t5);
--seed-line-height: var(--seed-line-height-t6);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_articleNote {
--seed-font-size: var(--seed-font-size-t4);
--seed-line-height: var(--seed-line-height-t5);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t1Regular {
--seed-font-size: var(--seed-font-size-t1);
--seed-line-height: var(--seed-line-height-t1);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t1Medium {
--seed-font-size: var(--seed-font-size-t1);
--seed-line-height: var(--seed-line-height-t1);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t1Bold {
--seed-font-size: var(--seed-font-size-t1);
--seed-line-height: var(--seed-line-height-t1);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t2Regular {
--seed-font-size: var(--seed-font-size-t2);
--seed-line-height: var(--seed-line-height-t2);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t2Medium {
--seed-font-size: var(--seed-font-size-t2);
--seed-line-height: var(--seed-line-height-t2);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t2Bold {
--seed-font-size: var(--seed-font-size-t2);
--seed-line-height: var(--seed-line-height-t2);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t3Regular {
--seed-font-size: var(--seed-font-size-t3);
--seed-line-height: var(--seed-line-height-t3);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t3Medium {
--seed-font-size: var(--seed-font-size-t3);
--seed-line-height: var(--seed-line-height-t3);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t3Bold {
--seed-font-size: var(--seed-font-size-t3);
--seed-line-height: var(--seed-line-height-t3);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t4Regular {
--seed-font-size: var(--seed-font-size-t4);
--seed-line-height: var(--seed-line-height-t4);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t4Medium {
--seed-font-size: var(--seed-font-size-t4);
--seed-line-height: var(--seed-line-height-t4);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t4Bold {
--seed-font-size: var(--seed-font-size-t4);
--seed-line-height: var(--seed-line-height-t4);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t5Regular {
--seed-font-size: var(--seed-font-size-t5);
--seed-line-height: var(--seed-line-height-t5);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t5Medium {
--seed-font-size: var(--seed-font-size-t5);
--seed-line-height: var(--seed-line-height-t5);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t5Bold {
--seed-font-size: var(--seed-font-size-t5);
--seed-line-height: var(--seed-line-height-t5);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t6Regular {
--seed-font-size: var(--seed-font-size-t6);
--seed-line-height: var(--seed-line-height-t6);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t6Medium {
--seed-font-size: var(--seed-font-size-t6);
--seed-line-height: var(--seed-line-height-t6);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t6Bold {
--seed-font-size: var(--seed-font-size-t6);
--seed-line-height: var(--seed-line-height-t6);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t7Regular {
--seed-font-size: var(--seed-font-size-t7);
--seed-line-height: var(--seed-line-height-t7);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t7Medium {
--seed-font-size: var(--seed-font-size-t7);
--seed-line-height: var(--seed-line-height-t7);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t7Bold {
--seed-font-size: var(--seed-font-size-t7);
--seed-line-height: var(--seed-line-height-t7);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t8Regular {
--seed-font-size: var(--seed-font-size-t8);
--seed-line-height: var(--seed-line-height-t8);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t8Medium {
--seed-font-size: var(--seed-font-size-t8);
--seed-line-height: var(--seed-line-height-t8);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t8Bold {
--seed-font-size: var(--seed-font-size-t8);
--seed-line-height: var(--seed-line-height-t8);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t9Regular {
--seed-font-size: var(--seed-font-size-t9);
--seed-line-height: var(--seed-line-height-t9);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t9Medium {
--seed-font-size: var(--seed-font-size-t9);
--seed-line-height: var(--seed-line-height-t9);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t9Bold {
--seed-font-size: var(--seed-font-size-t9);
--seed-line-height: var(--seed-line-height-t9);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t10Regular {
--seed-font-size: var(--seed-font-size-t10);
--seed-line-height: var(--seed-line-height-t10);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t10Medium {
--seed-font-size: var(--seed-font-size-t10);
--seed-line-height: var(--seed-line-height-t10);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t10Bold {
--seed-font-size: var(--seed-font-size-t10);
--seed-line-height: var(--seed-line-height-t10);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t11Regular {
--seed-font-size: var(--seed-font-size-t11);
--seed-line-height: var(--seed-line-height-t11);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t11Medium {
--seed-font-size: var(--seed-font-size-t11);
--seed-line-height: var(--seed-line-height-t11);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t11Bold {
--seed-font-size: var(--seed-font-size-t11);
--seed-line-height: var(--seed-line-height-t11);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t12Regular {
--seed-font-size: var(--seed-font-size-t12);
--seed-line-height: var(--seed-line-height-t12);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t12Medium {
--seed-font-size: var(--seed-font-size-t12);
--seed-line-height: var(--seed-line-height-t12);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t12Bold {
--seed-font-size: var(--seed-font-size-t12);
--seed-line-height: var(--seed-line-height-t12);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t13Regular {
--seed-font-size: var(--seed-font-size-t13);
--seed-line-height: var(--seed-line-height-t13);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t13Medium {
--seed-font-size: var(--seed-font-size-t13);
--seed-line-height: var(--seed-line-height-t13);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t13Bold {
--seed-font-size: var(--seed-font-size-t13);
--seed-line-height: var(--seed-line-height-t13);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t14Regular {
--seed-font-size: var(--seed-font-size-t14);
--seed-line-height: var(--seed-line-height-t14);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t14Medium {
--seed-font-size: var(--seed-font-size-t14);
--seed-line-height: var(--seed-line-height-t14);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t14Bold {
--seed-font-size: var(--seed-font-size-t14);
--seed-line-height: var(--seed-line-height-t14);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t1StaticRegular {
--seed-font-size: var(--seed-font-size-t1-static);
--seed-line-height: var(--seed-line-height-t1-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t1StaticMedium {
--seed-font-size: var(--seed-font-size-t1-static);
--seed-line-height: var(--seed-line-height-t1-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t1StaticBold {
--seed-font-size: var(--seed-font-size-t1-static);
--seed-line-height: var(--seed-line-height-t1-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t2StaticRegular {
--seed-font-size: var(--seed-font-size-t2-static);
--seed-line-height: var(--seed-line-height-t2-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t2StaticMedium {
--seed-font-size: var(--seed-font-size-t2-static);
--seed-line-height: var(--seed-line-height-t2-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t2StaticBold {
--seed-font-size: var(--seed-font-size-t2-static);
--seed-line-height: var(--seed-line-height-t2-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t3StaticRegular {
--seed-font-size: var(--seed-font-size-t3-static);
--seed-line-height: var(--seed-line-height-t3-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t3StaticMedium {
--seed-font-size: var(--seed-font-size-t3-static);
--seed-line-height: var(--seed-line-height-t3-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t3StaticBold {
--seed-font-size: var(--seed-font-size-t3-static);
--seed-line-height: var(--seed-line-height-t3-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t4StaticRegular {
--seed-font-size: var(--seed-font-size-t4-static);
--seed-line-height: var(--seed-line-height-t4-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t4StaticMedium {
--seed-font-size: var(--seed-font-size-t4-static);
--seed-line-height: var(--seed-line-height-t4-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t4StaticBold {
--seed-font-size: var(--seed-font-size-t4-static);
--seed-line-height: var(--seed-line-height-t4-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t5StaticRegular {
--seed-font-size: var(--seed-font-size-t5-static);
--seed-line-height: var(--seed-line-height-t5-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t5StaticMedium {
--seed-font-size: var(--seed-font-size-t5-static);
--seed-line-height: var(--seed-line-height-t5-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t5StaticBold {
--seed-font-size: var(--seed-font-size-t5-static);
--seed-line-height: var(--seed-line-height-t5-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t6StaticRegular {
--seed-font-size: var(--seed-font-size-t6-static);
--seed-line-height: var(--seed-line-height-t6-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t6StaticMedium {
--seed-font-size: var(--seed-font-size-t6-static);
--seed-line-height: var(--seed-line-height-t6-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t6StaticBold {
--seed-font-size: var(--seed-font-size-t6-static);
--seed-line-height: var(--seed-line-height-t6-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t7StaticRegular {
--seed-font-size: var(--seed-font-size-t7-static);
--seed-line-height: var(--seed-line-height-t7-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t7StaticMedium {
--seed-font-size: var(--seed-font-size-t7-static);
--seed-line-height: var(--seed-line-height-t7-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t7StaticBold {
--seed-font-size: var(--seed-font-size-t7-static);
--seed-line-height: var(--seed-line-height-t7-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t8StaticRegular {
--seed-font-size: var(--seed-font-size-t8-static);
--seed-line-height: var(--seed-line-height-t8-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t8StaticMedium {
--seed-font-size: var(--seed-font-size-t8-static);
--seed-line-height: var(--seed-line-height-t8-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t8StaticBold {
--seed-font-size: var(--seed-font-size-t8-static);
--seed-line-height: var(--seed-line-height-t8-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t9StaticRegular {
--seed-font-size: var(--seed-font-size-t9-static);
--seed-line-height: var(--seed-line-height-t9-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t9StaticMedium {
--seed-font-size: var(--seed-font-size-t9-static);
--seed-line-height: var(--seed-line-height-t9-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t9StaticBold {
--seed-font-size: var(--seed-font-size-t9-static);
--seed-line-height: var(--seed-line-height-t9-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t10StaticRegular {
--seed-font-size: var(--seed-font-size-t10-static);
--seed-line-height: var(--seed-line-height-t10-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t10StaticMedium {
--seed-font-size: var(--seed-font-size-t10-static);
--seed-line-height: var(--seed-line-height-t10-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t10StaticBold {
--seed-font-size: var(--seed-font-size-t10-static);
--seed-line-height: var(--seed-line-height-t10-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t11StaticRegular {
--seed-font-size: var(--seed-font-size-t11-static);
--seed-line-height: var(--seed-line-height-t11-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t11StaticMedium {
--seed-font-size: var(--seed-font-size-t11-static);
--seed-line-height: var(--seed-line-height-t11-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t11StaticBold {
--seed-font-size: var(--seed-font-size-t11-static);
--seed-line-height: var(--seed-line-height-t11-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t12StaticRegular {
--seed-font-size: var(--seed-font-size-t12-static);
--seed-line-height: var(--seed-line-height-t12-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t12StaticMedium {
--seed-font-size: var(--seed-font-size-t12-static);
--seed-line-height: var(--seed-line-height-t12-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t12StaticBold {
--seed-font-size: var(--seed-font-size-t12-static);
--seed-line-height: var(--seed-line-height-t12-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t13StaticRegular {
--seed-font-size: var(--seed-font-size-t13-static);
--seed-line-height: var(--seed-line-height-t13-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t13StaticMedium {
--seed-font-size: var(--seed-font-size-t13-static);
--seed-line-height: var(--seed-line-height-t13-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t13StaticBold {
--seed-font-size: var(--seed-font-size-t13-static);
--seed-line-height: var(--seed-line-height-t13-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--textStyle_t14StaticRegular {
--seed-font-size: var(--seed-font-size-t14-static);
--seed-line-height: var(--seed-line-height-t14-static);
--seed-font-weight: var(--seed-font-weight-regular);
}
.seed-text--textStyle_t14StaticMedium {
--seed-font-size: var(--seed-font-size-t14-static);
--seed-line-height: var(--seed-line-height-t14-static);
--seed-font-weight: var(--seed-font-weight-medium);
}
.seed-text--textStyle_t14StaticBold {
--seed-font-size: var(--seed-font-size-t14-static);
--seed-line-height: var(--seed-line-height-t14-static);
--seed-font-weight: var(--seed-font-weight-bold);
}
.seed-text--maxLines_none {
overflow: unset;
min-width: unset;
text-overflow: unset;
white-space: var(--seed-white-space);
-webkit-line-clamp: unset;
}
.seed-text--maxLines_single {
text-overflow: ellipsis;
white-space: nowrap;
-webkit-line-clamp: var(--seed-max-lines);
min-width: 0;
display: block;
overflow: hidden;
}
.seed-text--maxLines_multi {
text-overflow: ellipsis;
min-width: 0;
white-space: initial;
-webkit-line-clamp: var(--seed-max-lines);
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.seed-text--textDecorationLine_none {
text-decoration-line: none;
}
.seed-text--textDecorationLine_line-through {
text-decoration-line: line-through;
}
.seed-text--textDecorationLine_underline {
text-decoration-line: underline;
}
.seed-text-input__root {
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden;
}
.seed-text-input__root:after {
content: "";
border-radius: inherit;
transition: border-color .1s var(--seed-timing-function-easing);
pointer-events: none;
border-color: #0000;
position: absolute;
inset: 0;
}
.seed-text-input__value {
box-sizing: border-box;
font: inherit;
resize: none;
color: var(--seed-color-fg-neutral);
font-weight: var(--seed-font-weight-regular);
background: none;
border: none;
outline: none;
flex-grow: 1;
align-self: stretch;
padding-left: 0;
padding-right: 0;
}
.seed-text-input__value:is(input) {
width: 0;
}
.seed-text-input__value::placeholder {
color: var(--seed-color-fg-placeholder);
font-weight: var(--seed-font-weight-regular);
}
.seed-text-input__value:is(:autofill, :autofill) {
-webkit-text-fill-color: var(--seed-color-fg-neutral);
transition: background-color 2147480000s 2147480000s;
}
@supports (background-clip: text) {
.seed-text-input__value:is(:autofill, :autofill) {
background-clip: text;
transition: none;
}
}
.seed-text-input__value:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
cursor: not-allowed;
}
.seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
color: var(--seed-color-fg-disabled);
}
.seed-text-input__prefixText {
color: var(--seed-color-fg-neutral-subtle);
font-weight: var(--seed-font-weight-regular);
}
.seed-text-input__prefixText:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-text-input__prefixIcon {
color: var(--seed-color-fg-neutral-muted);
flex-shrink: 0;
}
.seed-text-input__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-text-input__suffixText {
color: var(--seed-color-fg-neutral-subtle);
font-weight: var(--seed-font-weight-regular);
}
.seed-text-input__suffixText:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-text-input__suffixIcon {
color: var(--seed-color-fg-neutral-muted);
flex-shrink: 0;
}
.seed-text-input__suffixIcon:is(:disabled, [disabled], [data-disabled]) {
color: var(--seed-color-fg-disabled);
}
.seed-text-input__root--variant_outline {
box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
}
.seed-text-input__root--variant_outline:after {
border-style: solid;
border-width: 2px;
}
.seed-text-input__root--variant_outline:not([data-readonly]):is(:focus, [data-focus]):after {
border-color: var(--seed-color-stroke-neutral-contrast);
border-width: 2px;
}
.seed-text-input__root--variant_outline:is(:invalid, [data-invalid]):after, .seed-text-input__root--variant_outline:is(:invalid, [data-invalid]):is(:focus, [data-focus]):after {
border-color: var(--seed-color-stroke-critical-solid);
border-width: 2px;
}
.seed-text-input__root--variant_outline:is(:disabled, [disabled], [data-disabled]), .seed-text-input__root--variant_outline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])) {
background-color: var(--seed-color-bg-disabled);
}
.seed-text-input__root--variant_underline {
box-shadow: inset 0 calc(1px * -1) 0 0 var(--seed-color-stroke-neutral-weak);
}
.seed-text-input__root--variant_underline:after {
border-bottom-style: solid;
border-bottom-width: 2px;
}
.seed-text-input__root--variant_underline:not([data-readonly]):is(:focus, [data-focus]):after {
border-bottom-color: var(--seed-color-stroke-neutral-contrast);
border-bottom-width: 2px;
}
.seed-text-input__root--variant_underline:is(:invalid, [data-invalid]):after, .seed-text-input__root--variant_underline:is(:invalid, [data-invalid]):is(:focus, [data-focus]):after {
border-bottom-color: var(--seed-color-stroke-critical-solid);
border-bottom-width: 2px;
}
.seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled])), .seed-text-input__value--variant_underline[data-readonly]:not(:is(:disabled, [disabled], [data-disabled]))::placeholder {
color: var(--seed-color-fg-neutral-muted);
}
.seed-text-input__value--size_large:is(textarea) {
min-height: 94px;
padding-top: var(--seed-dimension-x3_5);
padding-bottom: var(--seed-dimension-x3_5);
}
.seed-text-input__value--size_medium:is(textarea) {
min-height: 82px;
padding-top: var(--seed-dimension-x3);
padding-bottom: var(--seed-dimension-x3);
}
.seed-text-input__value--size_responsive:is(textarea) {
min-height: 94px;
padding-top: var(--seed-dimension-x3_5);
padding-bottom: var(--seed-dimension-x3_5);
}
@media (width >= 1280px) {
.seed-text-input__value--size_responsive:is(textarea) {
min-height: 82px;
padding-top: var(--seed-dimension-x3);
padding-bottom: var(--seed-dimension-x3);
}
}
.seed-text-input__root--variant_outline-size_large {
gap: var(--seed-dimension-x2_5);
min-height: var(--seed-dimension-x13);
border-radius: var(--seed-radius-r3);
}
.seed-text-input__value--variant_outline-size_large, .seed-text-input__value--variant_outline-size_large::placeholder {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-text-input__value--variant_outline-size_large:first-child {
padding-left: var(--seed-dimension-x4);
}
.seed-text-input__value--variant_outline-size_large:last-child {
padding-right: var(--seed-dimension-x4);
}
.seed-text-input__prefixText--variant_outline-size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-text-input__prefixText--variant_outline-size_large:first-child {
margin-left: var(--seed-dimension-x4);
}
.seed-text-input__prefixIcon--variant_outline-size_large {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-text-input__prefixIcon--variant_outline-size_large:first-child {
margin-left: var(--seed-dimension-x4);
}
.seed-text-input__suffixText--variant_outline-size_large {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-text-input__suffixText--variant_outline-size_large:last-child {
margin-right: var(--seed-dimension-x4);
}
.seed-text-input__suffixIcon--variant_outline-size_large {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-text-input__suffixIcon--variant_outline-size_large:last-child {
margin-right: var(--seed-dimension-x4);
}
.seed-text-input__root--variant_outline-size_medium {
gap: var(--seed-dimension-x2);
min-height: var(--seed-dimension-x10);
border-radius: var(--seed-radius-r2);
}
.seed-text-input__value--variant_outline-size_medium, .seed-text-input__value--variant_outline-size_medium::placeholder {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-text-input__value--variant_outline-size_medium:first-child {
padding-left: var(--seed-dimension-x3_5);
}
.seed-text-input__value--variant_outline-size_medium:last-child {
padding-right: var(--seed-dimension-x3_5);
}
.seed-text-input__prefixText--variant_outline-size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-text-input__prefixText--variant_outline-size_medium:first-child {
margin-left: var(--seed-dimension-x3_5);
}
.seed-text-input__prefixIcon--variant_outline-size_medium {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
.seed-text-input__prefixIcon--variant_outline-size_medium:first-child {
margin-left: var(--seed-dimension-x3_5);
}
.seed-text-input__suffixText--variant_outline-size_medium {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
.seed-text-input__suffixText--variant_outline-size_medium:last-child {
margin-right: var(--seed-dimension-x3_5);
}
.seed-text-input__suffixIcon--variant_outline-size_medium {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
.seed-text-input__suffixIcon--variant_outline-size_medium:last-child {
margin-right: var(--seed-dimension-x3_5);
}
.seed-text-input__root--variant_outline-size_responsive {
gap: var(--seed-dimension-x2_5);
min-height: var(--seed-dimension-x13);
border-radius: var(--seed-radius-r3);
}
@media (width >= 1280px) {
.seed-text-input__root--variant_outline-size_responsive {
gap: var(--seed-dimension-x2);
min-height: var(--seed-dimension-x10);
border-radius: var(--seed-radius-r2);
}
}
.seed-text-input__value--variant_outline-size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-text-input__value--variant_outline-size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-text-input__value--variant_outline-size_responsive::placeholder {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-text-input__value--variant_outline-size_responsive::placeholder {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-text-input__value--variant_outline-size_responsive:first-child {
padding-left: var(--seed-dimension-x4);
}
@media (width >= 1280px) {
.seed-text-input__value--variant_outline-size_responsive:first-child {
padding-left: var(--seed-dimension-x3_5);
}
}
.seed-text-input__value--variant_outline-size_responsive:last-child {
padding-right: var(--seed-dimension-x4);
}
@media (width >= 1280px) {
.seed-text-input__value--variant_outline-size_responsive:last-child {
padding-right: var(--seed-dimension-x3_5);
}
}
.seed-text-input__prefixText--variant_outline-size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-text-input__prefixText--variant_outline-size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-text-input__prefixText--variant_outline-size_responsive:first-child {
margin-left: var(--seed-dimension-x4);
}
@media (width >= 1280px) {
.seed-text-input__prefixText--variant_outline-size_responsive:first-child {
margin-left: var(--seed-dimension-x3_5);
}
}
.seed-text-input__prefixIcon--variant_outline-size_responsive {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
@media (width >= 1280px) {
.seed-text-input__prefixIcon--variant_outline-size_responsive {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
}
.seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
margin-left: var(--seed-dimension-x4);
}
@media (width >= 1280px) {
.seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
margin-left: var(--seed-dimension-x3_5);
}
}
.seed-text-input__suffixText--variant_outline-size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
@media (width >= 1280px) {
.seed-text-input__suffixText--variant_outline-size_responsive {
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
}
}
.seed-text-input__suffixText--variant_outline-size_responsive:last-child {
margin-right: var(--seed-dimension-x4);
}
@media (width >= 1280px) {
.seed-text-input__suffixText--variant_outline-size_responsive:last-child {
margin-right: var(--seed-dimension-x3_5);
}
}
.seed-text-input__suffixIcon--variant_outline-size_responsive {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
@media (width >= 1280px) {
.seed-text-input__suffixIcon--variant_outline-size_responsive {
width: var(--seed-dimension-x4);
height: var(--seed-dimension-x4);
}
}
.seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
margin-right: var(--seed-dimension-x4);
}
@media (width >= 1280px) {
.seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
margin-right: var(--seed-dimension-x3_5);
}
}
.seed-text-input__root--variant_underline-size_large {
gap: var(--seed-dimension-x2_5);
min-height: var(--seed-dimension-x10);
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
}
.seed-text-input__value--variant_underline-size_large, .seed-text-input__value--variant_underline-size_large::placeholder, .seed-text-input__prefixText--variant_underline-size_large {
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
}
.seed-text-input__prefixIcon--variant_underline-size_large {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
}
.seed-text-input__suffixText--variant_underline-size_large {
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
}
.seed-text-input__suffixIcon--variant_underline-size_large {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
}
.seed-text-input__root--variant_underline-size_medium {
gap: var(--seed-dimension-x2);
min-height: 34px;
padding-top: var(--seed-dimension-x1_5);
padding-bottom: var(--seed-dimension-x1_5);
}
.seed-text-input__value--variant_underline-size_medium, .seed-text-input__value--variant_underline-size_medium::placeholder, .seed-text-input__prefixText--variant_underline-size_medium {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-text-input__prefixIcon--variant_underline-size_medium {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-text-input__suffixText--variant_underline-size_medium {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
.seed-text-input__suffixIcon--variant_underline-size_medium {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
.seed-text-input__root--variant_underline-size_responsive {
gap: var(--seed-dimension-x2_5);
min-height: var(--seed-dimension-x10);
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
}
@media (width >= 1280px) {
.seed-text-input__root--variant_underline-size_responsive {
gap: var(--seed-dimension-x2);
min-height: 34px;
padding-top: var(--seed-dimension-x1_5);
padding-bottom: var(--seed-dimension-x1_5);
}
}
.seed-text-input__value--variant_underline-size_responsive {
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
}
@media (width >= 1280px) {
.seed-text-input__value--variant_underline-size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
}
.seed-text-input__value--variant_underline-size_responsive::placeholder {
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
}
@media (width >= 1280px) {
.seed-text-input__value--variant_underline-size_responsive::placeholder {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
}
.seed-text-input__prefixText--variant_underline-size_responsive {
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
}
@media (width >= 1280px) {
.seed-text-input__prefixText--variant_underline-size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
}
.seed-text-input__prefixIcon--variant_underline-size_responsive {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
}
@media (width >= 1280px) {
.seed-text-input__prefixIcon--variant_underline-size_responsive {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
}
.seed-text-input__suffixText--variant_underline-size_responsive {
font-size: var(--seed-font-size-t6);
line-height: var(--seed-line-height-t6);
}
@media (width >= 1280px) {
.seed-text-input__suffixText--variant_underline-size_responsive {
font-size: var(--seed-font-size-t5);
line-height: var(--seed-line-height-t5);
}
}
.seed-text-input__suffixIcon--variant_underline-size_responsive {
width: var(--seed-dimension-x6);
height: var(--seed-dimension-x6);
}
@media (width >= 1280px) {
.seed-text-input__suffixIcon--variant_underline-size_responsive {
width: var(--seed-dimension-x5);
height: var(--seed-dimension-x5);
}
}
.seed-toggle-button {
box-sizing: border-box;
cursor: pointer;
text-transform: none;
white-space: nowrap;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: var(--seed-dimension-x0_5) solid transparent;
outline-offset: var(--seed-dimension-x0_5);
border: none;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-family: inherit;
text-decoration: none;
display: inline-flex;
position: relative;
}
.seed-toggle-button:is(:focus-visible, [data-focus-visible]) {
outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
outline-offset: var(--seed-dimension-x0_5);
}
.seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
cursor: not-allowed;
}
.seed-toggle-button {
transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
font-weight: var(--seed-font-weight-bold);
}
.seed-toggle-button--variant_brandSolid {
background: var(--seed-color-bg-brand-solid);
color: var(--seed-color-palette-static-white);
--track-color: var(--seed-color-palette-static-white-alpha-300);
--range-color: var(--seed-color-palette-static-white);
}
@media (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
background: var(--seed-color-bg-brand-solid-pressed);
}
}
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
background: var(--seed-color-bg-neutral-weak);
color: var(--seed-color-fg-neutral);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
}
.seed-toggle-button--variant_brandSolid[data-loading] {
background: var(--seed-color-bg-brand-solid-pressed);
}
.seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed])[data-loading] {
background: var(--seed-color-bg-neutral-weak-pressed);
}
.seed-toggle-button--variant_brandSolid {
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
}
.seed-toggle-button--variant_neutralWeak {
background: var(--seed-color-bg-neutral-weak);
color: var(--seed-color-fg-neutral);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
background: var(--seed-color-bg-neutral-weak);
color: var(--seed-color-fg-neutral);
--track-color: var(--seed-color-palette-gray-500);
--range-color: var(--seed-color-fg-neutral);
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
@media (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
@media not all and (hover: hover) and (pointer: fine) {
.seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
background: var(--seed-color-bg-neutral-weak-pressed);
}
}
.seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
background: var(--seed-color-bg-disabled);
color: var(--seed-color-fg-disabled);
--seed-prefix-icon-color: var(--seed-color-fg-disabled);
--seed-suffix-icon-color: var(--seed-color-fg-disabled);
}
.seed-toggle-button--variant_neutralWeak[data-loading], .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed])[data-loading] {
background: var(--seed-color-bg-neutral-weak-pressed);
}
.seed-toggle-button--variant_neutralWeak {
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
}
.seed-toggle-button--size_xsmall {
height: var(--seed-dimension-x8);
border-radius: var(--seed-radius-full);
gap: var(--seed-dimension-x1);
padding-left: var(--seed-dimension-x3_5);
padding-right: var(--seed-dimension-x3_5);
padding-top: var(--seed-dimension-x1_5);
padding-bottom: var(--seed-dimension-x1_5);
font-size: var(--seed-font-size-t3);
line-height: var(--seed-line-height-t3);
--size: 14px;
--thickness: 2px;
--seed-prefix-icon-size: var(--seed-dimension-x3_5);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
}
.seed-toggle-button--size_small {
height: var(--seed-dimension-x9);
border-radius: var(--seed-radius-full);
gap: var(--seed-dimension-x1);
padding-left: var(--seed-dimension-x4);
padding-right: var(--seed-dimension-x4);
padding-top: var(--seed-dimension-x2);
padding-bottom: var(--seed-dimension-x2);
font-size: var(--seed-font-size-t4);
line-height: var(--seed-line-height-t4);
--size: 14px;
--thickness: 2px;
--seed-prefix-icon-size: var(--seed-dimension-x3_5);
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
}
@keyframes seed-enter {
from {
opacity: var(--seed-enter-opacity, 1);
transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0)
scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1))
rotate(var(--seed-enter-rotate, 0));
}
}
@keyframes seed-exit {
to {
opacity: var(--seed-exit-opacity, 1);
transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0)
scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1))
rotate(var(--seed-exit-rotate, 0));
}
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes slide-x {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes progress-circle-head {
0% {
stroke-dasharray: 0 1000%;
}
75% {
stroke-dasharray: var(--circumference), 1000%;
}
100% {
stroke-dasharray: var(--circumference), 1000%;
}
}
@keyframes progress-circle-tail {
0% {
stroke-dashoffset: 0;
}
33.33% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: calc(var(--circumference) * -1);
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes drawer-slide-from-bottom {
from {
transform: translate3d(0, var(--initial-transform, 100%), 0);
}
to {
transform: translate3d(0, var(--snap-point-height, 0), 0);
}
}
@keyframes drawer-slide-to-bottom {
to {
transform: translate3d(0, var(--initial-transform, 100%), 0);
}
}
@media (width >= 480px) {
.seed-box {
--seed-box-padding: var(--seed-box-padding-sm);
--seed-box-padding-y: var(--seed-box-padding-y-sm);
--seed-box-padding-x: var(--seed-box-padding-x-sm);
--seed-box-padding-bottom: var(--seed-box-padding-bottom-sm);
--seed-box-padding-top: var(--seed-box-padding-top-sm);
--seed-box-padding-left: var(--seed-box-padding-left-sm);
--seed-box-padding-right: var(--seed-box-padding-right-sm);
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
--seed-box-bleed-top: var(--seed-box-bleed-top-sm);
--seed-box-bleed-left: var(--seed-box-bleed-left-sm);
--seed-box-bleed-right: var(--seed-box-bleed-right-sm);
--seed-box-margin: var(--seed-box-margin-sm);
--seed-box-margin-y: var(--seed-box-margin-y-sm);
--seed-box-margin-x: var(--seed-box-margin-x-sm);
--seed-box-margin-top: var(--seed-box-margin-top-sm);
--seed-box-margin-bottom: var(--seed-box-margin-bottom-sm);
--seed-box-margin-left: var(--seed-box-margin-left-sm);
--seed-box-margin-right: var(--seed-box-margin-right-sm);
--seed-box-min-height: var(--seed-box-min-height-sm);
--seed-box-max-height: var(--seed-box-max-height-sm);
--seed-box-height: var(--seed-box-height-sm);
--seed-box-min-width: var(--seed-box-min-width-sm);
--seed-box-max-width: var(--seed-box-max-width-sm);
--seed-box-width: var(--seed-box-width-sm);
--seed-box-display: var(--seed-box-display-sm);
--seed-box-flex-direction: var(--seed-box-flex-direction-sm);
--seed-box-gap: var(--seed-box-gap-sm);
}
.seed-grid {
--seed-grid-columns: var(--seed-grid-columns-sm);
--seed-grid-rows: var(--seed-grid-rows-sm);
}
.seed-action-button {
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
--seed-box-bleed-top: var(--seed-box-bleed-top-sm);
--seed-box-bleed-left: var(--seed-box-bleed-left-sm);
--seed-box-bleed-right: var(--seed-box-bleed-right-sm);
}
.seed-bottom-sheet__body {
--seed-box-padding-x: var(--seed-box-padding-x-sm);
--seed-box-height: var(--seed-box-height-sm);
--seed-box-min-height: var(--seed-box-min-height-sm);
--seed-box-max-height: var(--seed-box-max-height-sm);
}
.seed-help-bubble__content {
--seed-box-max-width: var(--seed-box-max-width-sm);
}
.seed-list-item__prefix {
--seed-box-padding-right: var(--seed-box-padding-right-sm);
}
.seed-list-item__suffix {
--seed-box-gap: var(--seed-box-gap-sm);
}
.seed-list-item__content {
--seed-box-gap: var(--seed-box-gap-sm);
--seed-box-padding-right: var(--seed-box-padding-right-sm);
}
.seed-side-panel__content {
--seed-box-width: var(--seed-box-width-sm);
--seed-box-max-width: var(--seed-box-max-width-sm);
}
.seed-side-panel__body {
--seed-box-padding-x: var(--seed-box-padding-x-sm);
--seed-box-height: var(--seed-box-height-sm);
--seed-box-min-height: var(--seed-box-min-height-sm);
--seed-box-max-height: var(--seed-box-max-height-sm);
}
.seed-skeleton {
--seed-box-width: var(--seed-box-width-sm);
--seed-box-height: var(--seed-box-height-sm);
}
}
@media (width >= 768px) {
.seed-box {
--seed-box-padding: var(--seed-box-padding-md);
--seed-box-padding-y: var(--seed-box-padding-y-md);
--seed-box-padding-x: var(--seed-box-padding-x-md);
--seed-box-padding-bottom: var(--seed-box-padding-bottom-md);
--seed-box-padding-top: var(--seed-box-padding-top-md);
--seed-box-padding-left: var(--seed-box-padding-left-md);
--seed-box-padding-right: var(--seed-box-padding-right-md);
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
--seed-box-bleed-top: var(--seed-box-bleed-top-md);
--seed-box-bleed-left: var(--seed-box-bleed-left-md);
--seed-box-bleed-right: var(--seed-box-bleed-right-md);
--seed-box-margin: var(--seed-box-margin-md);
--seed-box-margin-y: var(--seed-box-margin-y-md);
--seed-box-margin-x: var(--seed-box-margin-x-md);
--seed-box-margin-top: var(--seed-box-margin-top-md);
--seed-box-margin-bottom: var(--seed-box-margin-bottom-md);
--seed-box-margin-left: var(--seed-box-margin-left-md);
--seed-box-margin-right: var(--seed-box-margin-right-md);
--seed-box-min-height: var(--seed-box-min-height-md);
--seed-box-max-height: var(--seed-box-max-height-md);
--seed-box-height: var(--seed-box-height-md);
--seed-box-min-width: var(--seed-box-min-width-md);
--seed-box-max-width: var(--seed-box-max-width-md);
--seed-box-width: var(--seed-box-width-md);
--seed-box-display: var(--seed-box-display-md);
--seed-box-flex-direction: var(--seed-box-flex-direction-md);
--seed-box-gap: var(--seed-box-gap-md);
}
.seed-grid {
--seed-grid-columns: var(--seed-grid-columns-md);
--seed-grid-rows: var(--seed-grid-rows-md);
}
.seed-action-button {
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
--seed-box-bleed-top: var(--seed-box-bleed-top-md);
--seed-box-bleed-left: var(--seed-box-bleed-left-md);
--seed-box-bleed-right: var(--seed-box-bleed-right-md);
}
.seed-bottom-sheet__body {
--seed-box-padding-x: var(--seed-box-padding-x-md);
--seed-box-height: var(--seed-box-height-md);
--seed-box-min-height: var(--seed-box-min-height-md);
--seed-box-max-height: var(--seed-box-max-height-md);
}
.seed-help-bubble__content {
--seed-box-max-width: var(--seed-box-max-width-md);
}
.seed-list-item__prefix {
--seed-box-padding-right: var(--seed-box-padding-right-md);
}
.seed-list-item__suffix {
--seed-box-gap: var(--seed-box-gap-md);
}
.seed-list-item__content {
--seed-box-gap: var(--seed-box-gap-md);
--seed-box-padding-right: var(--seed-box-padding-right-md);
}
.seed-side-panel__content {
--seed-box-width: var(--seed-box-width-md);
--seed-box-max-width: var(--seed-box-max-width-md);
}
.seed-side-panel__body {
--seed-box-padding-x: var(--seed-box-padding-x-md);
--seed-box-height: var(--seed-box-height-md);
--seed-box-min-height: var(--seed-box-min-height-md);
--seed-box-max-height: var(--seed-box-max-height-md);
}
.seed-skeleton {
--seed-box-width: var(--seed-box-width-md);
--seed-box-height: var(--seed-box-height-md);
}
}
@media (width >= 1280px) {
.seed-box {
--seed-box-padding: var(--seed-box-padding-lg);
--seed-box-padding-y: var(--seed-box-padding-y-lg);
--seed-box-padding-x: var(--seed-box-padding-x-lg);
--seed-box-padding-bottom: var(--seed-box-padding-bottom-lg);
--seed-box-padding-top: var(--seed-box-padding-top-lg);
--seed-box-padding-left: var(--seed-box-padding-left-lg);
--seed-box-padding-right: var(--seed-box-padding-right-lg);
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
--seed-box-bleed-top: var(--seed-box-bleed-top-lg);
--seed-box-bleed-left: var(--seed-box-bleed-left-lg);
--seed-box-bleed-right: var(--seed-box-bleed-right-lg);
--seed-box-margin: var(--seed-box-margin-lg);
--seed-box-margin-y: var(--seed-box-margin-y-lg);
--seed-box-margin-x: var(--seed-box-margin-x-lg);
--seed-box-margin-top: var(--seed-box-margin-top-lg);
--seed-box-margin-bottom: var(--seed-box-margin-bottom-lg);
--seed-box-margin-left: var(--seed-box-margin-left-lg);
--seed-box-margin-right: var(--seed-box-margin-right-lg);
--seed-box-min-height: var(--seed-box-min-height-lg);
--seed-box-max-height: var(--seed-box-max-height-lg);
--seed-box-height: var(--seed-box-height-lg);
--seed-box-min-width: var(--seed-box-min-width-lg);
--seed-box-max-width: var(--seed-box-max-width-lg);
--seed-box-width: var(--seed-box-width-lg);
--seed-box-display: var(--seed-box-display-lg);
--seed-box-flex-direction: var(--seed-box-flex-direction-lg);
--seed-box-gap: var(--seed-box-gap-lg);
}
.seed-grid {
--seed-grid-columns: var(--seed-grid-columns-lg);
--seed-grid-rows: var(--seed-grid-rows-lg);
}
.seed-action-button {
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
--seed-box-bleed-top: var(--seed-box-bleed-top-lg);
--seed-box-bleed-left: var(--seed-box-bleed-left-lg);
--seed-box-bleed-right: var(--seed-box-bleed-right-lg);
}
.seed-bottom-sheet__body {
--seed-box-padding-x: var(--seed-box-padding-x-lg);
--seed-box-height: var(--seed-box-height-lg);
--seed-box-min-height: var(--seed-box-min-height-lg);
--seed-box-max-height: var(--seed-box-max-height-lg);
}
.seed-help-bubble__content {
--seed-box-max-width: var(--seed-box-max-width-lg);
}
.seed-list-item__prefix {
--seed-box-padding-right: var(--seed-box-padding-right-lg);
}
.seed-list-item__suffix {
--seed-box-gap: var(--seed-box-gap-lg);
}
.seed-list-item__content {
--seed-box-gap: var(--seed-box-gap-lg);
--seed-box-padding-right: var(--seed-box-padding-right-lg);
}
.seed-side-panel__content {
--seed-box-width: var(--seed-box-width-lg);
--seed-box-max-width: var(--seed-box-max-width-lg);
}
.seed-side-panel__body {
--seed-box-padding-x: var(--seed-box-padding-x-lg);
--seed-box-height: var(--seed-box-height-lg);
--seed-box-min-height: var(--seed-box-min-height-lg);
--seed-box-max-height: var(--seed-box-max-height-lg);
}
.seed-skeleton {
--seed-box-width: var(--seed-box-width-lg);
--seed-box-height: var(--seed-box-height-lg);
}
}
@media (width >= 1440px) {
.seed-box {
--seed-box-padding: var(--seed-box-padding-xl);
--seed-box-padding-y: var(--seed-box-padding-y-xl);
--seed-box-padding-x: var(--seed-box-padding-x-xl);
--seed-box-padding-bottom: var(--seed-box-padding-bottom-xl);
--seed-box-padding-top: var(--seed-box-padding-top-xl);
--seed-box-padding-left: var(--seed-box-padding-left-xl);
--seed-box-padding-right: var(--seed-box-padding-right-xl);
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
--seed-box-bleed-top: var(--seed-box-bleed-top-xl);
--seed-box-bleed-left: var(--seed-box-bleed-left-xl);
--seed-box-bleed-right: var(--seed-box-bleed-right-xl);
--seed-box-margin: var(--seed-box-margin-xl);
--seed-box-margin-y: var(--seed-box-margin-y-xl);
--seed-box-margin-x: var(--seed-box-margin-x-xl);
--seed-box-margin-top: var(--seed-box-margin-top-xl);
--seed-box-margin-bottom: var(--seed-box-margin-bottom-xl);
--seed-box-margin-left: var(--seed-box-margin-left-xl);
--seed-box-margin-right: var(--seed-box-margin-right-xl);
--seed-box-min-height: var(--seed-box-min-height-xl);
--seed-box-max-height: var(--seed-box-max-height-xl);
--seed-box-height: var(--seed-box-height-xl);
--seed-box-min-width: var(--seed-box-min-width-xl);
--seed-box-max-width: var(--seed-box-max-width-xl);
--seed-box-width: var(--seed-box-width-xl);
--seed-box-display: var(--seed-box-display-xl);
--seed-box-flex-direction: var(--seed-box-flex-direction-xl);
--seed-box-gap: var(--seed-box-gap-xl);
}
.seed-grid {
--seed-grid-columns: var(--seed-grid-columns-xl);
--seed-grid-rows: var(--seed-grid-rows-xl);
}
.seed-action-button {
--seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
--seed-box-bleed-top: var(--seed-box-bleed-top-xl);
--seed-box-bleed-left: var(--seed-box-bleed-left-xl);
--seed-box-bleed-right: var(--seed-box-bleed-right-xl);
}
.seed-bottom-sheet__body {
--seed-box-padding-x: var(--seed-box-padding-x-xl);
--seed-box-height: var(--seed-box-height-xl);
--seed-box-min-height: var(--seed-box-min-height-xl);
--seed-box-max-height: var(--seed-box-max-height-xl);
}
.seed-help-bubble__content {
--seed-box-max-width: var(--seed-box-max-width-xl);
}
.seed-list-item__prefix {
--seed-box-padding-right: var(--seed-box-padding-right-xl);
}
.seed-list-item__suffix {
--seed-box-gap: var(--seed-box-gap-xl);
}
.seed-list-item__content {
--seed-box-gap: var(--seed-box-gap-xl);
--seed-box-padding-right: var(--seed-box-padding-right-xl);
}
.seed-side-panel__content {
--seed-box-width: var(--seed-box-width-xl);
--seed-box-max-width: var(--seed-box-max-width-xl);
}
.seed-side-panel__body {
--seed-box-padding-x: var(--seed-box-padding-x-xl);
--seed-box-height: var(--seed-box-height-xl);
--seed-box-min-height: var(--seed-box-min-height-xl);
--seed-box-max-height: var(--seed-box-max-height-xl);
}
.seed-skeleton {
--seed-box-width: var(--seed-box-width-xl);
--seed-box-height: var(--seed-box-height-xl);
}
}