html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
--odn-z-index-modal: 1040;
--odn-z-index-popup: 1050;
--odn-z-index-select: 1060;
--odn-z-index-message: 1070;
/* 基础 */
--odn-font-family:
-apple-system, system-ui, 'Helvetica Neue', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', arial,
sans-serif;
--odn-border-radius: 4px;
--odn-icon-size: 16px;
--odn-font-size: 14px;
--odn-control-height: 36px;
/* stylelint-disable-next-line number-max-precision */
--odn-line-height: 1.57142857;
--odn-color-icon: var(--odn-color-black-9);
--odn-color-icon-hover: var(--odn-color-black-10);
--odn-control-padding-horizontal: 12px;
--odn-line-width: 1px;
--odn-line-type: solid;
--odn-motion-duration-slow: 0.25s;
--odn-padding-xxs: 4px;
--odn-padding-xs: 8px;
/* 主色 */
--odn-color-primary: var(--odn-color-brand-6);
--odn-color-primary-hover: var(--odn-color-brand-7);
--odn-color-primary-active: var(--odn-color-brand-8);
--odn-primary-color: var(--odn-color-primary);
/* 逻辑颜色 */
--odn-color-text: var(--odn-color-solid-black-12);
--odn-color-text-placeholder: var(--odn-color-solid-black-9);
--odn-color-text-disabled: var(--odn-color-solid-black-8);
--odn-color-bg-container-disabled: var(--odn-color-solid-black-3);
--odn-color-border: var(--odn-color-black-6);
--odn-color-border-hover: var(--odn-color-black-7);
--odn-color-border-active: var(--odn-color-primary);
/* 文字 */
--odn-color-info: rgba(41, 107, 239, 100%);
--odn-color-link: rgba(41, 107, 239, 100%);
--odn-color-success: rgba(7, 193, 96, 100%);
--odn-color-warn: rgba(250, 142, 0, 100%);
--odn-color-error: rgba(230, 61, 46, 100%);
--odn-color-white: rgba(255, 255, 255, 100%);
--odn-color-black: rgba(0, 0, 0, 100%);
/* 拷贝自 blue 1-10，后续支持动态生成 */
--odn-color-brand-1: rgba(245, 248, 255, 100%);
--odn-color-brand-2: rgba(212, 225, 252, 100%);
--odn-color-brand-3: rgba(191, 211, 250, 100%);
--odn-color-brand-4: rgba(148, 181, 247, 100%);
--odn-color-brand-5: rgba(105, 151, 244, 100%);
--odn-color-brand-6: rgba(41, 107, 239, 100%);
--odn-color-brand-7: rgba(17, 84, 219, 100%);
--odn-color-brand-8: rgba(1, 66, 195, 100%);
--odn-color-brand-9: rgba(4, 54, 154, 100%);
--odn-color-brand-10: rgba(0, 33, 99, 100%);
/* 拷贝自 black 1-10，后续支持动态生成 */
--odn-color-black-1: rgba(73, 90, 122, 3%);
--odn-color-black-2: rgba(73, 89, 122, 5%);
--odn-color-black-3: rgba(74, 97, 143, 8%);
--odn-color-black-4: rgba(73, 90, 122, 10%);
--odn-color-black-5: rgba(73, 90, 122, 12%);
--odn-color-black-6: rgba(73, 90, 122, 16%);
--odn-color-black-7: rgba(69, 80, 102, 25%);
--odn-color-black-8: rgba(62, 69, 82, 36%);
--odn-color-black-9: rgba(51, 55, 61, 58%);
--odn-color-black-10: rgba(38, 38, 41, 72%);
--odn-color-black-11: rgba(38, 39, 41, 85%);
--odn-color-black-12: rgba(0, 0, 0, 95%);
/* 拷贝自 solid-black 1-12，后续支持动态生成 */
--odn-color-solid-black-1: rgba(250, 250, 251, 100%);
--odn-color-solid-black-2: rgba(246, 247, 248, 100%);
--odn-color-solid-black-3: rgba(241, 242, 246, 100%);
--odn-color-solid-black-4: rgba(237, 238, 242, 100%);
--odn-color-solid-black-5: rgba(233, 235, 239, 100%);
--odn-color-solid-black-6: rgba(226, 229, 234, 100%);
--odn-color-solid-black-7: rgba(209, 211, 217, 100%);
--odn-color-solid-black-8: rgba(186, 188, 193, 100%);
--odn-color-solid-black-9: rgba(137, 139, 143, 100%);
--odn-color-solid-black-10: rgba(98, 99, 101, 100%);
--odn-color-solid-black-11: rgba(70, 71, 73, 100%);
--odn-color-solid-black-12: rgba(13, 13, 13, 100%);
/* 拷贝自 blue 1-10，后续支持动态生成 */
--odn-color-blue-1: rgba(245, 248, 255, 100%);
--odn-color-blue-2: rgba(212, 225, 252, 100%);
--odn-color-blue-3: rgba(191, 211, 250, 100%);
--odn-color-blue-4: rgba(148, 181, 247, 100%);
--odn-color-blue-5: rgba(105, 151, 244, 100%);
--odn-color-blue-6: rgba(41, 107, 239, 100%);
--odn-color-blue-7: rgba(17, 84, 219, 100%);
--odn-color-blue-8: rgba(1, 66, 195, 100%);
--odn-color-blue-9: rgba(4, 54, 154, 100%);
--odn-color-blue-10: rgba(0, 33, 99, 100%);
/* 拷贝自 green 1-10，后续支持动态生成 */
--odn-color-green-1: rgba(243, 252, 247, 100%);
--odn-color-green-2: rgba(205, 243, 223, 100%);
--odn-color-green-3: rgba(156, 230, 191, 100%);
--odn-color-green-4: rgba(131, 224, 175, 100%);
--odn-color-green-5: rgba(81, 212, 144, 100%);
--odn-color-green-6: rgba(7, 193, 96, 100%);
--odn-color-green-7: rgba(6, 164, 82, 100%);
--odn-color-green-8: rgba(5, 135, 67, 100%);
--odn-color-green-9: rgba(3, 96, 48, 100%);
--odn-color-green-10: rgba(2, 68, 34, 100%);
/* 拷贝自 orange 1-10，后续支持动态生成 */
--odn-color-orange-1: rgba(255, 248, 240, 100%);
--odn-color-orange-2: rgba(254, 232, 204, 100%);
--odn-color-orange-3: rgba(254, 221, 178, 100%);
--odn-color-orange-4: rgba(253, 199, 128, 100%);
--odn-color-orange-5: rgba(252, 176, 76, 100%);
--odn-color-orange-6: rgba(250, 142, 0, 100%);
--odn-color-orange-7: rgba(230, 131, 0, 100%);
--odn-color-orange-8: rgba(211, 120, 0, 100%);
--odn-color-orange-9: rgba(169, 96, 0, 100%);
--odn-color-orange-10: rgba(133, 76, 0, 100%);
/* 拷贝自 red 1-10，后续支持动态生成 */
--odn-color-red-1: rgba(255, 248, 247, 100%);
--odn-color-red-2: rgba(251, 221, 218, 100%);
--odn-color-red-3: rgba(248, 195, 190, 100%);
--odn-color-red-4: rgba(242, 158, 151, 100%);
--odn-color-red-5: rgba(237, 119, 109, 100%);
--odn-color-red-6: rgba(230, 61, 46, 100%);
--odn-color-red-7: rgba(195, 52, 39, 100%);
--odn-color-red-8: rgba(161, 43, 32, 100%);
--odn-color-red-9: rgba(115, 30, 23, 100%);
--odn-color-red-10: rgba(87, 10, 4, 100%);
/* typography */
--odn-font-size-comment: 12px;
--odn-font-leading-comment: 20px;
--odn-font-size-text-mn: 12px;
--odn-font-leading-text-mn: 20px;
--odn-font-size-text-sm: 13px;
--odn-font-leading-text-sm: 22px;
--odn-font-size-text-md: 14px;
--odn-font-leading-text-md: 22px;
--odn-font-size-text-lg: 16px;
--odn-font-leading-text-lg: 24px;
--odn-font-size-headline-6: 14px;
--odn-font-leading-headline-6: 22px;
--odn-font-size-headline-5: 16px;
--odn-font-leading-headline-5: 24px;
--odn-font-size-headline-4: 18px;
--odn-font-leading-headline-4: 26px;
--odn-font-size-headline-3: 24px;
--odn-font-leading-headline-3: 32px;
--odn-font-size-headline-2: 30px;
--odn-font-leading-headline-2: 38px;
--odn-font-size-headline-1: 36px;
--odn-font-leading-headline-1: 44px;
/* shadow */
--odn-shadow-1: 0 3px 6px 0 rgba(0, 0, 0, 4%);
--odn-shadow-2: 0 3px 5px 0 rgba(0, 0, 0, 5%), 0 6px 15px 0 rgba(0, 0, 0, 5%);
--odn-shadow-3:
0 4px 10px 0 rgba(0, 0, 0, 7%), 0 12px 24px 0 rgba(0, 0, 0, 8%);
--odn-shadow-4:
0 6px 15px 0 rgba(0, 0, 0, 7%), 0 10 36px 0 rgba(0, 0, 0, 16%);
/* 通用组件 */
--odn-color-bg-elevated: #fff;
/* popup */
--odn-popup-max-width: 250px;
--odn-popup-control-height: 36px;
--odn-popup-font-size: 13px;
--odn-popup-line-height: 20px;
--odn-popup-border-radius: 6px;
--odn-popup-border: none;
--odn-popup-box-shadow: 0 0 0 1px rgba(0, 0, 0, 6%);
--odn-popup-filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 5%))
drop-shadow(0 6px 15px rgba(0, 0, 0, 5%));
/* popover */
--odn-popover-padding-block: 16px;
--odn-popover-padding-inline: 16px;
/* tooltip */
--odn-tooltip-padding-block: 10px;
--odn-tooltip-padding-inline: 12px;
}
html * {
box-sizing: inherit;
}
html *::before,
html *::after {
box-sizing: inherit;
}
html[class*='od-focus-disabled'] :focus {
outline: none !important;
}
/* :not(input):not(textarea):focus {
outline: 2px auto rgba(19, 124, 189, 60%);
outline-offset: 2px;
-moz-outline-radius: 6px;
} */
ul,
ol,
li {
list-style: none;
}
a[disabled] {
pointer-events: none;
}
[data-scrollbar-custom]::-webkit-scrollbar {
width: 14px;
height: 14px;
}
[data-scrollbar-custom]::-webkit-scrollbar-thumb {
min-width: 14px;
min-height: 14px;
background-color: rgba(0, 0, 0, 10%);
background-clip: content-box;
border: 4px solid transparent;
border-radius: 14px;
}
[data-scrollbar-custom]::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0%);
}
[data-scrollbar-custom]::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 20%);
}
[data-scrollbar-custom]::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 0, 0, 30%);
}
@keyframes odn-slide-up-in {
0% {
opacity: 0;
transform: translate3d(0, -4px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes odn-slide-up-out {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, -4px, 0);
}
}
@keyframes odn-slide-down-in {
0% {
opacity: 0;
transform: translate3d(0, 4px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes odn-slide-down-out {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 4px, 0);
}
}
html {
--odn-message-top: 0;
--odn-message-gap: 14px;
--odn-message-height: 54px;
--odn-message-width: 356px;
--odn-message-padding-inline: 16px;
--odn-message-font-size: 13px;
--odn-message-border-radius: 8px;
--odn-message-success-color: #000;
--odn-message-success-bg: #f6fff2;
--odn-message-success-border-color: #d9fac8;
--odn-message-success-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--odn-message-success-prefix-color: var(--odn-color-green-6);
--odn-message-info-color: #000;
--odn-message-info-bg: hsl(208deg, 100%, 97%);
--odn-message-info-border-color: hsl(221deg, 91%, 93%);
--odn-message-info-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--odn-message-info-prefix-color: var(--odn-color-blue-6);
--odn-message-warning-color: #000;
--odn-message-warning-bg: hsl(49deg, 100%, 97%);
--odn-message-warning-border-color: hsl(49deg, 91%, 84%);
--odn-message-warning-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--odn-message-warning-prefix-color: var(--odn-color-orange-6);
--odn-message-danger-color: #000;
--odn-message-danger-bg: hsl(359deg, 100%, 97%);
--odn-message-danger-border-color: hsl(359deg, 100%, 94%);
--odn-message-danger-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--odn-message-danger-prefix-color: var(--odn-color-red-6);
}
[data-odn-message-container] {
position: fixed;
top: var(--odn-message-top);
left: 0;
z-index: var(--odn-z-index-message);
width: 100vw;
opacity: 0;
transform: translate3d(0, -68px, 0);
transition: 0.25s cubic-bezier(0, 0, 0.2, 1) all;
}
[data-odn-message] {
position: absolute;
top: 16px;
left: 50%;
transform: translate3d(-50%, 0, 0);
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--odn-message-padding-inline);
height: var(--odn-message-height);
min-width: var(--odn-message-width);
border: 1px solid transparent;
border-radius: var(--odn-message-border-radius);
transition: inherit;
}
[data-odn-message]::after {
content: "";
position: absolute;
left: 0;
height: calc(var(--odn-message-gap) + 1px);
bottom: 100%;
width: 100%;
}
[data-odn-message-prefix-icon] {
width: 16px;
height: 16px;
}
[data-odn-message-content] {
flex: 1;
margin-left: 8px;
font-size: var(--odn-message-font-size);
}
[data-odn-message-close-icon] {
width: 18px;
height: 18px;
fill: hsl(220, 3%, 59%);
cursor: pointer;
}
[data-odn-message-close-icon]:hover {
fill: hsl(220, 3%, 45%);
}
[data-odn-message][data-odn-message-intent=success] {
color: var(--odn-message-success-color);
background: var(--odn-message-success-bg);
border-color: var(--odn-message-success-border-color);
box-shadow: var(--odn-message-success-box-shadow);
}
[data-odn-message][data-odn-message-intent=success] [data-odn-message-prefix-icon] {
color: var(--odn-message-success-prefix-color);
}
[data-odn-message][data-odn-message-intent=info] {
color: var(--odn-message-info-color);
background: var(--odn-message-info-bg);
border-color: var(--odn-message-info-border-color);
box-shadow: var(--odn-message-info-box-shadow);
}
[data-odn-message][data-odn-message-intent=info] [data-odn-message-prefix-icon] {
color: var(--odn-message-info-prefix-color);
}
[data-odn-message][data-odn-message-intent=warning] {
color: var(--odn-message-warning-color);
background: var(--odn-message-warning-bg);
border-color: var(--odn-message-warning-border-color);
box-shadow: var(--odn-message-warning-box-shadow);
}
[data-odn-message][data-odn-message-intent=warning] [data-odn-message-prefix-icon] {
color: var(--odn-message-warning-prefix-color);
}
[data-odn-message][data-odn-message-intent=danger],
[data-odn-message][data-odn-message-intent=error] {
color: var(--odn-message-danger-color);
background: var(--odn-message-danger-bg);
border-color: var(--odn-message-danger-border-color);
box-shadow: var(--odn-message-danger-box-shadow);
}
[data-odn-message][data-odn-message-intent=danger] [data-odn-message-prefix-icon],
[data-odn-message][data-odn-message-intent=error] [data-odn-message-prefix-icon] {
color: var(--odn-message-danger-prefix-color);
}
html {
--odn-input-padding-block-medium: 6px;
--odn-input-padding-inline-medium: 12px;
--odn-input-font-size-medium: 14px;
--odn-input-line-height-medium: 1.5714285714285714;
--odn-input-border-radius-medium: 6px;
--odn-input-icon-size-medium: 16px;
--odn-input-icon-margin-inline-medium: 4px;
--odn-input-padding-block-small: 4px;
--odn-input-padding-inline-small: 12px;
--odn-input-font-size-small: 12px;
--odn-input-line-height-small: 1.6666666666666667;
--odn-input-border-radius-small: 6px;
--odn-input-icon-size-small: 14px;
--odn-input-icon-margin-inline-small: 4px;
--odn-input-padding-block-large: 8px;
--odn-input-padding-inline-large: 12px;
--odn-input-font-size-large: 16px;
--odn-input-line-height-large: 1.5;
--odn-input-border-radius-large: 6px;
--odn-input-icon-size-large: 18px;
--odn-input-icon-margin-inline-large: 4px;
--odn-input-bg-normal: #fff;
--odn-input-bg-normal-hover: var(--odn-color-black-1);
--odn-input-bg-normal-focus: #fff;
--odn-input-bg-danger: #fff;
--odn-input-bg-danger-hover: var(--odn-color-black-1);
--odn-input-bg-danger-focus: #fff;
--odn-input-bg-disabled: var(--odn-color-black-3);
--odn-input-color-normal: var(--odn-color-black-12);
--odn-input-color-normal-hover: var(--odn-color-black-12);
--odn-input-color-normal-focus: var(--odn-color-black-12);
--odn-input-color-danger: var(--odn-color-black-12);
--odn-input-color-danger-hover: var(--odn-color-black-12);
--odn-input-color-danger-focus: var(--odn-color-black-12);
--odn-input-color-disabled: var(--odn-color-black-8);
--odn-input-border-width: 1px;
--odn-input-border-style: solid;
--odn-input-border-normal: var(--odn-color-black-6);
--odn-input-border-normal-hover: var(--odn-color-black-7);
--odn-input-border-normal-focus: var(--odn-color-blue-6);
--odn-input-border-danger: var(--odn-color-red-6);
--odn-input-border-danger-hover: var(--odn-color-red-6);
--odn-input-border-danger-focus: var(--odn-color-red-6);
--odn-input-border-disabled: var(--odn-color-black-6);
--odn-input-shadow-normal: none;
--odn-input-shadow-normal-hover: none;
--odn-input-shadow-normal-focus: 0 0 0 2px var(--odn-color-blue-2);
--odn-input-shadow-danger: none;
--odn-input-shadow-danger-hover: none;
--odn-input-shadow-danger-focus: 0 0 0 2px var(--odn-color-red-2);
--odn-input-shadow-disabled: none;
}
[data-odn-input] {
list-style: none;
position: relative;
display: inline-flex;
align-items: center;
min-width: 0;
transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-input-el] {
position: relative;
width: 100%;
min-width: 0;
font-size: inherit;
border: none;
border-radius: 0;
outline: none;
background: transparent;
color: inherit;
}
[data-odn-input-el]::-webkit-search-decoration, [data-odn-input-el]::-webkit-search-cancel-button {
appearance: none;
}
[data-odn-input-size=small] {
font-size: var(--odn-input-font-size-small);
line-height: var(--odn-input-line-height-small);
border-radius: var(--odn-input-border-radius-small);
}
[data-odn-input-size=small] [data-odn-input-left-element] > svg:only-child {
margin-inline-end: var(--odn-input-icon-margin-inline-small);
width: var(--odn-input-icon-size-small);
height: var(--odn-input-icon-size-small);
}
[data-odn-input-size=small] [data-odn-input-right-element] > svg:only-child {
margin-inline-start: var(--odn-input-icon-margin-inline-small);
width: var(--odn-input-icon-size-small);
height: var(--odn-input-icon-size-small);
}
[data-odn-input-size=small]:not([data-odn-input-textarea=true]) {
padding: var(--odn-input-padding-block-small) var(--odn-input-padding-inline-small);
}
[data-odn-input-size=small][data-odn-input-textarea=true] [data-odn-input-el] {
padding: var(--odn-input-padding-block-small) var(--odn-input-padding-inline-small);
}
[data-odn-input-size=medium] {
font-size: var(--odn-input-font-size-medium);
line-height: var(--odn-input-line-height-medium);
border-radius: var(--odn-input-border-radius-medium);
}
[data-odn-input-size=medium] [data-odn-input-left-element] > svg:only-child {
margin-inline-end: var(--odn-input-icon-margin-inline-medium);
width: var(--odn-input-icon-size-medium);
height: var(--odn-input-icon-size-medium);
}
[data-odn-input-size=medium] [data-odn-input-right-element] > svg:only-child {
margin-inline-start: var(--odn-input-icon-margin-inline-medium);
width: var(--odn-input-icon-size-medium);
height: var(--odn-input-icon-size-medium);
}
[data-odn-input-size=medium]:not([data-odn-input-textarea=true]) {
padding: var(--odn-input-padding-block-medium) var(--odn-input-padding-inline-medium);
}
[data-odn-input-size=medium][data-odn-input-textarea=true] [data-odn-input-el] {
padding: var(--odn-input-padding-block-medium) var(--odn-input-padding-inline-medium);
}
[data-odn-input-size=large] {
font-size: var(--odn-input-font-size-large);
line-height: var(--odn-input-line-height-large);
border-radius: var(--odn-input-border-radius-large);
}
[data-odn-input-size=large] [data-odn-input-left-element] > svg:only-child {
margin-inline-end: var(--odn-input-icon-margin-inline-large);
width: var(--odn-input-icon-size-large);
height: var(--odn-input-icon-size-large);
}
[data-odn-input-size=large] [data-odn-input-right-element] > svg:only-child {
margin-inline-start: var(--odn-input-icon-margin-inline-large);
width: var(--odn-input-icon-size-large);
height: var(--odn-input-icon-size-large);
}
[data-odn-input-size=large]:not([data-odn-input-textarea=true]) {
padding: var(--odn-input-padding-block-large) var(--odn-input-padding-inline-large);
}
[data-odn-input-size=large][data-odn-input-textarea=true] [data-odn-input-el] {
padding: var(--odn-input-padding-block-large) var(--odn-input-padding-inline-large);
}
[data-odn-input-intent=normal]:not([data-odn-input-disabled=true]) {
color: var(--odn-input-color-normal);
background: var(--odn-input-bg-normal);
border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal);
box-shadow: var(--odn-input-shadow-normal);
}
[data-odn-input-intent=normal]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true]):hover {
color: var(--odn-input-color-normal-hover);
background: var(--odn-input-bg-normal-hover);
border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal-hover);
box-shadow: var(--odn-input-shadow-normal-hover);
}
[data-odn-input-intent=normal]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true])[data-odn-input-focused=true] {
color: var(--odn-input-color-normal-focus);
background: var(--odn-input-bg-normal-focus);
border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal-focus);
box-shadow: var(--odn-input-shadow-normal-focus);
}
[data-odn-input-intent=danger]:not([data-odn-input-disabled=true]) {
color: var(--odn-input-color-danger);
background: var(--odn-input-bg-danger);
border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger);
box-shadow: var(--odn-input-shadow-danger);
}
[data-odn-input-intent=danger]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true]):hover {
color: var(--odn-input-color-danger-hover);
background: var(--odn-input-bg-danger-hover);
border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger-hover);
box-shadow: var(--odn-input-shadow-danger-hover);
}
[data-odn-input-intent=danger]:not([data-odn-input-disabled=true]):not([data-odn-input-light=true])[data-odn-input-focused=true] {
color: var(--odn-input-color-danger-focus);
background: var(--odn-input-bg-danger-focus);
border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-danger-focus);
box-shadow: var(--odn-input-shadow-danger-focus);
}
[data-odn-input-disabled=true] {
color: var(--odn-input-color-disabled);
background: var(--odn-input-bg-disabled);
border: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-disabled);
box-shadow: var(--odn-input-shadow-disabled);
cursor: not-allowed;
}
[data-odn-input-disabled=true] [data-odn-input] {
cursor: not-allowed;
}
[data-odn-input-disabled=true] [data-odn-input-clear-icon] {
pointer-events: none;
}
[data-odn-input-over-limit=true] [data-odn-input-count] {
color: var(--odn-color-red-6);
}
[data-odn-input-light=true]:not([data-odn-input-disabled=true]) {
background: transparent;
border: var(--odn-input-border-width) var(--odn-input-border-style) transparent;
box-shadow: none;
}
[data-odn-input-left-element],
[data-odn-input-right-element] {
flex: none;
display: flex;
align-items: center;
gap: 4px;
}
[data-odn-input-left-element] [data-odn-icon],
[data-odn-input-right-element] [data-odn-icon] {
fill: var(--odn-color-black-9);
}
[data-odn-input-right-element] [data-odn-input-clear-icon] {
fill: var(--odn-color-black-7);
cursor: pointer;
}
[data-odn-input-right-element] [data-odn-input-clear-icon]:hover {
fill: var(--odn-color-black-8);
}
[data-odn-input-count] {
margin-left: 4px;
color: var(--odn-color-black-9);
font-size: 12px;
white-space: nowrap;
}
[data-odn-input-textarea] {
flex-direction: column;
}
[data-odn-input-textarea] [data-odn-input-el] {
resize: none;
transition: height 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-input-textarea]:not([data-odn-input-textarea-auto-size=true]) {
flex: 1;
}
[data-odn-input-textarea] [data-odn-input-right-element] {
display: flex;
padding-right: 12px;
width: 100%;
align-items: center;
justify-content: flex-end;
height: 28px;
}
[data-odn-input-textarea] [data-odn-input-top-element],
[data-odn-input-textarea] [data-odn-input-bottom-element] {
width: 100%;
}
@charset "UTF-8";
html {
--odn-select-selector-padding-inline: 12px;
--odn-select-border-radius: 6px;
--odn-select-border-radius-sm: 4px;
--odn-select-internal_fixed_item_margin: 2px;
--odn-select-multiple-item-height: 22px;
--odn-select-multiple-item-bg: var(--odn-color-black-1);
--odn-select-multiple-item-border-color: var(--odn-color-border);
--odn-select-popup-padding-block: 8px;
--odn-select-popup-padding-inline: 0;
--odn-select-selector-bg: var(--odn-color-white);
--odn-select-border-color: var(--odn-color-border);
--odn-select-border-color-hover: var(--odn-color-border-hover);
--odn-select-border-color-active: var(--odn-color-border-active);
--odn-select-arrow-color: var(--odn-color-black-9);
--odn-select-clear-color: var(--odn-color-black-7);
--odn-select-clear-color-hover: var(--odn-color-black-9);
--odn-select-show-arrow-padding-inline-end: 18px;
--odn-select-option-padding-block: 7px;
--odn-select-option-padding-inline: 12px;
--odn-select-option-height: var(--odn-popup-control-height);
--odn-select-option-font-size: 14px;
--odn-select-option-line-height: 1.57142857;
--odn-select-option-border-radius: 0;
--odn-select-option-active-bg: var(--odn-color-black-1);
--odn-select-option-selected-font-weight: 400;
--odn-select-option-selected-color: var(--odn-color-black-12);
--odn-select-option-selected-bg: var(--odn-color-blue-1);
}
.odn-select.odn-select-in-form-item {
width: 100%;
}
.odn-select {
margin: 0;
padding: 0;
color: var(--odn-color-text);
font-size: var(--odn-font-size);
line-height: var(--odn-line-height);
list-style: none;
font-family: var(--odn-font-family);
position: relative;
display: inline-flex;
cursor: pointer;
}
.odn-select:not(.odn-cascader) .odn-select-selection-placeholder {
visibility: visible !important;
}
.odn-select-focused {
z-index: 2;
}
.odn-select:not(.odn-select-customize-input) .odn-select-selector {
position: relative;
transition: all 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.odn-select:not(.odn-select-customize-input) .odn-select-selector input {
cursor: pointer;
}
.odn-select-show-search.odn-select:not(.odn-select-customize-input) .odn-select-selector input {
cursor: auto;
color: inherit;
height: 100%;
}
.odn-select-disabled.odn-select:not(.odn-select-customize-input) .odn-select-selector {
cursor: not-allowed;
}
.odn-select-disabled.odn-select:not(.odn-select-customize-input) .odn-select-selector input {
cursor: not-allowed;
}
.odn-select:not(.odn-select-customize-input) .odn-select-selector .odn-select-selection-search-input {
margin: 0;
padding: 0;
background: transparent;
border: none;
outline: none;
appearance: none;
font-family: inherit;
}
.odn-select:not(.odn-select-customize-input) .odn-select-selector .odn-select-selection-search-input::-webkit-search-cancel-button {
display: none;
appearance: none;
}
.odn-select .odn-select-selection-item {
flex: 1;
font-weight: normal;
position: relative;
user-select: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.odn-select .odn-select-selection-item > .ant-typography {
display: inline;
}
.odn-select .odn-select-selection-placeholder {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
color: var(--odn-color-text-placeholder);
pointer-events: none;
}
.odn-select .odn-select-arrow {
display: flex;
align-items: center;
color: var(--odn-select-arrow-color);
font-style: normal;
line-height: 1;
text-align: center;
text-transform: none;
vertical-align: -0.125em;
position: absolute;
top: 50%;
inset-inline: auto calc(var(--odn-select-selector-padding-inline) - 1px);
height: var(--odn-icon-size);
margin-top: calc(var(--odn-icon-size) * -1 / 2);
font-size: var(--odn-icon-size);
pointer-events: none;
transition: all 0.12s ease;
}
.odn-select-open [data-odn-icon-name=down] {
transform: rotate(180deg);
}
.odn-cascader.odn-select-single.odn-select-open.odn-select-show-inner-search .odn-select-selection-item {
color: var(--odn-color-text-placeholder);
}
.odn-select .odn-select-arrow > * {
line-height: 1;
}
.odn-select .odn-select-arrow svg {
display: inline-block;
}
.odn-select .odn-select-arrow .anticon {
vertical-align: top;
transition: transform var(--odn-motion-duration-slow);
}
.odn-select .odn-select-arrow .anticon > svg {
vertical-align: top;
}
.odn-select .odn-select-arrow .anticon:not(.odn-select-suffix) {
pointer-events: auto;
}
.odn-select-disabled .odn-select .odn-select-arrow {
cursor: not-allowed;
}
.odn-select .odn-select-arrow > *:not(:last-child) {
margin-inline-end: 8px;
}
.odn-select .odn-select-selection-wrap {
display: flex;
width: 100%;
position: relative;
min-width: 0;
}
.odn-select .odn-select-selection-wrap::after {
content: " ";
width: 0;
overflow: hidden;
}
.odn-select .odn-select-prefix {
flex: none;
margin-inline-end: 8px;
}
.odn-select .odn-select-clear {
position: absolute;
top: 50%;
inset-inline: auto calc(var(--odn-select-selector-padding-inline) - 1px);
z-index: 1;
display: inline-block;
width: var(--odn-icon-size);
height: var(--odn-icon-size);
margin-top: calc(var(--odn-icon-size) * -1 / 2);
color: var(--odn-select-clear-color);
font-size: var(--odn-icon-size);
font-style: normal;
line-height: 1;
text-align: center;
text-transform: none;
cursor: pointer;
opacity: 0;
transition: color 0.12s ease, opacity 0.12s ease;
text-rendering: auto;
}
.odn-select .odn-select-clear::before {
display: block;
}
.odn-select .odn-select-clear:hover {
color: var(--odn-select-clear-color-hover);
}
@media (hover: none) {
.odn-select .odn-select-clear {
opacity: 1;
background: var(--odn-color-bg-base);
border-radius: 50%;
}
}
.odn-select:hover .odn-select-clear {
opacity: 1;
background: var(--odn-color-bg-base);
border-radius: 50%;
}
.odn-select-status-error.odn-select-has-feedback .odn-select-clear,
.odn-select-status-warning.odn-select-has-feedback .odn-select-clear,
.odn-select-status-success.odn-select-has-feedback .odn-select-clear,
.odn-select-status-validating.odn-select-has-feedback .odn-select-clear {
inset-inline-end: calc(var(--odn-select-selector-padding-inline) - 1px + var(--odn-font-size) + var(--odn-padding-xs));
}
.odn-select-single {
font-size: var(--odn-font-size);
height: var(--odn-control-height);
}
.odn-select-single.odn-select-small {
--odn-font-size: 13px;
--odn-control-height: 30px;
}
.odn-select-single .odn-select-selector {
margin: 0;
padding: 0;
color: var(--odn-color-text);
font-size: var(--odn-font-size);
line-height: var(--odn-line-height);
list-style: none;
font-family: inherit;
display: flex;
border-radius: var(--odn-select-border-radius);
flex: 1 1 auto;
}
.odn-select-single .odn-select-selector .odn-select-selection-wrap::after {
line-height: calc(var(--odn-control-height) - 2px);
}
.odn-select-single .odn-select-selector .odn-select-selection-search {
position: absolute;
inset: 0;
width: 100%;
}
.odn-select-single .odn-select-selector .odn-select-selection-search-input {
width: 100%;
appearance: textfield;
}
.odn-select-single .odn-select-selector .odn-select-selection-item,
.odn-select-single .odn-select-selector .odn-select-selection-placeholder {
display: block;
padding: 0;
line-height: calc(var(--odn-control-height) - 2px);
transition: all var(--odn-motion-duration-slow), visibility 0s;
align-self: center;
}
.odn-select-single .odn-select-selector .odn-select-selection-placeholder {
transition: none;
pointer-events: none;
}
.odn-select-single .odn-select-selector::after,
.odn-select-single .odn-select-selector .odn-select-selection-item:empty::after,
.odn-select-single .odn-select-selector .odn-select-selection-placeholder:empty::after {
display: inline-block;
width: 0;
visibility: hidden;
content: " ";
}
.odn-select-single.odn-select-show-arrow .odn-select-selection-item,
.odn-select-single.odn-select-show-arrow .odn-select-selection-search,
.odn-select-single.odn-select-show-arrow .odn-select-selection-placeholder {
padding-inline-end: var(--odn-select-show-arrow-padding-inline-end);
}
.odn-select-single:not(.odn-select-customize-input) .odn-select-selector {
width: 100%;
height: 100%;
align-items: center;
padding: 0 calc(var(--odn-select-selector-padding-inline) - 1px);
}
.odn-select-single:not(.odn-select-customize-input) .odn-select-selector .odn-select-selection-search-input {
height: calc(var(--odn-control-height) - 2px);
font-size: var(--odn-font-size);
}
.odn-select-single:not(.odn-select-customize-input) .odn-select-selector::after {
line-height: calc(var(--odn-control-height) - 2px);
}
.odn-select-single.odn-select-customize-input .odn-select-selector::after {
display: none;
}
.odn-select-single.odn-select-customize-input .odn-select-selector .odn-select-selection-search {
position: static;
width: 100%;
}
.odn-select-single.odn-select-customize-input .odn-select-selector .odn-select-selection-placeholder {
position: absolute;
inset-inline: 0;
padding: 0 calc(var(--odn-select-selector-padding-inline) - 1px);
}
.odn-select-single.odn-select-customize-input .odn-select-selector .odn-select-selection-placeholder::after {
display: none;
}
.odn-select-single.odn-select-sm {
font-size: var(--odn-font-size);
height: var(--odn-control-height-sm);
}
.odn-select-single.odn-select-sm .odn-select-selector {
margin: 0;
padding: 0;
color: var(--odn-color-text);
font-size: var(--odn-font-size);
line-height: var(--odn-line-height);
list-style: none;
font-family: inherit;
display: flex;
border-radius: var(--odn-select-border-radius-sm);
flex: 1 1 auto;
}
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-wrap::after {
line-height: calc(var(--odn-control-height-sm) - 2px);
}
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-search {
position: absolute;
inset: 0;
width: 100%;
}
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-search-input {
width: 100%;
appearance: textfield;
}
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-item,
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-placeholder {
display: block;
padding: 0;
line-height: calc(var(--odn-control-height-sm) - 2px);
transition: all var(--odn-motion-duration-slow), visibility 0s;
align-self: center;
}
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-placeholder {
transition: none;
pointer-events: none;
}
.odn-select-single.odn-select-sm .odn-select-selector::after,
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-item:empty::after,
.odn-select-single.odn-select-sm .odn-select-selector .odn-select-selection-placeholder:empty::after {
display: inline-block;
width: 0;
visibility: hidden;
content: " ";
}
.odn-select-single.odn-select-sm.odn-select-show-arrow .odn-select-selection-item,
.odn-select-single.odn-select-sm.odn-select-show-arrow .odn-select-selection-search,
.odn-select-single.odn-select-sm.odn-select-show-arrow .odn-select-selection-placeholder {
padding-inline-end: var(--odn-select-show-arrow-padding-inline-end);
}
.odn-select-single.odn-select-sm:not(.odn-select-customize-input) .odn-select-selector {
width: 100%;
height: 100%;
align-items: center;
padding: 0 calc(var(--odn-select-selector-padding-inline) - 1px);
}
.odn-select-single.odn-select-sm:not(.odn-select-customize-input) .odn-select-selector .odn-select-selection-search-input {
height: calc(var(--odn-control-height-sm) - 2px);
font-size: var(--odn-font-size);
}
.odn-select-single.odn-select-sm:not(.odn-select-customize-input) .odn-select-selector::after {
line-height: calc(var(--odn-control-height-sm) - 2px);
}
.odn-select-single.odn-select-sm.odn-select-customize-input .odn-select-selector::after {
display: none;
}
.odn-select-single.odn-select-sm.odn-select-customize-input .odn-select-selector .odn-select-selection-search {
position: static;
width: 100%;
}
.odn-select-single.odn-select-sm.odn-select-customize-input .odn-select-selector .odn-select-selection-placeholder {
position: absolute;
inset-inline: 0;
padding: 0 calc(var(--odn-select-selector-padding-inline) - 1px);
}
.odn-select-single.odn-select-sm.odn-select-customize-input .odn-select-selector .odn-select-selection-placeholder::after {
display: none;
}
.odn-select-single.odn-select-sm:not(.odn-select-customize-input) .odn-select-selector {
padding: 0 calc(var(--odn-control-padding-horizontal-sm) - 1px);
}
.odn-select-single.odn-select-sm:not(.odn-select-customize-input).odn-select-show-arrow .odn-select-selection-search {
inset-inline-end: calc(var(--odn-control-padding-horizontal-sm) - 1px + var(--odn-font-size) * 1.5);
}
.odn-select-single.odn-select-sm:not(.odn-select-customize-input).odn-select-show-arrow .odn-select-selection-item,
.odn-select-single.odn-select-sm:not(.odn-select-customize-input).odn-select-show-arrow .odn-select-selection-placeholder {
padding-inline-end: calc(var(--odn-font-size) * 1.5);
}
.odn-select-single.odn-select-lg {
font-size: var(--odn-font-size-lg);
height: var(--odn-select-single-item-height-lg);
}
.odn-select-single.odn-select-lg .odn-select-selector {
margin: 0;
padding: 0;
color: var(--odn-color-text);
font-size: var(--odn-font-size-lg);
line-height: var(--odn-line-height);
list-style: none;
font-family: inherit;
display: flex;
border-radius: var(--odn-select-border-radius-lg);
flex: 1 1 auto;
}
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-wrap::after {
line-height: calc(var(--odn-select-single-item-height-lg) - 2px);
}
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-search {
position: absolute;
inset: 0;
width: 100%;
}
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-search-input {
width: 100%;
appearance: textfield;
}
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-item,
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-placeholder {
display: block;
padding: 0;
line-height: calc(var(--odn-select-single-item-height-lg) - 2px);
transition: all var(--odn-motion-duration-slow), visibility 0s;
align-self: center;
}
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-placeholder {
transition: none;
pointer-events: none;
}
.odn-select-single.odn-select-lg .odn-select-selector::after,
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-item:empty::after,
.odn-select-single.odn-select-lg .odn-select-selector .odn-select-selection-placeholder:empty::after {
display: inline-block;
width: 0;
visibility: hidden;
content: " ";
}
.odn-select-single.odn-select-lg.odn-select-show-arrow .odn-select-selection-item,
.odn-select-single.odn-select-lg.odn-select-show-arrow .odn-select-selection-search,
.odn-select-single.odn-select-lg.odn-select-show-arrow .odn-select-selection-placeholder {
padding-inline-end: var(--odn-select-show-arrow-padding-inline-end);
}
.odn-select-single.odn-select-lg:not(.odn-select-customize-input) .odn-select-selector {
width: 100%;
height: 100%;
align-items: center;
padding: 0 calc(var(--odn-select-selector-padding-inline) - 1px);
}
.odn-select-single.odn-select-lg:not(.odn-select-customize-input) .odn-select-selector .odn-select-selection-search-input {
height: calc(var(--odn-select-single-item-height-lg) - 2px);
font-size: var(--odn-font-size-lg);
}
.odn-select-single.odn-select-lg:not(.odn-select-customize-input) .odn-select-selector::after {
line-height: calc(var(--odn-select-single-item-height-lg) - 2px);
}
.odn-select-single.odn-select-lg.odn-select-customize-input .odn-select-selector::after {
display: none;
}
.odn-select-single.odn-select-lg.odn-select-customize-input .odn-select-selector .odn-select-selection-search {
position: static;
width: 100%;
}
.odn-select-single.odn-select-lg.odn-select-customize-input .odn-select-selector .odn-select-selection-placeholder {
position: absolute;
inset-inline: 0;
padding: 0 calc(var(--odn-select-selector-padding-inline) - 1px);
}
.odn-select-single.odn-select-lg.odn-select-customize-input .odn-select-selector .odn-select-selection-placeholder::after {
display: none;
}
.odn-select-multiple .odn-select-selection-overflow {
position: relative;
display: flex;
flex: auto;
flex-wrap: wrap;
max-width: 100%;
}
.odn-select-multiple .odn-select-selection-overflow-item {
flex: none;
align-self: center;
max-width: 100%;
display: inline-flex;
}
.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item {
display: flex;
align-self: center;
flex: none;
max-width: 100%;
margin-block: var(--odn-select-internal_fixed_item_margin);
border-radius: var(--odn-select-border-radius-sm);
cursor: default;
margin-inline-end: 8px;
padding-inline: var(--odn-padding-xs) calc(var(--odn-padding-xs) / 2);
}
.odn-select-disabled.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item {
color: var(--odn-select-multiple-item-color-disabled);
border-color: var(--odn-select-multiple-item-border-color-disabled);
cursor: not-allowed;
}
.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item-content {
display: inline-block;
margin-inline-end: calc(var(--odn-padding-xs) / 2);
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
}
.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item-remove {
display: inline-flex;
align-items: center;
color: var(--odn-color-icon);
font-style: normal;
line-height: inherit;
text-align: center;
text-transform: none;
vertical-align: -0.125em;
font-weight: bold;
font-size: 10px;
cursor: pointer;
}
.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item-remove > * {
line-height: 1;
}
.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item-remove svg {
display: inline-block;
}
.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item-remove > .anticon {
vertical-align: -0.2em;
}
.odn-select-multiple .odn-select-selection-overflow .odn-select-selection-item-remove:hover {
color: var(--odn-color-icon-hover);
}
.odn-select-multiple .odn-select-selector {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding-inline: 12px;
padding-block: 4px;
border-radius: var(--odn-select-border-radius);
}
.odn-select-disabled.odn-select-multiple .odn-select-selector {
background: var(--odn-select-multiple-selector-bg-disabled);
cursor: not-allowed;
}
.odn-select-multiple .odn-select-selector::after {
display: inline-block;
width: 0;
margin: var(--odn-select-internal_fixed_item_margin) 0;
line-height: var(--odn-select-multiple-item-height);
visibility: hidden;
content: " ";
}
.odn-select-multiple .odn-select-selection-item {
height: var(--odn-select-multiple-item-height);
line-height: calc(var(--odn-select-multiple-item-height) - 2px);
}
.odn-select-multiple .odn-select-selection-wrap {
align-self: flex-start;
}
.odn-select-multiple .odn-select-selection-wrap::after {
line-height: var(--odn-select-multiple-item-height);
margin-block: var(--odn-select-internal_fixed_item_margin);
}
.odn-select-multiple .odn-select-selection-overflow-item + .odn-select-selection-overflow-item .odn-select-selection-search,
.odn-select-multiple .odn-select-prefix + .odn-select-selection-wrap .odn-select-selection-search {
margin-inline-start: 0;
}
.odn-select-multiple .odn-select-selection-overflow-item + .odn-select-selection-overflow-item .odn-select-selection-placeholder,
.odn-select-multiple .odn-select-prefix + .odn-select-selection-wrap .odn-select-selection-placeholder {
inset-inline-start: 0;
}
.odn-select-multiple .odn-select-selection-overflow-item-suffix {
display: none;
min-height: var(--odn-select-multiple-item-height);
margin-block: var(--odn-select-internal_fixed_item_margin);
}
.odn-select-multiple .odn-select-selection-search {
display: inline-flex;
position: relative;
max-width: 100%;
margin-inline-start: 0;
}
.odn-select-multiple .odn-select-selection-search-input,
.odn-select-multiple .odn-select-selection-search-mirror {
height: var(--odn-select-multiple-item-height);
font-family: var(--odn-font-family);
line-height: var(--odn-select-multiple-item-height);
transition: all var(--odn-motion-duration-slow);
}
.odn-select-multiple .odn-select-selection-search-input {
width: 100%;
min-width: 4.1px;
}
.odn-select-multiple .odn-select-selection-search-mirror {
position: absolute;
top: 0;
inset-inline: 0 auto;
z-index: 999;
white-space: pre;
visibility: hidden;
}
.odn-select-multiple .odn-select-selection-placeholder {
position: absolute;
top: 50%;
inset-inline: 0 calc(var(--odn-select-selector-padding-inline) - 1px);
transform: translateY(-50%);
transition: all var(--odn-motion-duration-slow);
}
.odn-select-multiple.odn-select-show-arrow .odn-select-selector,
.odn-select-multiple.odn-select-allow-clear .odn-select-selector {
padding-inline-end: calc(var(--odn-icon-size) + var(--odn-control-padding-horizontal));
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow {
position: relative;
display: flex;
flex: auto;
flex-wrap: wrap;
max-width: 100%;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow-item {
flex: none;
align-self: center;
max-width: 100%;
display: inline-flex;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item {
display: flex;
align-self: center;
flex: none;
max-width: 100%;
margin-block: var(--odn-select-internal_fixed_item_margin);
border-radius: var(--odn-select-border-radius-xs);
cursor: default;
margin-inline-end: 8px;
padding-inline: var(--odn-padding-xs) calc(var(--odn-padding-xs) / 2);
}
.odn-select-disabled.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item {
color: var(--odn-select-multiple-item-color-disabled);
border-color: var(--odn-select-multiple-item-border-color-disabled);
cursor: not-allowed;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item-content {
display: inline-block;
margin-inline-end: calc(var(--odn-padding-xs) / 2);
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item-remove {
display: inline-flex;
align-items: center;
color: var(--odn-color-icon);
font-style: normal;
line-height: inherit;
text-align: center;
text-transform: none;
vertical-align: -0.125em;
font-weight: bold;
font-size: 10px;
cursor: pointer;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item-remove > * {
line-height: 1;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item-remove svg {
display: inline-block;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item-remove > .anticon {
vertical-align: -0.2em;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow .odn-select-selection-item-remove:hover {
color: var(--odn-color-icon-hover);
}
.odn-select-multiple.odn-select-sm .odn-select-selector {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding-inline: 12px;
padding-block: max(max(var(--odn-padding-xxs) - 1px, 0px) - var(--odn-select-internal_fixed_item_margin), 0px);
border-radius: var(--odn-select-border-radius-sm);
}
.odn-select-disabled.odn-select-multiple.odn-select-sm .odn-select-selector {
background: var(--odn-select-multiple-selector-bg-disabled);
cursor: not-allowed;
}
.odn-select-multiple.odn-select-sm .odn-select-selector::after {
display: inline-block;
width: 0;
margin: var(--odn-select-internal_fixed_item_margin) 0;
line-height: var(--odn-select-multiple-item-height-sm);
visibility: hidden;
content: " ";
}
.odn-select-multiple.odn-select-sm .odn-select-selection-item {
height: var(--odn-select-multiple-item-height-sm);
line-height: calc(var(--odn-select-multiple-item-height-sm) - 2px);
}
.odn-select-multiple.odn-select-sm .odn-select-selection-wrap {
align-self: flex-start;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-wrap::after {
line-height: var(--odn-select-multiple-item-height-sm);
margin-block: var(--odn-select-internal_fixed_item_margin);
}
.odn-select-multiple.odn-select-sm .odn-select-prefix {
margin-inline-start: calc(var(--odn-select-selector-padding-inline) - 1px - max(var(--odn-padding-xxs) - 1px, 0px));
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow-item + .odn-select-selection-overflow-item .odn-select-selection-search,
.odn-select-multiple.odn-select-sm .odn-select-prefix + .odn-select-selection-wrap .odn-select-selection-search {
margin-inline-start: 0;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow-item + .odn-select-selection-overflow-item .odn-select-selection-placeholder,
.odn-select-multiple.odn-select-sm .odn-select-prefix + .odn-select-selection-wrap .odn-select-selection-placeholder {
inset-inline-start: 0;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-overflow-item-suffix {
min-height: var(--odn-select-multiple-item-height-sm);
margin-block: var(--odn-select-internal_fixed_item_margin);
}
.odn-select-multiple.odn-select-sm .odn-select-selection-search {
display: inline-flex;
position: relative;
max-width: 100%;
margin-inline-start: calc(var(--odn-select-selector-padding-inline) - 1px - ((var(--odn-control-height-sm) - var(--odn-select-multiple-item-height-sm)) / 2 - 1px));
}
.odn-select-multiple.odn-select-sm .odn-select-selection-search-input,
.odn-select-multiple.odn-select-sm .odn-select-selection-search-mirror {
height: var(--odn-select-multiple-item-height-sm);
font-family: var(--odn-font-family);
line-height: var(--odn-select-multiple-item-height-sm);
transition: all var(--odn-motion-duration-slow);
}
.odn-select-multiple.odn-select-sm .odn-select-selection-search-input {
width: 100%;
min-width: 4.1px;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-search-mirror {
position: absolute;
top: 0;
inset-inline: 0 auto;
z-index: 999;
white-space: pre;
visibility: hidden;
}
.odn-select-multiple.odn-select-sm .odn-select-selection-placeholder {
position: absolute;
top: 50%;
inset-inline: calc(var(--odn-select-selector-padding-inline) - 1px - max(var(--odn-padding-xxs) - 1px, 0px)) calc(var(--odn-select-selector-padding-inline) - 1px);
transform: translateY(-50%);
transition: all var(--odn-motion-duration-slow);
}
.odn-select-multiple.odn-select-sm {
font-size: var(--odn-font-size);
}
.odn-select-multiple.odn-select-sm.odn-select-show-arrow .odn-select-selector,
.odn-select-multiple.odn-select-sm.odn-select-allow-clear .odn-select-selector {
padding-inline-end: calc(var(--odn-icon-size) + var(--odn-control-padding-horizontal));
}
.odn-select-multiple.odn-select-sm .odn-select-selection-placeholder {
inset-inline: calc(var(--odn-control-padding-horizontal-sm) - 1px);
}
.odn-select-multiple.odn-select-sm .odn-select-selection-search {
margin-inline-start: 2px;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow {
position: relative;
display: flex;
flex: auto;
flex-wrap: wrap;
max-width: 100%;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow-item {
flex: none;
align-self: center;
max-width: 100%;
display: inline-flex;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item {
display: flex;
align-self: center;
flex: none;
max-width: 100%;
margin-block: var(--odn-select-internal_fixed_item_margin);
border-radius: var(--odn-select-border-radius);
cursor: default;
margin-inline-end: 8px;
padding-inline: var(--odn-padding-xs) calc(var(--odn-padding-xs) / 2);
}
.odn-select-disabled.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item {
color: var(--odn-select-multiple-item-color-disabled);
border-color: var(--odn-select-multiple-item-border-color-disabled);
cursor: not-allowed;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item-content {
display: inline-block;
margin-inline-end: calc(var(--odn-padding-xs) / 2);
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item-remove {
display: inline-flex;
align-items: center;
color: var(--odn-color-icon);
font-style: normal;
line-height: inherit;
text-align: center;
text-transform: none;
vertical-align: -0.125em;
font-weight: bold;
font-size: 10px;
cursor: pointer;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item-remove > * {
line-height: 1;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item-remove svg {
display: inline-block;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item-remove > .anticon {
vertical-align: -0.2em;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow .odn-select-selection-item-remove:hover {
color: var(--odn-color-icon-hover);
}
.odn-select-multiple.odn-select-lg .odn-select-selector {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding-inline: 12px;
padding-block: max(max(var(--odn-padding-xxs) - 1px, 0px) - var(--odn-select-internal_fixed_item_margin), 0px);
border-radius: var(--odn-select-border-radius-lg);
}
.odn-select-disabled.odn-select-multiple.odn-select-lg .odn-select-selector {
background: var(--odn-select-multiple-selector-bg-disabled);
cursor: not-allowed;
}
.odn-select-multiple.odn-select-lg .odn-select-selector::after {
display: inline-block;
width: 0;
margin: var(--odn-select-internal_fixed_item_margin) 0;
line-height: var(--odn-select-multiple-item-height-lg);
visibility: hidden;
content: " ";
}
.odn-select-multiple.odn-select-lg .odn-select-selection-item {
height: var(--odn-select-multiple-item-height-lg);
line-height: calc(var(--odn-select-multiple-item-height-lg) - 2px);
}
.odn-select-multiple.odn-select-lg .odn-select-selection-wrap {
align-self: flex-start;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-wrap::after {
line-height: var(--odn-select-multiple-item-height-lg);
margin-block: var(--odn-select-internal_fixed_item_margin);
}
.odn-select-multiple.odn-select-lg .odn-select-prefix {
margin-inline-start: calc(var(--odn-select-selector-padding-inline) - 1px - max(var(--odn-padding-xxs) - 1px, 0px));
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow-item + .odn-select-selection-overflow-item .odn-select-selection-search,
.odn-select-multiple.odn-select-lg .odn-select-prefix + .odn-select-selection-wrap .odn-select-selection-search {
margin-inline-start: 0;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow-item + .odn-select-selection-overflow-item .odn-select-selection-placeholder,
.odn-select-multiple.odn-select-lg .odn-select-prefix + .odn-select-selection-wrap .odn-select-selection-placeholder {
inset-inline-start: 0;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-overflow-item-suffix {
min-height: var(--odn-select-multiple-item-height-lg);
margin-block: var(--odn-select-internal_fixed_item_margin);
}
.odn-select-multiple.odn-select-lg .odn-select-selection-search {
display: inline-flex;
position: relative;
max-width: 100%;
margin-inline-start: calc(var(--odn-select-selector-padding-inline) - 1px - ((var(--odn-control-height-lg) - var(--odn-select-multiple-item-height-lg)) / 2 - 1px));
}
.odn-select-multiple.odn-select-lg .odn-select-selection-search-input,
.odn-select-multiple.odn-select-lg .odn-select-selection-search-mirror {
height: var(--odn-select-multiple-item-height-lg);
font-family: var(--odn-font-family);
line-height: var(--odn-select-multiple-item-height-lg);
transition: all var(--odn-motion-duration-slow);
}
.odn-select-multiple.odn-select-lg .odn-select-selection-search-input {
width: 100%;
min-width: 4.1px;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-search-mirror {
position: absolute;
top: 0;
inset-inline: 0 auto;
z-index: 999;
white-space: pre;
visibility: hidden;
}
.odn-select-multiple.odn-select-lg .odn-select-selection-placeholder {
position: absolute;
top: 50%;
inset-inline: calc(var(--odn-select-selector-padding-inline) - 1px - max(var(--odn-padding-xxs) - 1px, 0px)) calc(var(--odn-select-selector-padding-inline) - 1px);
transform: translateY(-50%);
transition: all var(--odn-motion-duration-slow);
}
.odn-select-multiple.odn-select-lg {
font-size: var(--odn-font-size-lg);
}
.odn-select-multiple.odn-select-lg.odn-select-show-arrow .odn-select-selector,
.odn-select-multiple.odn-select-lg.odn-select-allow-clear .odn-select-selector {
padding-inline-end: calc(var(--odn-icon-size) + var(--odn-control-padding-horizontal));
}
.odn-select-dropdown {
margin: 0;
padding: var(--odn-select-popup-padding-block) var(--odn-select-popup-padding-inline);
color: var(--odn-color-text);
font-size: var(--odn-font-size);
line-height: var(--odn-line-height);
list-style: none;
font-family: var(--odn-font-family);
position: absolute;
top: -9999px;
z-index: var(--odn-z-index-select);
overflow: hidden;
font-variant: initial;
background-color: var(--odn-color-bg-elevated);
border-radius: var(--odn-popup-border-radius);
outline: none;
box-shadow: var(--odn-popup-box-shadow);
filter: var(--odn-popup-filter);
}
.odn-select-dropdown .rc-virtual-list-scrollbar-vertical {
width: 6px !important;
}
.odn-select-dropdown .rc-virtual-list-scrollbar-vertical .rc-virtual-list-scrollbar-thumb {
right: 2px;
background-color: var(--odn-color-border) !important;
}
.odn-select-dropdown.odn-slide-up-enter.odn-slide-up-enter-active.odn-select-dropdown-placement-bottomLeft,
.odn-select-dropdown.odn-slide-up-appear.odn-slide-up-appear-active.odn-select-dropdown-placement-bottomLeft {
animation-name: odn-slide-up-in;
}
.odn-select-dropdown.odn-slide-up-enter.odn-slide-up-enter-active.odn-select-dropdown-placement-topLeft,
.odn-select-dropdown.odn-slide-up-appear.odn-slide-up-appear-active.odn-select-dropdown-placement-topLeft,
.odn-select-dropdown.odn-slide-up-enter.odn-slide-up-enter-active.odn-select-dropdown-placement-topRight,
.odn-select-dropdown.odn-slide-up-appear.odn-slide-up-appear-active.odn-select-dropdown-placement-topRight {
animation-name: odn-slide-down-in;
}
.odn-select-dropdown.odn-slide-up-leave.odn-slide-up-leave-active.odn-select-dropdown-placement-bottomLeft {
animation-name: odn-slide-up-out;
}
.odn-select-dropdown.odn-slide-up-leave.odn-slide-up-leave-active.odn-select-dropdown-placement-topLeft,
.odn-select-dropdown.odn-slide-up-leave.odn-slide-up-leave-active.odn-select-dropdown-placement-topRight {
animation-name: odn-slide-down-out;
}
.odn-select-dropdown-hidden {
display: none;
}
.odn-select-dropdown .odn-select-item {
position: relative;
display: block;
min-height: var(--odn-select-option-height);
padding: var(--odn-select-option-padding-block) var(--odn-select-option-padding-inline);
color: var(--odn-color-text);
font-weight: normal;
font-size: var(--odn-select-option-font-size);
line-height: var(--odn-select-option-line-height);
cursor: pointer;
border-radius: var(--odn-select-option-border-radius);
}
.odn-select-dropdown .odn-select-item-group {
color: var(--odn-color-black-9);
font-size: var(--odn-font-size-text-sm);
cursor: default;
}
.odn-select-dropdown .odn-select-item-group:empty {
padding: 0;
min-height: 0;
}
.odn-select-dropdown .odn-select-item-group:not(:first-child) {
margin-top: var(--odn-select-option-padding-block);
padding-top: calc(var(--odn-select-option-padding-block) * 2);
border-top: 1px solid var(--odn-color-black-6);
}
.odn-select-dropdown .odn-select-item-group:not(:first-child):empty {
padding-top: 0;
margin-bottom: var(--odn-select-option-padding-block);
}
.odn-select-dropdown .odn-select-item-option {
display: flex;
}
.odn-select-dropdown-multiple .odn-select-item-option {
flex-direction: row-reverse;
gap: 8px;
}
.odn-select-dropdown .odn-select-item-option-content {
flex: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.odn-select-dropdown .odn-select-item-option-content [data-odn-reference] {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.odn-select-dropdown .odn-select-item-option-state {
flex: none;
display: flex;
align-items: center;
}
.odn-select-dropdown .odn-select-item-option-active:not(.odn-select-item-option-disabled) {
background-color: var(--odn-select-option-active-bg);
}
.odn-select-dropdown .odn-select-item-option-selected:not(.odn-select-item-option-disabled) {
color: var(--odn-select-option-selected-color);
font-weight: var(--odn-select-option-selected-font-weight);
background-color: var(--odn-select-option-selected-bg);
}
.odn-select-dropdown .odn-select-item-option-selected:not(.odn-select-item-option-disabled) .odn-select-item-option-state {
color: var(--odn-color-primary);
}
.odn-select-dropdown .odn-select-item-option-disabled {
color: var(--odn-color-text-disabled);
cursor: not-allowed;
}
.odn-select-dropdown .odn-select-item-option-disabled.odn-select-item-option-selected {
background-color: var(--odn-color-bg-container-disabled);
}
.odn-select-dropdown .odn-select-item-empty,
.odn-select-empty {
position: relative;
display: block;
min-height: var(--odn-select-option-height);
padding: var(--odn-select-option-padding-block) var(--odn-select-option-padding-inline);
color: var(--odn-color-text-disabled);
font-weight: normal;
font-size: var(--odn-select-option-font-size);
line-height: var(--odn-select-option-line-height);
}
.odn-select-dropdown .odn-select-item-option-selected:has(+ .odn-select-item-option-selected) {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.odn-select-dropdown .odn-select-item-option-selected:has(+ .odn-select-item-option-selected) + .odn-select-item-option-selected {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
.odn-slide-up-enter,
.odn-slide-up-appear {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.odn-slide-up-leave {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.odn-slide-up-enter.odn-slide-up-enter-active,
.odn-slide-up-appear.odn-slide-up-appear-active {
animation-name: odn-slide-up-in;
animation-play-state: running;
}
.odn-slide-up-leave.odn-slide-up-leave-active {
animation-name: odn-slide-up-out;
animation-play-state: running;
pointer-events: none;
}
.odn-slide-up-enter,
.odn-slide-up-appear {
transform: translate3d(0, -4px, 0);
transform-origin: 0% 0%;
opacity: 0;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.odn-slide-up-enter-prepare,
.odn-slide-up-appear-prepare {
transform: translate3d(0, 0, 0);
}
.odn-slide-up-leave {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ant-slide-down-enter,
.ant-slide-down-appear {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.ant-slide-down-leave {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.ant-slide-down-enter.ant-slide-down-enter-active,
.ant-slide-down-appear.ant-slide-down-appear-active {
animation-name: odn-slide-down-in;
animation-play-state: running;
}
.ant-slide-down-leave.ant-slide-down-leave-active {
animation-name: odn-slide-down-out;
animation-play-state: running;
pointer-events: none;
}
.ant-slide-down-enter,
.ant-slide-down-appear {
transform: translate3d(0, 4px, 0);
transform-origin: 0% 0%;
opacity: 0;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ant-slide-down-enter-prepare,
.ant-slide-down-appear-prepare {
transform: translate3d(0, 0, 0);
}
.ant-slide-down-leave {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ant-move-up-enter,
.ant-move-up-appear {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.ant-move-up-leave {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.ant-move-up-enter.ant-move-up-enter-active,
.ant-move-up-appear.ant-move-up-appear-active {
animation-name: antMoveUpIn;
animation-play-state: running;
}
.ant-move-up-leave.ant-move-up-leave-active {
animation-name: antMoveUpOut;
animation-play-state: running;
pointer-events: none;
}
.ant-move-up-enter,
.ant-move-up-appear {
opacity: 0;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ant-move-up-leave {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ant-move-down-enter,
.ant-move-down-appear {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.ant-move-down-leave {
animation-duration: 0.12s;
animation-fill-mode: both;
animation-play-state: paused;
}
.ant-move-down-enter.ant-move-down-enter-active,
.ant-move-down-appear.ant-move-down-appear-active {
animation-name: antMoveDownIn;
animation-play-state: running;
}
.ant-move-down-leave.ant-move-down-leave-active {
animation-name: antMoveDownOut;
animation-play-state: running;
pointer-events: none;
}
.ant-move-down-enter,
.ant-move-down-appear {
opacity: 0;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ant-move-down-leave {
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.odn-select-compact-item:not(.odn-select-compact-last-item) {
margin-inline-end: -1px;
}
.odn-select-compact-item:hover > *,
.odn-select-compact-item:active > * {
z-index: 2;
}
.odn-select-compact-item.odn-select-focused {
z-index: 2;
}
.odn-select-compact-item[disabled] > * {
z-index: 0;
}
.odn-select-compact-item:not(.odn-select-compact-first-item,
.odn-select-compact-last-item) > .odn-select-selector {
border-radius: 0;
}
.odn-select-compact-item:not(.odn-select-compact-last-item).odn-select-compact-first-item > .odn-select-selector,
.odn-select-compact-item:not(.odn-select-compact-last-item).odn-select-compact-first-item.odn-select-sm > .odn-select-selector,
.odn-select-compact-item:not(.odn-select-compact-last-item).odn-select-compact-first-item.odn-select-lg > .odn-select-selector {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.odn-select-compact-item:not(.odn-select-compact-first-item).odn-select-compact-last-item > .odn-select-selector,
.odn-select-compact-item:not(.odn-select-compact-first-item).odn-select-compact-last-item.odn-select-sm > .odn-select-selector,
.odn-select-compact-item:not(.odn-select-compact-first-item).odn-select-compact-last-item.odn-select-lg > .odn-select-selector {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.odn-select-outlined:not(.odn-select-customize-input) .odn-select-selector {
border: 1px solid var(--odn-select-border-color);
background: var(--odn-select-selector-bg);
}
.odn-select-outlined:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
border-color: var(--odn-select-border-color-hover);
}
.odn-select-focused.odn-select-outlined:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
border-color: var(--odn-select-border-color-active);
box-shadow: 0 0 0 var(--odn-control-outline-width) var(--odn-select-active-outline-color);
outline: 0;
}
.odn-select-outlined:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-prefix {
color: var(--odn-color-text);
}
.odn-select-outlined.odn-select-status-error:not(.odn-select-customize-input) .odn-select-selector {
border: 1px solid var(--odn-color-error);
background: var(--odn-select-selector-bg);
}
.odn-select-outlined.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
border-color: var(--odn-color-error-hover);
}
.odn-select-focused.odn-select-outlined.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
border-color: var(--odn-color-error);
box-shadow: 0 0 0 var(--odn-control-outline-width) var(--odn-color-error-outline);
outline: 0;
}
.odn-select-outlined.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-prefix {
color: var(--odn-color-error);
}
.odn-select-outlined.odn-select-status-warning:not(.odn-select-customize-input) .odn-select-selector {
border: 1px solid var(--odn-color-warning);
background: var(--odn-select-selector-bg);
}
.odn-select-outlined.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
border-color: var(--odn-color-warning-hover);
}
.odn-select-focused.odn-select-outlined.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
border-color: var(--odn-color-warning);
box-shadow: 0 0 0 var(--odn-control-outline-width) var(--odn-color-warning-outline);
outline: 0;
}
.odn-select-outlined.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-prefix {
color: var(--odn-color-warning);
}
.odn-select-outlined.odn-select-disabled:not(.odn-select-customize-input) .odn-select-selector {
background: var(--odn-color-bg-container-disabled);
color: var(--odn-color-text-disabled);
}
.odn-select-outlined.odn-select-multiple .odn-select-selection-item {
background: var(--odn-select-multiple-item-bg);
border: 1px solid var(--odn-select-multiple-item-border-color);
}
.odn-select-filled:not(.odn-select-customize-input) .odn-select-selector {
background: var(--odn-color-fill-tertiary);
border: 1px solid transparent;
color: var(--odn-color-text);
}
.odn-select-filled:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
background: var(--odn-color-fill-secondary);
}
.odn-select-focused.odn-select-filled:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
background: var(--odn-select-selector-bg);
border-color: var(--odn-select-border-color-active);
outline: 0;
}
.odn-select-filled.odn-select-status-error:not(.odn-select-customize-input) .odn-select-selector {
background: var(--odn-color-error-bg);
border: 1px solid transparent;
color: var(--odn-color-error);
}
.odn-select-filled.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
background: var(--odn-color-error-bg-hover);
}
.odn-select-focused.odn-select-filled.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
background: var(--odn-select-selector-bg);
border-color: var(--odn-color-error);
outline: 0;
}
.odn-select-filled.odn-select-status-warning:not(.odn-select-customize-input) .odn-select-selector {
background: var(--odn-color-warning-bg);
border: 1px solid transparent;
color: var(--odn-color-warning);
}
.odn-select-filled.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
background: var(--odn-color-warning-bg-hover);
}
.odn-select-focused.odn-select-filled.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
background: var(--odn-select-selector-bg);
border-color: var(--odn-color-warning);
outline: 0;
}
.odn-select-filled.odn-select-disabled:not(.odn-select-customize-input) .odn-select-selector {
border-color: var(--odn-select-border-color);
background: var(--odn-color-bg-container-disabled);
color: var(--odn-color-text-disabled);
}
.odn-select-filled.odn-select-multiple .odn-select-selection-item {
background: var(--odn-color-bg-container);
border: 1px solid var(--odn-color-split);
}
.odn-select-borderless .odn-select-selector {
background: transparent;
border: 1px solid transparent;
}
.odn-select-borderless.odn-select-disabled:not(.odn-select-customize-input) .odn-select-selector {
color: var(--odn-color-text-disabled);
}
.odn-select-borderless.odn-select-multiple .odn-select-selection-item {
background: var(--odn-select-multiple-item-bg);
border: 1px solid var(--odn-select-multiple-item-border-color);
}
.odn-select-borderless.odn-select-status-error .odn-select-prefix,
.odn-select-borderless.odn-select-status-error .odn-select-selection-item {
color: var(--odn-color-error);
}
.odn-select-borderless.odn-select-status-warning .odn-select-prefix,
.odn-select-borderless.odn-select-status-warning .odn-select-selection-item {
color: var(--odn-color-warning);
}
.odn-select-underlined:not(.odn-select-customize-input) .odn-select-selector {
border-width: 0 0 1px;
border-style: none none solid;
border-color: var(--odn-select-border-color);
background: var(--odn-select-selector-bg);
border-radius: 0;
}
.odn-select-underlined:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
border-color: var(--odn-select-border-color-hover);
}
.odn-select-focused.odn-select-underlined:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
border-color: var(--odn-select-border-color-active);
outline: 0;
}
.odn-select-underlined:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-prefix {
color: var(--odn-color-text);
}
.odn-select-underlined.odn-select-status-error:not(.odn-select-customize-input) .odn-select-selector {
border-width: 0 0 1px;
border-style: none none solid;
border-color: var(--odn-color-error);
background: var(--odn-select-selector-bg);
border-radius: 0;
}
.odn-select-underlined.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
border-color: var(--odn-color-error-hover);
}
.odn-select-focused.odn-select-underlined.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
border-color: var(--odn-color-error);
outline: 0;
}
.odn-select-underlined.odn-select-status-error:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-prefix {
color: var(--odn-color-error);
}
.odn-select-underlined.odn-select-status-warning:not(.odn-select-customize-input) .odn-select-selector {
border-width: 0 0 1px;
border-style: none none solid;
border-color: var(--odn-color-warning);
background: var(--odn-select-selector-bg);
border-radius: 0;
}
.odn-select-underlined.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer):hover .odn-select-selector {
border-color: var(--odn-color-warning-hover);
}
.odn-select-focused.odn-select-underlined.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-selector {
border-color: var(--odn-color-warning);
outline: 0;
}
.odn-select-underlined.odn-select-status-warning:not(.odn-select-disabled,
.odn-select-customize-input,
.ant-pagination-size-changer) .odn-select-prefix {
color: var(--odn-color-warning);
}
.odn-select-underlined.odn-select-disabled:not(.odn-select-customize-input) .odn-select-selector {
color: var(--odn-color-text-disabled);
}
.odn-select-underlined.odn-select-multiple .odn-select-selection-item {
background: var(--odn-select-multiple-item-bg);
border: 1px solid var(--odn-select-multiple-item-border-color);
}
[data-odn-select-option-multiple] {
display: flex;
align-items: center;
gap: 8px;
}
.odn-select-dropdown-top {
margin-bottom: var(--odn-select-popup-padding-block);
}
.odn-select-dropdown-top:first-child {
margin-top: calc(var(--odn-select-popup-padding-block) * -1);
}
.odn-select-dropdown-search {
display: flex;
align-items: center;
padding-left: var(--odn-select-option-padding-inline);
height: 36px;
border-bottom: 1px solid var(--odn-color-black-6);
}
.odn-select-dropdown-search-icon {
color: var(--odn-color-black-9);
flex: none;
}
.odn-select-dropdown-search-input {
flex: 1;
margin-left: 4px;
min-width: 0;
outline: none;
border: none;
background: transparent;
font-size: 14px;
}
.odn-select-dropdown-search-input::placeholder {
color: var(--odn-color-black-9);
}
.odn-select-show-inner-search:not(.odn-cascader) .odn-select-selection-item {
visibility: visible !important;
}
.odn-select-max-count {
flex: none;
margin-right: 4px;
color: var(--odn-color-black-10);
font-size: 12px;
white-space: nowrap;
}
.odn-select-selection-overflow-item-rest > span {
min-width: 0;
}
[data-odn-popup] {
z-index: var(--odn-z-index-popup);
}
[data-odn-popup-content] {
position: relative;
width: max-content;
max-width: var(--odn-popup-max-width);
font-size: var(--odn-popup-font-size);
line-height: var(--odn-popup-line-height);
overflow-wrap: break-word;
white-space: pre-line;
border: var(--odn-popup-border);
border-radius: var(--odn-popup-border-radius);
box-shadow: var(--odn-popup-box-shadow);
filter: var(--odn-popup-filter);
}
[data-odn-popup-arrow] {
position: absolute;
}
[data-odn-popup-arrow] svg {
display: block;
transition: 200ms ease-in-out all;
}
[data-odn-popup-arrow-outer-stroke] {
fill: rgba(0, 0, 0, 0.06);
}
[data-odn-popup-content] {
transition-property: opacity, transform;
}
[data-odn-popup-content][data-status=open],
[data-odn-popup-content][data-status=close] {
transition-duration: 0.12s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
[data-odn-popup-content][data-status=initial],
[data-odn-popup-content][data-status=close] {
opacity: 0;
}
[data-odn-popup-content][data-arrowed=true][data-status=initial],
[data-odn-popup-content][data-arrowed=true][data-status=close] {
transform: scale(0.8);
}
[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=top],
[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=top] {
transform: translate3d(0, 4px, 0);
}
[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=bottom],
[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=bottom] {
transform: translate3d(0, -4px, 0);
}
[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=left],
[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=left] {
transform: translate3d(4px, 0, 0);
}
[data-odn-popup-content][data-arrowed=false][data-status=initial][data-placement^=right],
[data-odn-popup-content][data-arrowed=false][data-status=close][data-placement^=right] {
transform: translate3d(-4px, 0, 0);
}
[data-odn-popup][data-placement^=top][data-arrowed=true] {
padding-bottom: 12px;
}
[data-odn-popup][data-placement^=top][data-arrowed=false] {
padding-bottom: 4px;
}
[data-odn-popup][data-placement^=top] [data-odn-popup-arrow] {
bottom: -8px;
transform: rotate(180deg);
}
[data-odn-popup][data-placement^=bottom][data-arrowed=true] {
padding-top: 12px;
}
[data-odn-popup][data-placement^=bottom][data-arrowed=false] {
padding-top: 4px;
}
[data-odn-popup][data-placement^=bottom] [data-odn-popup-arrow] {
top: -8px;
}
[data-odn-popup][data-placement^=left][data-arrowed=true] {
padding-right: 12px;
}
[data-odn-popup][data-placement^=left][data-arrowed=false] {
padding-right: 4px;
}
[data-odn-popup][data-placement^=left] [data-odn-popup-arrow] {
right: -13px;
transform: rotate(90deg);
}
[data-odn-popup][data-placement^=right][data-arrowed=true] {
padding-left: 12px;
}
[data-odn-popup][data-placement^=right][data-arrowed=false] {
padding-left: 4px;
}
[data-odn-popup][data-placement^=right] [data-odn-popup-arrow] {
left: -13px;
transform: rotate(-90deg);
}
[data-odn-reference] {
display: inline-block;
}
/* type */
[data-odn-popup][data-type=popover] [data-odn-popup-content] {
padding: var(--odn-popover-padding-block) var(--odn-popover-padding-inline);
color: #1f1f1f;
background-color: #fff;
}
[data-odn-popup][data-type=popover] [data-odn-popup-arrow-fill] {
fill: #fff;
}
[data-odn-popup][data-type=tooltip] [data-odn-popup-content] {
padding: var(--odn-tooltip-padding-block) var(--odn-tooltip-padding-inline);
color: #fff;
background-color: #404040;
}
[data-odn-popup][data-type=tooltip] [data-odn-popup-arrow-fill] {
fill: #404040;
}
[data-odn-tooltip-group-content] {
position: relative;
}
html {
--odn-input-number-width: 120px;
--odn-input-number-right-width: 32px;
}
[data-odn-input-number] {
width: var(--odn-input-number-width);
}
[data-odn-input-number][data-odn-input-size=small] [data-odn-input-right-element] {
margin-top: calc(var(--odn-input-padding-block-small) * -1);
margin-bottom: calc(var(--odn-input-padding-block-small) * -1);
margin-right: calc(var(--odn-input-padding-inline-small) * -1);
height: calc(var(--odn-input-line-height-small) * var(--odn-input-font-size-small) + var(--odn-input-padding-block-small) * 2);
}
[data-odn-input-number][data-odn-input-size=medium] [data-odn-input-right-element] {
margin-top: calc(var(--odn-input-padding-block-medium) * -1);
margin-bottom: calc(var(--odn-input-padding-block-medium) * -1);
margin-right: calc(var(--odn-input-padding-inline-medium) * -1);
height: calc(var(--odn-input-line-height-medium) * var(--odn-input-font-size-medium) + var(--odn-input-padding-block-medium) * 2);
}
[data-odn-input-number][data-odn-input-size=large] [data-odn-input-right-element] {
margin-top: calc(var(--odn-input-padding-block-large) * -1);
margin-bottom: calc(var(--odn-input-padding-block-large) * -1);
margin-right: calc(var(--odn-input-padding-inline-large) * -1);
height: calc(var(--odn-input-line-height-large) * var(--odn-input-font-size-large) + var(--odn-input-padding-block-large) * 2);
}
[data-odn-input-number-right] {
display: flex;
flex-direction: column;
width: var(--odn-input-number-right-width);
height: 100%;
border-left: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal);
user-select: none;
}
[data-odn-input-number-right-button] {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: var(--odn-color-black-9);
cursor: pointer;
transition: all 0.2s ease;
}
[data-odn-input-number-right-button][data-odn-input-number-right-button-disabled=true] {
color: var(--odn-color-black-6);
cursor: not-allowed;
}
[data-odn-input-number-right-button][data-odn-input-number-right-button-disabled=false]:hover {
flex: 1.75;
background-color: var(--odn-color-black-1);
}
[data-odn-input-number-right-button][data-odn-input-number-right-button-disabled=false]:active {
background-color: var(--odn-color-black-2);
}
[data-odn-input-number-right-button-up] {
border-bottom: var(--odn-input-border-width) var(--odn-input-border-style) var(--odn-input-border-normal);
}
[data-odn-input-number-light=true][data-odn-input-focused=false] [data-odn-input-right-element] {
opacity: 0;
}
[data-odn-input-number-light=true]:hover [data-odn-input-right-element] {
opacity: 1;
}
html {
--odn-slider-margin-inline-start: 5px;
--odn-slider-margin-inline-end: 5px;
--odn-slider-padding-block: 4px;
--odn-slider-track-height: 4px;
--odn-slider-track-background: var(--odn-color-primary);
--odn-slider-rail-background: var(--odn-color-black-3);
--odn-slider-border-radius: 4px;
--odn-slider-handle-width: 12px;
--odn-slider-handle-height: 12px;
--odn-slider-handle-border-radius: 12px;
--odn-slider-tooltip-padding-block: 10px;
--odn-slider-tooltip-padding-inline: 16px;
--odn-slider-tooltip-font-size: 13px;
--odn-slider-tooltip-background-color: #393939;
--odn-slider-tooltip-border-radius: 6px;
}
[data-odn-slider-wrapper] {
position: relative;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
user-select: none;
--odn-input-number-width: 90px;
}
.odn-slider {
flex: 1;
list-style: none;
position: relative;
z-index: 1;
margin-left: var(--odn-slider-margin-inline-start);
margin-right: var(--odn-slider-margin-inline-end);
padding: var(--odn-slider-padding-block) 0;
height: calc(var(--odn-slider-track-height) + var(--odn-slider-padding-block) * 2);
cursor: pointer;
}
.odn-slider-hasMarks {
padding-bottom: 12px;
}
.odn-slider-rail {
position: absolute;
width: 100%;
height: var(--odn-slider-track-height);
background: var(--odn-slider-rail-background);
border-radius: var(--odn-slider-border-radius);
transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.odn-slider-track {
position: absolute;
height: var(--odn-slider-track-height);
background: var(--odn-slider-track-background);
border-radius: var(--odn-slider-border-radius);
transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-slider-handle-wrapper] {
position: relative;
}
.odn-slider-handle {
position: absolute;
top: calc(50% - var(--odn-slider-handle-height) / 2);
cursor: pointer;
width: var(--odn-slider-handle-width);
height: var(--odn-slider-handle-height);
background-color: #fff;
border-radius: var(--odn-slider-handle-border-radius);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.odn-slider-handle.odn-slider-handle-dragging {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.odn-slider-handle:hover {
transform: scale(1.2);
}
.odn-slider-handle:focus {
outline: none;
}
.odn-slider-handle.ant-tooltip-open {
border-color: #1890ff;
}
.odn-slider:hover .odn-slider-rail {
background: var(--odn-slider-rail-background);
}
.odn-slider:hover .odn-slider-handle:not(.ant-tooltip-open) {
border-color: #69c0ff;
}
.odn-slider-step {
position: absolute;
width: 100%;
height: var(--odn-slider-track-height);
background: transparent;
}
.odn-slider-mark-text {
position: absolute;
top: 14px;
font-size: 13px;
line-height: 20px;
text-align: center;
color: #1f1f1f;
word-break: keep-all;
cursor: pointer;
}
.odn-slider-disabled {
cursor: not-allowed;
}
.odn-slider-disabled .odn-slider-mark-text,
.odn-slider-disabled .odn-slider-handle {
cursor: not-allowed;
}
[data-odn-slider-handle-tooltip] {
position: absolute;
left: 50%;
bottom: 22px;
padding: var(--odn-slider-tooltip-padding-block) var(--odn-slider-tooltip-padding-inline);
font-size: var(--odn-slider-tooltip-font-size);
color: #fff;
background-color: var(--odn-slider-tooltip-background-color);
border-radius: var(--odn-slider-tooltip-border-radius);
transform: translate3d(-50%, 0, 0) scale(0.8);
opacity: 0;
visibility: hidden;
transform-origin: 50% calc(100% + 4px);
transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1) 0.1s;
}
[data-odn-slider-handle-tooltip]::before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-width: 5px 5px 0;
border-color: rgba(0, 0, 0, 0);
border-top-color: var(--odn-slider-tooltip-background-color);
border-style: solid;
}
[data-odn-slider-handle-tooltip-visible=true] {
opacity: 1;
visibility: visible;
transform: translate3d(-50%, 0, 0) scale(1);
transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-slider-range-tooltip-wrapper] {
position: absolute;
inset: 0 5px;
opacity: 0;
visibility: hidden;
transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-slider-range-tooltip-wrapper][data-odn-slider-range-tooltip-wrapper-visible=true] {
opacity: 1;
visibility: visible;
}
[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip] {
color: transparent;
}
[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-left] {
border-radius: 6px 0 0 6px;
}
[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-right] {
border-radius: 0 6px 6px 0;
}
[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-combined] {
opacity: 1;
visibility: visible;
}
[data-odn-slider-handle-tooltip-wrapper-visible][data-odn-slider-handle-tooltip-wrapper-overlapped=true] [data-odn-slider-handle-tooltip-left] {
opacity: 0;
visibility: hidden;
}
[data-odn-slider-range-tooltip] {
position: absolute;
bottom: 22px;
padding: var(--odn-slider-tooltip-padding-block) var(--odn-slider-tooltip-padding-inline);
font-size: var(--odn-slider-tooltip-font-size);
color: #fff;
background-color: var(--odn-slider-tooltip-background-color);
border-radius: var(--odn-slider-tooltip-border-radius);
transform: translate3d(-50%, 0, 0);
}
[data-odn-slider-range-tooltip]::before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
width: 0;
height: 0;
border-width: 5px 5px 0;
border-color: transparent;
border-top-color: var(--odn-slider-tooltip-background-color);
border-style: solid;
}
[data-odn-slider-range-tooltip-combined] {
position: absolute;
bottom: 22px;
display: flex;
padding: var(--odn-slider-tooltip-padding-block) 0;
align-items: center;
justify-content: center;
color: #fff;
opacity: 0;
visibility: hidden;
font-size: var(--odn-slider-tooltip-font-size);
}
html {
--odn-radio-gap-small: 24px;
--odn-radio-gap-small-vertical: 12px;
--odn-radio-height-small: 20px;
--odn-radio-label-font-size-small: 12px;
--odn-radio-label-line-height-small: 1.66666667;
--odn-radio-input-gap-small: 6px;
--odn-radio-input-size-small: 14px;
--odn-radio-indicator-size-small: 5.25px;
--odn-radio-gap-medium: 24px;
--odn-radio-gap-medium-vertical: 12px;
--odn-radio-height-medium: 22px;
--odn-radio-label-font-size-medium: 14px;
--odn-radio-label-line-height-medium: 1.57142857;
--odn-radio-input-gap-medium: 8px;
--odn-radio-input-size-medium: 16px;
--odn-radio-indicator-size-medium: 6px;
--odn-radio-gap-large: 24px;
--odn-radio-gap-large-vertical: 12px;
--odn-radio-height-large: 24px;
--odn-radio-label-font-size-large: 16px;
--odn-radio-label-line-height-large: 1.5;
--odn-radio-input-gap-large: 8px;
--odn-radio-input-size-large: 18px;
--odn-radio-indicator-size-large: 6.75px;
--odn-radio-indicator-bg: var(--odn-color-white);
--odn-radio-indicator-scale-initial: 3;
--odn-radio-color: var(--odn-color-black-12);
--odn-radio-input-bg: var(--odn-color-white);
--odn-radio-input-border: 1px solid var(--odn-color-black-6);
--odn-radio-input-shadow: none;
--odn-radio-input-bg-hover: var(--odn-color-white);
--odn-radio-input-border-hover: 1px solid var(--odn-color-black-7);
--odn-radio-input-shadow-hover: none;
--odn-radio-color-checked: var(--odn-color-black-12);
--odn-radio-input-bg-checked: var(--odn-color-blue-6);
--odn-radio-input-border-checked: 1px solid var(--odn-color-blue-6);
--odn-radio-input-shadow-checked: none;
--odn-radio-input-bg-checked-hover: var(--odn-color-blue-7);
--odn-radio-input-border-checked-hover: 1px solid var(--odn-color-blue-7);
--odn-radio-input-shadow-checked-hover: none;
--odn-radio-input-bg-checked-focus: var(--odn-color-blue-6);
--odn-radio-input-border-checked-focus: 1px solid var(--odn-color-blue-6);
--odn-radio-input-shadow-checked-focus: 0 0 0 2px var(--odn-color-blue-2);
--odn-radio-color-disabled: var(--odn-color-black-8);
--odn-radio-input-bg-disabled: var(--odn-color-black-3);
--odn-radio-input-border-disabled: 1px solid var(--odn-color-black-6);
--odn-radio-input-shadow-disabled: none;
--odn-radio-color-checked-disabled: var(--odn-color-black-8);
--odn-radio-input-bg-checked-disabled: var(--odn-color-blue-2);
--odn-radio-input-border-checked-disabled: 1px solid var(--odn-color-blue-2);
--odn-radio-input-shadow-checked-disabled: none;
}
[data-odn-radio-group] {
display: flex;
flex-wrap: wrap;
}
[data-odn-radio] {
display: inline-flex;
align-items: center;
}
[data-odn-radio]:not([data-odn-radio-disabled=true]) {
color: var(--odn-radio-color);
cursor: pointer;
}
[data-odn-radio]:not([data-odn-radio-disabled=true]) [data-odn-radio-input] {
background: var(--odn-radio-input-bg);
border: var(--odn-radio-input-border);
box-shadow: var(--odn-radio-input-shadow);
}
[data-odn-radio]:not([data-odn-radio-disabled=true]):hover [data-odn-radio-input] {
background: var(--odn-radio-input-bg-hover);
border: var(--odn-radio-input-border-hover);
box-shadow: var(--odn-radio-input-shadow-hover);
}
[data-odn-radio]:not([data-odn-radio-disabled=true]) [data-odn-radio-input]:focus-visible {
background: var(--odn-radio-input-bg-focus);
border: var(--odn-radio-input-border-focus);
box-shadow: var(--odn-radio-input-shadow-focus);
outline: none;
}
[data-odn-radio][data-odn-radio-checked=true] {
color: var(--odn-radio-color-checked);
}
[data-odn-radio][data-odn-radio-checked=true] [data-odn-radio-input] {
background: var(--odn-radio-input-bg-checked);
border: var(--odn-radio-input-border-checked);
box-shadow: var(--odn-radio-input-shadow-checked);
}
[data-odn-radio][data-odn-radio-checked=true] [data-odn-radio-indicator] {
opacity: 1;
transform: scale(1);
}
[data-odn-radio][data-odn-radio-checked=true]:not([data-odn-radio-disabled=true]):hover [data-odn-radio-input] {
background: var(--odn-radio-input-bg-checked-hover);
border: var(--odn-radio-input-border-checked-hover);
box-shadow: var(--odn-radio-input-shadow-checked-hover);
}
[data-odn-radio][data-odn-radio-checked=true]:not([data-odn-radio-disabled=true]) [data-odn-radio-input]:focus-visible {
background: var(--odn-radio-input-bg-checked-focus);
border: var(--odn-radio-input-border-checked-focus);
box-shadow: var(--odn-radio-input-shadow-checked-focus);
outline: none;
}
[data-odn-radio][data-odn-radio-checked=true][data-odn-radio-disabled=true] {
color: var(--odn-radio-color-checked-disabled);
}
[data-odn-radio][data-odn-radio-checked=true][data-odn-radio-disabled=true] [data-odn-radio-input] {
background: var(--odn-radio-input-bg-checked-disabled);
border: var(--odn-radio-input-border-checked-disabled);
box-shadow: var(--odn-radio-input-shadow-checked-disabled);
}
[data-odn-radio][data-odn-radio-disabled=true] {
color: var(--odn-radio-color-disabled);
cursor: not-allowed;
}
[data-odn-radio][data-odn-radio-disabled=true] [data-odn-radio-input] {
cursor: not-allowed;
background: var(--odn-radio-input-bg-disabled);
border: var(--odn-radio-input-border-disabled);
box-shadow: var(--odn-radio-input-shadow-disabled);
}
[data-odn-radio-input] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 100%;
transition: 0.15s all cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-radio-indicator] {
opacity: 0;
background: var(--odn-radio-indicator-bg);
border-radius: 100%;
transform: scale(var(--odn-radio-indicator-scale-initial));
transition: inherit;
}
[data-odn-radio-label] {
cursor: inherit;
transition: inherit;
}
[data-odn-radio-group-size=small] {
gap: var(--odn-radio-gap-small);
}
[data-odn-radio-group-size=small][data-odn-radio-group-vertical=true] {
flex-direction: column;
gap: var(--odn-radio-gap-small-vertical);
}
[data-odn-radio-group-size=small] [data-odn-radio] {
height: var(--odn-radio-height-small);
font-size: var(--odn-radio-label-font-size-small);
line-height: var(--odn-radio-label-line-height-small);
}
[data-odn-radio-group-size=small] [data-odn-radio-input] {
width: var(--odn-radio-input-size-small);
height: var(--odn-radio-input-size-small);
}
[data-odn-radio-group-size=small] [data-odn-radio-label] {
padding-inline-start: var(--odn-radio-input-gap-small);
}
[data-odn-radio-group-size=small] [data-odn-radio-indicator] {
width: var(--odn-radio-indicator-size-small);
height: var(--odn-radio-indicator-size-small);
}
[data-odn-radio-group-size=medium] {
gap: var(--odn-radio-gap-medium);
}
[data-odn-radio-group-size=medium][data-odn-radio-group-vertical=true] {
flex-direction: column;
gap: var(--odn-radio-gap-medium-vertical);
}
[data-odn-radio-group-size=medium] [data-odn-radio] {
height: var(--odn-radio-height-medium);
font-size: var(--odn-radio-label-font-size-medium);
line-height: var(--odn-radio-label-line-height-medium);
}
[data-odn-radio-group-size=medium] [data-odn-radio-input] {
width: var(--odn-radio-input-size-medium);
height: var(--odn-radio-input-size-medium);
}
[data-odn-radio-group-size=medium] [data-odn-radio-label] {
padding-inline-start: var(--odn-radio-input-gap-medium);
}
[data-odn-radio-group-size=medium] [data-odn-radio-indicator] {
width: var(--odn-radio-indicator-size-medium);
height: var(--odn-radio-indicator-size-medium);
}
[data-odn-radio-group-size=large] {
gap: var(--odn-radio-gap-large);
}
[data-odn-radio-group-size=large][data-odn-radio-group-vertical=true] {
flex-direction: column;
gap: var(--odn-radio-gap-large-vertical);
}
[data-odn-radio-group-size=large] [data-odn-radio] {
height: var(--odn-radio-height-large);
font-size: var(--odn-radio-label-font-size-large);
line-height: var(--odn-radio-label-line-height-large);
}
[data-odn-radio-group-size=large] [data-odn-radio-input] {
width: var(--odn-radio-input-size-large);
height: var(--odn-radio-input-size-large);
}
[data-odn-radio-group-size=large] [data-odn-radio-label] {
padding-inline-start: var(--odn-radio-input-gap-large);
}
[data-odn-radio-group-size=large] [data-odn-radio-indicator] {
width: var(--odn-radio-indicator-size-large);
height: var(--odn-radio-indicator-size-large);
}
html {
--odn-scroll-area-cover-size: 40px;
--odn-scroll-area-cover-blur: 2px;
--odn-scroll-area-cover-bg-offset: 25%;
--odn-scroll-area-shadow-size: 30px;
--odn-scroll-area-shadow-top: 0px 3px 6px rgba(0, 0, 0, 0.04);
}
[data-odn-scroll-area] {
position: relative;
overflow: hidden;
}
[data-odn-scroll-area-viewport] {
width: 100%;
height: 100%;
border-radius: inherit;
transition: color, box-shadow;
outline: none;
}
[data-odn-scroll-area-viewport]:focus-visible {
outline: 1px solid;
outline-offset: 2px;
}
[data-odn-scroll-area-scrollbar] {
z-index: 1;
display: flex;
touch-action: none;
padding: 1px;
transition: colors;
user-select: none;
}
[data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=vertical] {
height: 100%;
width: 10px;
border-left: 1px solid transparent;
}
[data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=horizontal] {
height: 10px;
flex-direction: column;
border-top: 1px solid transparent;
}
[data-odn-scroll-area-thumb] {
position: relative;
flex: 1;
border-radius: 9999px;
background-color: var(--odn-color-border);
}
[data-odn-scroll-area-progressive-blur-top],
[data-odn-scroll-area-progressive-blur-bottom] {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: var(--odn-scroll-area-cover-size);
backdrop-filter: blur(var(--odn-scroll-area-cover-blur));
pointer-events: none;
}
[data-odn-scroll-area-progressive-blur-top] {
top: 0;
background: linear-gradient(to top, transparent, var(--odn-color-solid-black-1));
mask-image: linear-gradient(to bottom, var(--odn-color-solid-black-1) var(--odn-scroll-area-cover-bg-offset), transparent);
}
[data-odn-scroll-area-progressive-blur-bottom] {
bottom: 0;
background: linear-gradient(to bottom, transparent, var(--odn-color-solid-black-1));
mask-image: linear-gradient(to top, var(--odn-color-solid-black-1) var(--odn-scroll-area-cover-bg-offset), transparent);
}
[data-odn-scroll-area-inset-shadow-top],
[data-odn-scroll-area-inset-shadow-bottom] {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: var(--odn-scroll-area-shadow-size);
pointer-events: none;
}
[data-odn-scroll-area-inset-shadow-top] {
top: calc(var(--odn-scroll-area-shadow-size) * -1);
box-shadow: var(--odn-scroll-area-shadow-top);
}
[data-radix-scroll-area-viewport] > *:first-child {
display: block !important;
}
html {
--odn-otp-padding-block-medium: 6px;
--odn-otp-width-medium: 30px;
--odn-otp-font-size-medium: 14px;
--odn-otp-line-height-medium: 1.5714285714285714;
--odn-otp-border-radius-medium: 6px;
--odn-otp-icon-size-medium: 16px;
--odn-otp-icon-margin-inline-medium: 4px;
--odn-otp-padding-block-small: 4px;
--odn-otp-width-small: 24px;
--odn-otp-font-size-small: 12px;
--odn-otp-line-height-small: 1.6666666666666667;
--odn-otp-border-radius-small: 6px;
--odn-otp-icon-size-small: 14px;
--odn-otp-icon-margin-inline-small: 4px;
--odn-otp-padding-block-large: 8px;
--odn-otp-width-large: 36px;
--odn-otp-font-size-large: 16px;
--odn-otp-line-height-large: 1.5;
--odn-otp-border-radius-large: 6px;
--odn-otp-icon-size-large: 18px;
--odn-otp-icon-margin-inline-large: 4px;
--odn-otp-bg-normal: #fff;
--odn-otp-bg-normal-hover: var(--odn-color-black-1);
--odn-otp-bg-normal-focus: #fff;
--odn-otp-bg-disabled: var(--odn-color-black-3);
--odn-otp-color-normal: var(--odn-color-black-12);
--odn-otp-color-normal-hover: var(--odn-color-black-12);
--odn-otp-color-normal-focus: var(--odn-color-black-12);
--odn-otp-color-disabled: var(--odn-color-black-8);
--odn-otp-border-normal: 1px solid var(--odn-color-black-6);
--odn-otp-border-normal-hover: 1px solid var(--odn-color-black-7);
--odn-otp-border-normal-focus: 1px solid var(--odn-color-blue-6);
--odn-otp-border-disabled: 1px solid var(--odn-color-black-6);
--odn-otp-shadow-normal: none;
--odn-otp-shadow-normal-hover: none;
--odn-otp-shadow-normal-focus: 0 0 0 2px var(--odn-color-blue-2);
--odn-otp-shadow-disabled: none;
}
[data-odn-otp-root] {
display: flex;
gap: 8px;
flex-wrap: nowrap;
}
[data-odn-otp-input] {
text-align: center;
position: relative;
min-width: 0;
font-size: inherit;
border: none;
border-radius: 0;
outline: none;
background: transparent;
color: inherit;
}
[data-odn-otp-input-disabled=true] {
color: var(--odn-otp-color-disabled);
background: var(--odn-otp-bg-disabled);
border: var(--odn-otp-border-disabled);
box-shadow: var(--odn-otp-shadow-disabled);
cursor: not-allowed;
}
[data-odn-otp-input-disabled=true] [data-odn-otp] {
cursor: not-allowed;
}
[data-odn-otp-input-size=small] {
padding: var(--odn-otp-padding-block-small) 0;
width: var(--odn-otp-width-small);
font-size: var(--odn-otp-font-size-small);
line-height: var(--odn-otp-line-height-small);
border-radius: var(--odn-otp-border-radius-small);
}
[data-odn-otp-input-size=medium] {
padding: var(--odn-otp-padding-block-medium) 0;
width: var(--odn-otp-width-medium);
font-size: var(--odn-otp-font-size-medium);
line-height: var(--odn-otp-line-height-medium);
border-radius: var(--odn-otp-border-radius-medium);
}
[data-odn-otp-input-size=large] {
padding: var(--odn-otp-padding-block-large) 0;
width: var(--odn-otp-width-large);
font-size: var(--odn-otp-font-size-large);
line-height: var(--odn-otp-line-height-large);
border-radius: var(--odn-otp-border-radius-large);
}
[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]) {
color: var(--odn-otp-color-normal);
background: var(--odn-otp-bg-normal);
border: var(--odn-otp-border-normal);
box-shadow: var(--odn-otp-shadow-normal);
}
[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]):hover {
color: var(--odn-otp-color-normal-hover);
background: var(--odn-otp-bg-normal-hover);
border: var(--odn-otp-border-normal-hover);
box-shadow: var(--odn-otp-shadow-normal-hover);
}
[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]):focus {
color: var(--odn-otp-color-normal-focus);
background: var(--odn-otp-bg-normal-focus);
border: var(--odn-otp-border-normal-focus);
box-shadow: var(--odn-otp-shadow-normal-focus);
}
[data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true])::selection {
background: var(--odn-otp-bg-normal-selection);
}
@charset "UTF-8";
html {
/* 按钮的间距 */
--odn-pagination-gap: 0;
/* 按钮宽度 */
--odn-pagination-item-width: 32px;
/* 按钮高度 */
--odn-pagination-item-height: 32px;
/* 按钮字体大小 */
--odn-pagination-item-font-size: 14px;
/* 按钮字重 */
--odn-pagination-item-font-weight: 400;
/* 按钮字体颜色 */
--odn-pagination-item-color: rgba(0, 0, 0, 0.95);
/* hover 背景颜色 */
--odn-pagination-item-bg-hover: #f0f0f0;
/* active 背景颜色 */
--odn-pagination-item-bg-active: #f5f8ff;
/* active 字重 */
--odn-pagination-item-font-weight-active: 600;
/* active 字体颜色 */
--odn-pagination-item-color-active: var(--odn-color-primary);
/* active 边框样式 */
--odn-pagination-item-border-active: 1px solid var(--odn-color-primary);
/* 按钮的圆角 */
--odn-pagination-item-border-radius: 6px;
}
[data-odn-pagination] {
position: relative;
display: flex;
align-items: center;
user-select: none;
gap: var(--odn-pagination-gap);
font-size: var(--odn-pagination-item-font-size);
color: var(--odn-pagination-item-color);
}
[data-odn-pagination-simple=true] {
gap: 8px;
}
[data-odn-pagination-item] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: var(--odn-pagination-item-width);
height: var(--odn-pagination-item-height);
cursor: pointer;
transition: color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-pagination-hover-fill] {
position: absolute;
top: 0;
left: 0;
width: var(--odn-pagination-item-width);
height: var(--odn-pagination-item-height);
pointer-events: none;
transition: left 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-pagination-hover-fill-bg] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
border-radius: var(--odn-pagination-item-border-radius);
transform: scale(0.8);
transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), background 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-pagination-active-indicator] {
position: absolute;
top: 0;
left: 0;
width: var(--odn-pagination-item-width);
height: var(--odn-pagination-item-height);
background-color: var(--odn-pagination-item-bg-active);
border: var(--odn-pagination-item-border-active);
border-radius: var(--odn-pagination-item-border-radius);
opacity: 0;
pointer-events: none;
transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-pagination-item-active=true] {
color: var(--odn-pagination-item-color-active);
font-weight: var(--odn-pagination-item-font-weight-active);
}
[data-odn-pagination-item-disabled=true] {
cursor: not-allowed;
color: rgba(69, 80, 102, 0.25);
}
[data-odn-pagination-item-ellipsis-icon] {
transition: opacity 0.1s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-pagination-item-ellipsis-icon-hover] {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
opacity: 0;
transition: opacity 0.1s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-pagination-item-ellipsis]:hover [data-odn-pagination-item-ellipsis-icon] {
opacity: 0;
}
[data-odn-pagination-item-ellipsis]:hover [data-odn-pagination-item-ellipsis-icon-hover] {
opacity: 1;
}
[data-odn-pagination-simple-page-value] {
display: inline-block;
margin-left: -5px;
width: 15px;
text-align: right;
white-space: nowrap;
}
:root {
--odn-switch-track-bg: #f3f4f6;
--odn-switch-track-bg-hover: var(--odn-color-black-5);
--odn-switch-track-bg-active: var(--odn-color-black-6);
--odn-switch-track-bg-focus: var(--odn-color-black-6);
--odn-switch-track-bg-checked: #3b82f6;
--odn-switch-track-bg-checked-hover: var(--odn-color-blue-7);
--odn-switch-track-bg-checked-active: var(--odn-color-blue-8);
--odn-switch-track-border: transparent;
--odn-switch-thumb-bg: #fff;
--odn-switch-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
--odn-switch-shadow: none;
--odn-switch-transition: all 0.15s ease-in-out;
--odn-switch-disabled-opacity: 0.5;
--odn-switch-disabled-bg: var(--odn-color-black-4);
--odn-switch-disabled-color: var(--odn-color-black-8);
--odn-switch-label-color: #374151;
--odn-switch-label-gap: 8px;
--odn-switch-size-small-height: 16px;
--odn-switch-size-small-width: 26px;
--odn-switch-size-small-thumb-width: 12px;
--odn-switch-size-small-thumb-height: 12px;
--odn-switch-size-small-font-size: 12px;
--odn-switch-size-small-line-height: 20px;
--odn-switch-size-medium-height: 20px;
--odn-switch-size-medium-width: 32px;
--odn-switch-size-medium-thumb-width: 16px;
--odn-switch-size-medium-thumb-height: 16px;
--odn-switch-size-medium-font-size: 14px;
--odn-switch-size-medium-line-height: 22px;
--odn-switch-size-large-height: 24px;
--odn-switch-size-large-width: 38px;
--odn-switch-size-large-thumb-width: 20px;
--odn-switch-size-large-thumb-height: 20px;
--odn-switch-size-large-font-size: 16px;
--odn-switch-size-large-line-height: 24px;
}
[data-odn-switch-wrapper] {
display: inline-flex;
align-items: center;
cursor: pointer;
}
[data-odn-switch-wrapper]:has([data-odn-switch][disabled]) {
cursor: not-allowed;
}
[data-odn-switch-label] {
font-size: var(--odn-switch-size-medium-font-size);
line-height: var(--odn-switch-size-medium-line-height);
color: var(--odn-switch-label-color);
user-select: none;
padding-left: var(--odn-switch-label-gap);
cursor: pointer;
}
[data-odn-switch-wrapper]:has([data-odn-switch][disabled]) [data-odn-switch-label] {
color: var(--odn-switch-disabled-color);
cursor: not-allowed;
}
[data-odn-switch] {
display: inline-flex;
height: var(--odn-switch-size-medium-height);
width: var(--odn-switch-size-medium-width);
flex-shrink: 0;
align-items: center;
border-radius: 9999px;
box-shadow: var(--odn-switch-shadow);
transition: var(--odn-switch-transition);
outline: none;
}
[data-odn-switch][data-state=unchecked] {
background-color: var(--odn-switch-track-bg);
}
[data-odn-switch][data-state=unchecked]:hover:not(:disabled) {
background-color: var(--odn-switch-track-bg-hover);
}
[data-odn-switch][data-state=unchecked]:active:not(:disabled) {
background-color: var(--odn-switch-track-bg-active);
}
[data-odn-switch][data-state=checked] {
background-color: var(--odn-switch-track-bg-checked);
}
[data-odn-switch][data-state=checked]:hover:not(:disabled) {
background-color: var(--odn-switch-track-bg-checked-hover);
}
[data-odn-switch][data-state=checked]:active:not(:disabled) {
background-color: var(--odn-switch-track-bg-checked-active);
}
[data-odn-switch]:focus-visible {
box-shadow: var(--odn-switch-focus-ring);
background-color: var(--odn-switch-track-bg-focus);
}
[data-odn-switch]:disabled {
cursor: not-allowed;
background-color: var(--odn-switch-disabled-bg);
}
[data-odn-switch-thumb] {
background-color: var(--odn-switch-thumb-bg);
pointer-events: none;
display: block;
width: var(--odn-switch-size-medium-thumb-width);
height: var(--odn-switch-size-medium-thumb-height);
border-radius: 50%;
box-shadow: none;
transition: var(--odn-switch-transition);
}
[data-state=unchecked] [data-odn-switch-thumb] {
transform: translateX(2px);
}
[data-state=checked] [data-odn-switch-thumb] {
transform: translateX(calc(var(--odn-switch-size-medium-width) - var(--odn-switch-size-medium-thumb-width) - 2px));
}
[data-odn-switch-size=small] {
height: var(--odn-switch-size-small-height);
width: var(--odn-switch-size-small-width);
}
[data-odn-switch-size=small] [data-odn-switch-thumb] {
width: var(--odn-switch-size-small-thumb-width);
height: var(--odn-switch-size-small-thumb-width);
}
[data-odn-switch-size=small][data-state=unchecked] [data-odn-switch-thumb] {
transform: translateX(2px);
}
[data-odn-switch-size=small][data-state=checked] [data-odn-switch-thumb] {
transform: translateX(calc(var(--odn-switch-size-small-width) - var(--odn-switch-size-small-thumb-width) - 2px));
}
[data-odn-switch-size=small] ~ [data-odn-switch-label] {
font-size: var(--odn-switch-size-small-font-size);
line-height: var(--odn-switch-size-small-line-height);
}
[data-odn-switch-size=large] {
height: var(--odn-switch-size-large-height);
width: var(--odn-switch-size-large-width);
}
[data-odn-switch-size=large] [data-odn-switch-thumb] {
width: var(--odn-switch-size-large-thumb-width);
height: var(--odn-switch-size-large-thumb-height);
}
[data-odn-switch-size=large][data-state=unchecked] [data-odn-switch-thumb] {
transform: translateX(2px);
}
[data-odn-switch-size=large][data-state=checked] [data-odn-switch-thumb] {
transform: translateX(calc(var(--odn-switch-size-large-width) - var(--odn-switch-size-large-thumb-width) - 2px));
}
[data-odn-switch-size=large] ~ [data-odn-switch-label] {
font-size: var(--odn-switch-size-large-font-size);
line-height: var(--odn-switch-size-large-line-height);
}
@charset "UTF-8";
html {
/* 垂直标签项左侧内边距 */
--odn-vertical-item-padding-left: 15px;
/* 垂直标签项高度 */
--odn-vertical-item-height: 30px;
/* 垂直标签项字体大小 */
--odn-vertical-item-font-size: 18px;
/* 垂直标签项文字颜色 */
--odn-vertical-item-color: rgba(51, 55, 61, 0.58);
/* 垂直标签项图标填充颜色 */
--odn-vertical-item-svg-fill: rgba(62, 69, 82, 0.36);
/* 垂直标签项激活时文字描边宽度 */
--odn-vertical-item-text-stroke: 0.5px;
/* 垂直指示器宽度 */
--odn-vertical-indicator-width: 3px;
/* 垂直指示器背景颜色 */
--odn-vertical-indicator-bg: rgba(0, 0, 0, 0.05);
/* 垂直指示器圆角 */
--odn-vertical-indicator-border-radius: 8px;
/* 分隔符宽度 */
--odn-divider-divider-width: 1px;
/* 分隔符高度 */
--odn-divider-divider-height: 12px;
/* 分隔符背景颜色 */
--odn-divider-divider-bg: rgba(73, 90, 122, 0.12);
/* 分隔符标签项字体大小 */
--odn-divider-item-font-size: 14px;
/* 分隔符标签项文字颜色 */
--odn-divider-item-color: rgba(51, 55, 61, 0.58);
/* 分隔符标签项图标填充颜色 */
--odn-divider-item-svg-fill: rgba(62, 69, 82, 0.36);
/* 分隔符标签项激活时文字描边宽度 */
--odn-divider-item-text-stroke: 0.1px;
/* 按钮组边框宽度 */
--odn-button-group-border-width: 1px;
/* 按钮组边框颜色 */
--odn-button-group-border-color: rgba(73, 90, 122, 0.12);
/* 按钮组圆角 */
--odn-button-group-border-radius: 6px;
/* 按钮组项间隙 */
--odn-button-group-item-gap: 4px;
/* 按钮组项水平内边距 */
--odn-button-group-item-padding-horizontal: 12px;
/* 按钮组项高度 */
--odn-button-group-item-height: 36px;
/* 按钮组项字体大小 */
--odn-button-group-item-font-size: 14px;
/* 按钮组项文字颜色 */
--odn-button-group-item-color: rgba(51, 55, 61, 0.58);
/* 按钮组项图标填充颜色 */
--odn-button-group-item-svg-fill: rgba(62, 69, 82, 0.36);
/* 按钮组项激活时文字描边宽度 */
--odn-button-group-item-text-stroke: 0.1px;
/* 按钮组指示器宽度 */
--odn-button-group-indicator-width: 80px;
/* 按钮组指示器背景颜色 */
--odn-button-group-indicator-bg: rgba(41, 107, 239, 0.06);
/* 按钮组指示器轮廓宽度 */
--odn-button-group-indicator-outline-width: 2px;
/* 按钮组指示器轮廓颜色 */
--odn-button-group-indicator-outline-color: rgba(41, 107, 239, 0.8);
/* 按钮组指示器圆角 */
--odn-button-group-indicator-border-radius: 6px;
/* 标签项底部内边距 */
--odn-tabs-item-padding-bottom: 10px;
/* 标签项字体大小 */
--odn-tabs-item-font-size: 18px;
/* 标签项行高 */
--odn-tabs-item-line-height: 24px;
/* 标签项字重 */
--odn-tabs-item-font-weight: 600;
/* 标签指示器高度 */
--odn-tabs-indicator-height: 3px;
/* 标签指示器圆角 */
--odn-tabs-indicator-border-radius: 8px;
/* 标签项间隙 */
--odn-tag-item-gap: 2px;
/* 标签项水平内边距 */
--odn-tag-item-padding-horizontal: 12px;
/* 标签项高度 */
--odn-tag-item-height: 30px;
/* 标签项字体大小 */
--odn-tag-item-font-size: 14px;
/* 标签项文字颜色 */
--odn-tag-item-color: rgba(51, 55, 61, 0.58);
/* 标签项背景颜色 */
--odn-tag-item-bg: rgba(73, 90, 122, 0.03);
/* 标签项图标填充颜色 */
--odn-tag-item-svg-fill: rgba(62, 69, 82, 0.36);
/* 标签项圆角 */
--odn-tag-item-border-radius: 6px;
/* 标签项激活时背景颜色 */
--odn-tag-item-layer-bg: #eef3fe;
}
/* ==========================================================================
Vertical
========================================================================== */
[data-odn-vertical] {
position: relative;
width: fit-content;
white-space: nowrap;
}
[data-odn-vertical-item] {
display: flex;
align-items: center;
padding-left: var(--odn-vertical-item-padding-left);
height: var(--odn-vertical-item-height);
font-size: var(--odn-vertical-item-font-size);
color: var(--odn-vertical-item-color);
cursor: pointer;
}
[data-odn-vertical-item] svg {
flex: none;
fill: var(--odn-vertical-item-svg-fill);
}
[data-odn-vertical-item-layer=true] {
-webkit-text-stroke: var(--odn-vertical-item-text-stroke);
color: var(--odn-color-primary);
}
[data-odn-vertical-item-layer=true] svg {
fill: var(--odn-color-primary);
}
[data-odn-vertical-layer] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
will-change: clip-path;
}
[data-odn-vertical-indicator-wrapper] {
position: absolute;
top: 0;
left: 0;
width: var(--odn-vertical-indicator-width);
height: 100%;
background-color: var(--odn-vertical-indicator-bg);
border-radius: var(--odn-vertical-indicator-border-radius);
}
[data-odn-vertical-indicator] {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: var(--odn-color-primary);
border-radius: inherit;
}
/* ==========================================================================
Divider
========================================================================== */
[data-odn-divider] {
position: relative;
white-space: nowrap;
display: flex;
align-items: center;
width: fit-content;
}
[data-odn-divider-divider] {
width: var(--odn-divider-divider-width);
height: var(--odn-divider-divider-height);
background-color: var(--odn-divider-divider-bg);
}
[data-odn-divider-layer] {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
width: 100%;
height: 100%;
pointer-events: none;
will-change: clip-path;
}
[data-odn-divider-item] {
font-size: var(--odn-divider-item-font-size);
cursor: pointer;
color: var(--odn-divider-item-color);
}
[data-odn-divider-item] svg {
flex: none;
fill: var(--odn-divider-item-svg-fill);
}
[data-odn-divider-item-layer] {
color: var(--odn-color-primary);
-webkit-text-stroke: var(--odn-divider-item-text-stroke);
}
[data-odn-divider-item-disabled=true] {
cursor: not-allowed;
}
/* ==========================================================================
ButtonGroup
========================================================================== */
[data-odn-button-group] {
position: relative;
width: fit-content;
white-space: nowrap;
display: flex;
align-items: center;
border: var(--odn-button-group-border-width) solid var(--odn-button-group-border-color);
border-radius: var(--odn-button-group-border-radius);
}
[data-odn-button-group-item] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: var(--odn-button-group-item-gap);
padding: 0 var(--odn-button-group-item-padding-horizontal);
height: var(--odn-button-group-item-height);
font-size: var(--odn-button-group-item-font-size);
cursor: pointer;
color: var(--odn-button-group-item-color);
}
[data-odn-button-group-item] svg {
flex: none;
fill: var(--odn-button-group-item-svg-fill);
}
[data-odn-button-group-item-layer] svg {
fill: currentcolor;
}
[data-odn-button-group-layer] {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
pointer-events: none;
will-change: clip-path;
}
[data-odn-button-group-item-layer] {
color: var(--odn-color-primary);
-webkit-text-stroke: var(--odn-button-group-item-text-stroke);
}
[data-odn-button-group-indicator] {
position: absolute;
top: 0;
left: 0;
width: var(--odn-button-group-indicator-width);
height: 100%;
background-color: var(--odn-button-group-indicator-bg);
background-color: color-mix(in srgb, var(--odn-color-primary) 6%, transparent);
outline: var(--odn-button-group-indicator-outline-width) solid var(--odn-button-group-indicator-outline-color);
outline: var(--odn-button-group-indicator-outline-width) solid color-mix(in srgb, var(--odn-color-primary) 80%, transparent);
border-radius: var(--odn-button-group-indicator-border-radius);
}
/* ==========================================================================
Tabs
========================================================================== */
[data-odn-tabs] {
position: relative;
white-space: nowrap;
}
[data-odn-tabs-base] {
display: flex;
align-items: center;
width: fit-content;
}
[data-odn-tabs-layer] {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
width: 100%;
height: 100%;
pointer-events: none;
will-change: clip-path;
}
[data-odn-tabs-item] {
padding-bottom: var(--odn-tabs-item-padding-bottom);
font-size: var(--odn-tabs-item-font-size);
line-height: var(--odn-tabs-item-line-height);
font-weight: var(--odn-tabs-item-font-weight);
cursor: pointer;
}
[data-odn-tabs-item-layer] {
color: var(--odn-color-primary);
}
[data-odn-tabs-indicator] {
position: absolute;
bottom: 0;
left: 0;
height: var(--odn-tabs-indicator-height);
background-color: var(--odn-color-primary);
border-radius: var(--odn-tabs-indicator-border-radius);
pointer-events: none;
}
/* ==========================================================================
Tag
========================================================================== */
[data-odn-tag] {
position: relative;
display: flex;
align-items: center;
width: fit-content;
white-space: nowrap;
}
[data-odn-tag-layer] {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
width: 100%;
height: 100%;
pointer-events: none;
will-change: clip-path;
}
[data-odn-tag-item] {
display: flex;
align-items: center;
gap: var(--odn-tag-item-gap);
padding: 0 var(--odn-tag-item-padding-horizontal);
height: var(--odn-tag-item-height);
font-size: var(--odn-tag-item-font-size);
color: var(--odn-tag-item-color);
background-color: var(--odn-tag-item-bg);
cursor: pointer;
border-radius: var(--odn-tag-item-border-radius);
}
[data-odn-tag-item] svg {
flex: none;
fill: var(--odn-tag-item-svg-fill);
}
[data-odn-tag-item-layer] {
color: var(--odn-color-primary);
background-color: var(--odn-tag-item-layer-bg);
}
[data-odn-tag-item-layer] svg {
fill: currentcolor;
}
:root {
--odn-tp-input-padding-inline-end: 32px;
--odn-tp-input-padding-inline-start: 12px;
--odn-tp-input-padding-block: 6px;
--odn-tp-input-border-radius: 6px;
--odn-tp-input-width: 160px;
--odn-tp-input-height: 36px;
--odn-tp-input-font-size: 14px;
--odn-tp-input-line-height: 1.5;
--odn-tp-icon-size: 16px;
--odn-tp-icon-right: 8px;
--odn-tp-popup-padding-block: 8px;
--odn-tp-popup-padding-inline: 0;
}
[data-odn-time-picker-container] {
position: relative;
display: inline-block;
width: var(--odn-tp-input-width);
}
[data-odn-time-picker-container-disabled=true] [data-odn-time-picker-input] {
color: var(--odn-color-black-8);
background: var(--odn-color-black-3);
border: 1px solid var(--odn-color-black-6);
cursor: not-allowed;
}
[data-odn-time-picker-container-disabled=true] [data-odn-time-picker-icon-container] {
cursor: not-allowed;
}
[data-odn-time-picker-container-disabled=true] [data-odn-time-picker-icon] {
color: var(--odn-color-black-8);
}
[data-odn-time-picker-container-selected=true][data-odn-time-picker-container-disabled=false][data-odn-time-picker-container-allow-clear=true]:hover [data-odn-time-picker-icon-clear] {
opacity: 1;
}
[data-odn-time-picker-container-selected=true][data-odn-time-picker-container-disabled=false][data-odn-time-picker-container-allow-clear=true]:hover [data-odn-time-picker-icon-clock] {
opacity: 0;
}
[data-odn-time-picker-input] {
position: relative;
z-index: 1;
width: 100%;
min-height: 100%;
max-height: 100%;
font-family: inherit;
text-align: inherit;
font-size: var(--odn-tp-input-font-size);
line-height: var(--odn-tp-input-line-height);
color: #1f1f1f;
background-color: #fff;
border-radius: var(--odn-tp-input-border-radius);
outline: none;
appearance: none;
transition: 0.2s cubic-bezier(0.32, 0.72, 0, 1) background-color, 0.2s cubic-bezier(0.32, 0.72, 0, 1) border-color;
padding: var(--odn-tp-input-padding-block) var(--odn-tp-input-padding-inline-end) var(--odn-tp-input-padding-block) var(--odn-tp-input-padding-inline-start);
height: var(--odn-tp-input-height);
border: 1px solid var(--odn-color-black-6);
}
[data-odn-time-picker-input]:not([data-odn-time-picker-input-disabled=true]):hover {
border: 1px solid var(--odn-color-black-7);
}
[data-odn-time-picker-input]:not([data-odn-time-picker-input-disabled=true]):focus {
border: 1px solid var(--odn-color-primary);
}
[data-odn-time-picker-container-allow-clear=false] [data-odn-time-picker-icon-container],
[data-odn-time-picker-container-selected=false] [data-odn-time-picker-icon-container] {
pointer-events: none;
}
[data-odn-time-picker-icon-container] {
position: absolute;
z-index: 1;
top: 50%;
right: var(--odn-tp-icon-right);
width: var(--odn-tp-icon-size);
height: var(--odn-tp-icon-size);
transform: translateY(-50%);
cursor: pointer;
}
[data-odn-time-picker-icon] {
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-odn-time-picker-icon-clock] {
color: var(--odn-color-black-9);
}
[data-odn-time-picker-icon-clear] {
opacity: 0;
color: var(--odn-color-black-7);
}
[data-odn-time-picker-icon-clear]:hover {
color: var(--odn-color-black-8);
}
[data-odn-time-picker-icon-clear]:active {
color: var(--odn-color-black-9);
}
[data-odn-time-picker-popup-content] {
display: flex;
height: calc(var(--odn-popup-control-height) * 6 + var(--odn-tp-popup-padding-block) * 2);
user-select: none;
}
[data-odn-time-picker-options] {
flex: 1;
padding: var(--odn-tp-popup-padding-block) var(--odn-tp-popup-padding-inline);
min-width: 80px;
display: flex;
flex-direction: column;
height: calc(var(--odn-popup-control-height) * 6 + var(--odn-tp-popup-padding-block) * 2);
}
[data-odn-time-picker-options]:not(:last-child) {
box-shadow: 1px 0 0 var(--odn-color-black-4);
}
[data-odn-time-picker-option] {
display: flex;
align-items: center;
justify-content: center;
height: var(--odn-popup-control-height);
font-size: 14px;
color: var(--odn-color-black-12);
cursor: pointer;
text-align: center;
}
[data-odn-time-picker-option]:hover:not([data-odn-time-picker-option-disabled=true]) {
background-color: var(--odn-color-black-1);
}
[data-odn-time-picker-option][data-odn-time-picker-option-selected=true] {
background-color: var(--odn-color-blue-1);
}
[data-odn-time-picker-option][data-odn-time-picker-option-selected=true]:hover {
background-color: var(--odn-color-blue-1);
}
[data-odn-time-picker-option-disabled=true] {
color: var(--odn-color-black-8);
cursor: not-allowed;
}
[data-odn-time-picker-padding-bottom] {
height: calc(var(--odn-popup-control-height) * 5);
}
[data-odn-time-picker-container-light=true] [data-odn-time-picker-input] {
background-color: transparent;
border: 1px solid transparent;
}
[data-odn-time-picker-container-light=true] [data-odn-time-picker-input]:hover {
border: 1px solid transparent;
}
[data-odn-time-picker-container-light=true] [data-odn-time-picker-input]:focus {
background-color: #fff;
border: 1px solid var(--odn-color-primary);
}
html {
--odn-table-loading-height: 240px;
--odn-table-border-color: var(--odn-color-solid-black-5);
--odn-table-cell-bg: var(--odn-color-white);
--odn-table-cell-bg-hover: var(--odn-color-solid-black-1);
--odn-table-cell-bg-striped: var(--odn-color-solid-black-1);
--odn-table-cell-bg-striped-hover: var(--odn-color-solid-black-2);
}
[data-odn-table] {
max-width: 100%;
}
.odn-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
max-width: 100%;
}
.odn-table table {
width: 100%;
text-align: start;
border-collapse: separate;
border-spacing: 0;
font-size: var(--odn-font-size);
line-height: var(--odn-line-height);
}
.odn-table-body::-webkit-scrollbar,
.odn-table-content::-webkit-scrollbar {
width: 14px;
height: 14px;
}
.odn-table-body::-webkit-scrollbar-thumb,
.odn-table-content::-webkit-scrollbar-thumb {
min-width: 14px;
min-height: 14px;
background-color: var(--odn-color-border);
background-clip: content-box;
border: 4px solid transparent;
border-radius: 14px;
}
.odn-table-body::-webkit-scrollbar-track,
.odn-table-content::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
.odn-table-cell {
padding: 12px;
overflow-wrap: break-word;
background-color: var(--odn-table-cell-bg);
}
.odn-table-cell-ellipsis .odn-table-cell-content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
}
.odn-table-cell-row-hover {
background-color: var(--odn-table-cell-bg-hover);
}
.odn-table-summary td {
border-top: 1px solid var(--odn-table-border-color);
}
.odn-table-thead {
position: relative;
}
.odn-table-thead .odn-table-cell {
font-weight: 600;
text-align: start;
border-bottom: 1px solid var(--odn-table-border-color);
user-select: none;
}
.odn-table-tbody .odn-table-row:not(:last-child) .odn-table-cell {
border-bottom: 1px solid var(--odn-table-border-color);
}
[data-odn-table-bordered=true] .odn-table {
border-top: 1px solid var(--odn-table-border-color);
border-left: 1px solid var(--odn-table-border-color);
}
[data-odn-table-bordered=true] .odn-table-cell {
border-right: 1px solid var(--odn-table-border-color);
}
[data-odn-table-bordered=true] .odn-table-tbody .odn-table-row .odn-table-cell {
border-bottom: 1px solid var(--odn-table-border-color);
}
[data-odn-table-striped=true] .odn-table-thead .odn-table-cell {
background-color: var(--odn-table-cell-bg-striped);
}
[data-odn-table-striped=true] .odn-table-tbody .odn-table-row:nth-child(even) .odn-table-cell {
background-color: var(--odn-table-cell-bg-striped);
}
[data-odn-table-striped=true] .odn-table-tbody .odn-table-row:nth-child(even) .odn-table-cell.odn-table-cell-row-hover {
background-color: var(--odn-table-cell-bg-striped-hover);
}
[data-odn-table-selection-checkbox] {
vertical-align: top;
}
[data-odn-table-tr-clickable=true] .odn-table-row {
cursor: pointer;
}
[data-odn-table-column-filter] {
display: inline-block;
margin-left: 4px;
vertical-align: -3px;
cursor: pointer;
color: var(--odn-color-black-8);
}
[data-odn-table-column-filter]:hover {
color: var(--odn-color-black-9);
}
[data-odn-table-column-filter][data-odn-table-column-filter-active=true] {
color: var(--odn-color-primary);
}
[data-odn-table-filter-menu] {
padding: 12px;
}
[data-odn-table-filter-footer] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px;
border-top: 1px solid var(--odn-table-border-color);
}
[data-odn-table-column-sorter] {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
}
[data-odn-table-column-sorter-inner] {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
[data-odn-table-column-sorter-title] {
flex: 1;
min-width: 0;
}
[data-odn-table-column-sorter-inner] {
flex: none;
position: relative;
width: 16px;
height: 16px;
}
[data-odn-table-column-sorter-up],
[data-odn-table-column-sorter-down] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: var(--odn-color-black-8);
}
[data-odn-table-column-sorter-order=ascend],
[data-odn-table-column-sorter-order=descend] {
color: var(--odn-color-primary);
}
[data-odn-table-column-sorter-order=ascend] [data-odn-table-column-sorter-up] {
fill: var(--odn-color-primary);
}
[data-odn-table-column-sorter-order=descend] [data-odn-table-column-sorter-down] {
fill: var(--odn-color-primary);
}
[data-odn-table-expand-icon] {
display: block;
cursor: pointer;
}
.odn-table-cell-fix-left::after,
.odn-table-cell-fix-right::after {
content: "";
position: absolute;
top: 0;
bottom: 1px;
width: 30px;
transition: box-shadow 0.15s cubic-bezier(0.32, 0.72, 0, 1);
pointer-events: none;
will-change: transform;
}
.odn-table-cell-fix-left::after {
right: 0;
transform: translate3d(100%, 0, 0);
}
.odn-table-cell-fix-right::after {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.odn-table-ping-left .odn-table-cell-fix-left-last::after {
box-shadow: inset 10px 0 8px -8px var(--odn-color-black-3);
}
.odn-table-ping-right .odn-table-cell-fix-right-first::after {
box-shadow: inset -10px 0 8px -8px var(--odn-color-black-3);
}
[data-odn-table-empty] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
height: var(--odn-table-loading-height);
font-size: 13px;
font-weight: 600;
color: var(--odn-color-black-9);
}
.odn-table-thead::after {
content: "";
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, color-mix(in srgb, var(--odn-primary-color) 5%, transparent) 0%, var(--odn-primary-color) 50%, color-mix(in srgb, var(--odn-primary-color) 5%, transparent) 100%);
background-size: 200% 100%;
z-index: 1;
}
[data-odn-table-loading=true] .odn-table-thead::after {
display: block;
animation: loading-bar 2s ease-in-out infinite;
}
[data-odn-table-loading=true] .odn-table {
pointer-events: none;
}
[data-odn-table-loading=true] .odn-table-tbody {
opacity: 0.5;
}
@keyframes loading-bar {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
[data-odn-table-popover-text] {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-style: dashed;
text-underline-offset: 3px;
}
[data-odn-table-popover-icon] {
display: inline-block;
margin-left: 2px;
vertical-align: -3px;
cursor: pointer;
color: var(--odn-color-black-8);
}
[data-odn-table-popover-icon]:hover {
color: var(--odn-color-black-9);
}
.odn-table-sticky-holder {
position: sticky;
z-index: 3;
}
.odn-table-sticky-scroll {
position: sticky;
bottom: 0;
height: 8px;
z-index: 3;
display: flex;
align-items: center;
background-color: #fff;
border-top: 1px solid var(--odn-color-border);
}
.odn-table-sticky-scroll-bar {
height: 6px;
background-color: var(--odn-color-border);
border-radius: 9999px;
position: absolute;
top: calc(50% - 3px);
}
.odn-table-measure-cell {
padding-block: 0 !important;
border-block: 0 !important;
}
.odn-table-measure-cell-content {
height: 0;
overflow: hidden;
pointer-events: none;
}
[data-text-swap] {
position: relative;
display: inline-block;
user-select: none;
transition: 0.5s cubic-bezier(0.32, 0.72, 0, 1) all;
}
[data-text-swap-char] {
will-change: transform, filter, opacity;
}
[data-text-swap-inner] {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
}
[data-text-swap-flip] {
display: grid;
width: fit-content;
user-select: none;
}
[data-text-swap-flip-original],
[data-text-swap-flip-swapped] {
grid-area: 1/1;
}
[data-text-swap-flip-char] {
display: inline-block;
}
html {
--odn-ts-indent-width: 16px;
}
.odn-ts .odn-select-tree-list-scrollbar-vertical {
width: 6px !important;
}
.odn-ts .odn-select-tree-list-scrollbar-vertical .odn-select-tree-list-scrollbar-thumb {
right: 2px;
background-color: var(--odn-color-border) !important;
}
.odn-select-tree-treenode {
position: relative;
display: flex;
align-items: center;
padding: 0 4px;
height: var(--odn-control-height);
cursor: pointer;
}
.odn-select-tree-treenode:hover {
background-color: var(--odn-color-black-1);
}
.odn-select-tree-treenode:active {
background-color: var(--odn-color-black-2);
}
.odn-select-tree-treenode.odn-select-tree-treenode-selected {
background-color: var(--odn-color-brand-1);
}
.odn-select-tree-treenode.odn-select-tree-treenode-selected:hover, .odn-select-tree-treenode.odn-select-tree-treenode-selected:active {
background-color: var(--odn-color-brand-1);
}
.odn-ts-multiple .odn-select-tree-switcher::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.odn-select-tree-switcher {
display: flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
margin-right: 4px;
color: var(--odn-color-black-11);
border-radius: 4px;
}
.odn-select-tree-switcher_open > svg {
transform: rotate(90deg);
}
.odn-select-tree-node-content-wrapper {
flex: 1;
display: flex;
align-items: center;
height: 100%;
}
.odn-select-tree-checkbox {
position: relative;
z-index: 2;
margin-right: 8px;
padding: 0;
color: var(--odn-color-text);
font-size: var(--odn-font-size);
line-height: 1;
list-style: none;
font-family: var(--odn-font-family);
position: relative;
white-space: nowrap;
cursor: pointer;
border-radius: 4px;
align-self: center;
}
.odn-select-tree-checkbox-inner {
display: block;
width: 16px;
height: 16px;
background-color: var(--odn-color-bg-container);
border: 1px solid var(--odn-color-black-6);
border-radius: 4px;
border-collapse: separate;
}
.odn-select-tree-checkbox-inner::after {
position: absolute;
top: 50%;
inset-inline-start: 25%;
display: table;
width: 5.7142857143px;
height: 9.1428571429px;
border: 2px solid var(--odn-color-white);
border-top: 0;
border-inline-start: 0;
transform: rotate(45deg) scale(0) translate(-50%, -50%);
opacity: 0;
content: "";
}
.odn-select-tree-checkbox:not(.odn-select-tree-checkbox-disabled):hover .odn-select-tree-checkbox-inner,
.odn-select-tree-checkbox:not(.odn-select-tree-checkbox-disabled):hover .odn-select-tree-checkbox-inner {
border-color: var(--odn-color-primary);
}
.odn-select-tree-checkbox:not(.odn-select-tree-checkbox-disabled):hover .odn-select-tree-checkbox-checked:not(.odn-select-tree-checkbox-disabled) .odn-select-tree-checkbox-inner {
background-color: var(--odn-color-primary-hover);
border-color: transparent;
}
.odn-select-tree-panel .odn-select-tree-checkbox:not(.odn-select-tree-checkbox-disabled):hover .odn-select-tree-checkbox-checked:not(.odn-select-tree-checkbox-disabled)::after {
border-color: var(--odn-color-primary-hover);
}
.odn-select-tree-checkbox-checked .odn-select-tree-checkbox-inner {
background-color: var(--odn-color-primary);
border-color: var(--odn-color-primary);
}
.odn-select-tree-checkbox-checked .odn-select-tree-checkbox-inner::after {
opacity: 1;
transform: rotate(45deg) scale(1) translate(-50%, -50%);
}
.odn-select-tree-checkbox-checked:not(.odn-select-tree-checkbox-disabled):hover .odn-select-tree-checkbox-inner,
.odn-select-tree-checkbox-checked:not(.odn-select-tree-checkbox-disabled):hover .odn-select-tree-checkbox-inner {
background-color: var(--odn-color-primary-hover);
border-color: transparent;
}
.odn-select-tree-checkbox-indeterminate .odn-select-tree-checkbox-inner {
background-color: var(--odn-color-primary);
border-color: var(--odn-color-border);
}
.odn-select-tree-checkbox-indeterminate .odn-select-tree-checkbox-inner::after {
top: 50%;
inset-inline-start: 50%;
width: 10px;
height: 2px;
background-color: var(--odn-color-white);
border: 0;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
content: "";
}
.odn-select-tree-checkbox-indeterminate:hover .odn-select-tree-checkbox-inner {
background-color: var(--odn-color-primary);
border-color: var(--odn-color-primary);
}
.odn-select-tree-checkbox-disabled {
cursor: not-allowed;
}
.odn-select-tree-checkbox-disabled,
.odn-select-tree-checkbox-disabled .odn-select-tree-checkbox-input {
cursor: not-allowed;
pointer-events: none;
}
.odn-select-tree-checkbox-disabled .odn-select-tree-checkbox-inner {
background: var(--odn-color-bg-container-disabled);
border-color: var(--odn-color-border);
}
.odn-select-tree-checkbox-disabled .odn-select-tree-checkbox-inner::after {
border-color: var(--odn-color-text-disabled);
}
.odn-select-tree-checkbox-disabled::after {
display: none;
}
.odn-select-tree-checkbox-disabled + span {
color: var(--odn-color-text-disabled);
}
.odn-select-tree-checkbox-disabled.odn-select-tree-checkbox-indeterminate .odn-select-tree-checkbox-inner::after {
background: var(--odn-color-text-disabled);
}
.odn-select-tree-indent {
align-self: stretch;
white-space: nowrap;
user-select: none;
}
.odn-select-tree-indent-unit {
display: inline-block;
width: var(--odn-ts-indent-width);
}
.odn-select-tree-switcher-noop {
opacity: 0;
pointer-events: none;
}