html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
--z-index-spross-modal: 1040;
--odn-z-index-popup: 1050;
--z-index-spross-message: 1060;
/* 基础 */
--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-color-primary: var(--odn-color-brand-6);
--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-font-size: 13px;
--odn-popup-line-height: 20px;
/* popover */
--odn-popover-padding-block: 16px;
--odn-popover-padding-inline: 16px;
--odn-popover-border-radius: 6px;
--odn-popover-border: none;
--odn-popover-box-shadow: 0 0 0 1px rgba(0, 0, 0, 6%);
--odn-popover-filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 5%))
drop-shadow(0 6px 15px rgba(0, 0, 0, 5%));
/* 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);
}
}
[data-spross-popup] {
z-index: var(--odn-z-index-popup);
}
[data-spross-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-popover-border);
border-radius: var(--odn-popover-border-radius);
box-shadow: var(--odn-popover-box-shadow);
filter: var(--odn-popover-filter);
}
[data-spross-popup-arrow] {
position: absolute;
}
[data-spross-popup-arrow] svg {
transition: 200ms ease-in-out all;
}
[data-spross-popup-arrow-outer-stroke] {
fill: rgba(0, 0, 0, 0.06);
}
[data-spross-popup-content] {
transition-property: opacity, transform;
}
[data-spross-popup-content][data-status=open],
[data-spross-popup-content][data-status=close] {
transition-duration: 0.12s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
[data-spross-popup-content][data-status=initial],
[data-spross-popup-content][data-status=close] {
opacity: 0;
}
[data-spross-popup-content][data-arrowed=true][data-status=initial],
[data-spross-popup-content][data-arrowed=true][data-status=close] {
transform: scale(0.8);
}
[data-spross-popup-content][data-arrowed=false][data-status=initial][data-placement^=top],
[data-spross-popup-content][data-arrowed=false][data-status=close][data-placement^=top] {
transform: translate3d(0, 4px, 0);
}
[data-spross-popup-content][data-arrowed=false][data-status=initial][data-placement^=bottom],
[data-spross-popup-content][data-arrowed=false][data-status=close][data-placement^=bottom] {
transform: translate3d(0, -4px, 0);
}
[data-spross-popup-content][data-arrowed=false][data-status=initial][data-placement^=left],
[data-spross-popup-content][data-arrowed=false][data-status=close][data-placement^=left] {
transform: translate3d(4px, 0, 0);
}
[data-spross-popup-content][data-arrowed=false][data-status=initial][data-placement^=right],
[data-spross-popup-content][data-arrowed=false][data-status=close][data-placement^=right] {
transform: translate3d(-4px, 0, 0);
}
[data-spross-popup][data-placement^=top][data-arrowed=true] {
padding-bottom: 12px;
}
[data-spross-popup][data-placement^=top][data-arrowed=false] {
padding-bottom: 4px;
}
[data-spross-popup][data-placement^=top] [data-spross-popup-arrow] {
bottom: -8px;
transform: rotate(180deg);
}
[data-spross-popup][data-placement^=bottom][data-arrowed=true] {
padding-top: 12px;
}
[data-spross-popup][data-placement^=bottom][data-arrowed=false] {
padding-top: 4px;
}
[data-spross-popup][data-placement^=bottom] [data-spross-popup-arrow] {
top: -8px;
}
[data-spross-popup][data-placement^=left][data-arrowed=true] {
padding-right: 12px;
}
[data-spross-popup][data-placement^=left][data-arrowed=false] {
padding-right: 4px;
}
[data-spross-popup][data-placement^=left] [data-spross-popup-arrow] {
right: -13px;
transform: rotate(90deg);
}
[data-spross-popup][data-placement^=right][data-arrowed=true] {
padding-left: 12px;
}
[data-spross-popup][data-placement^=right][data-arrowed=false] {
padding-left: 4px;
}
[data-spross-popup][data-placement^=right] [data-spross-popup-arrow] {
left: -13px;
transform: rotate(-90deg);
}
[data-spross-reference] {
display: inline-block;
}
/* type */
[data-spross-popup][data-type=popover] [data-spross-popup-content] {
padding: var(--odn-popover-padding-block) var(--odn-popover-padding-inline);
color: #1f1f1f;
background-color: #fff;
}
[data-spross-popup][data-type=popover] [data-spross-popup-arrow-fill] {
fill: #fff;
}
[data-spross-popup][data-type=tooltip] [data-spross-popup-content] {
padding: var(--odn-tooltip-padding-block) var(--odn-tooltip-padding-inline);
color: #fff;
background-color: #404040;
}
[data-spross-popup][data-type=tooltip] [data-spross-popup-arrow-fill] {
fill: #404040;
}
[data-spross-tooltip-group-content] {
position: relative;
}
/* ==========================================================================
Drawer
========================================================================== */
[data-spross-drawer-close-icon] {
width: 24px;
height: 24px;
fill: hsl(220, 3%, 59%);
cursor: pointer;
}
[data-spross-drawer-close-icon]:hover {
fill: hsl(220, 3%, 45%);
}
[data-spross-modal-overlay=drawer] {
z-index: var(--z-index-spross-modal);
background: rgba(0, 0, 0, 0.4);
overflow: hidden !important;
}
[data-spross-modal-overlay=dialog] {
z-index: var(--z-index-spross-modal);
background: rgba(0, 0, 0, 0.4);
display: grid;
/* place-items: center; */
}
[data-spross-drawer-content] {
position: absolute;
display: flex;
flex-direction: column;
background-color: #fff;
pointer-events: initial;
overflow: auto;
transition-property: transform;
}
[data-spross-drawer-content][data-spross-drawer-placement=left],
[data-spross-drawer-content][data-spross-drawer-placement=right] {
top: 0;
bottom: 0;
min-width: 200px;
}
[data-spross-drawer-content][data-spross-drawer-placement=left] {
left: 0;
}
[data-spross-drawer-content][data-spross-drawer-placement=right] {
right: 0;
}
[data-spross-drawer-content][data-spross-drawer-placement=top],
[data-spross-drawer-content][data-spross-drawer-placement=bottom] {
left: 0;
right: 0;
min-height: 280px;
}
[data-spross-drawer-content][data-spross-drawer-placement=top] {
top: 0;
}
[data-spross-drawer-content][data-spross-drawer-placement=bottom] {
bottom: 0;
}
[data-spross-modal-overlay][data-status=open],
[data-spross-modal-overlay][data-status=close] {
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
[data-spross-modal-overlay][data-status=initial],
[data-spross-modal-overlay][data-status=close] {
background: rgba(0, 0, 0, 0);
}
[data-spross-drawer-content][data-status=open],
[data-spross-drawer-content][data-status=close] {
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
[data-spross-drawer-content][data-spross-drawer-placement=right][data-status=initial],
[data-spross-drawer-content][data-spross-drawer-placement=right][data-status=close] {
transform: translate3d(100%, 0, 0);
}
[data-spross-drawer-content][data-spross-drawer-placement=left][data-status=initial],
[data-spross-drawer-content][data-spross-drawer-placement=left][data-status=close] {
transform: translate3d(-100%, 0, 0);
}
[data-spross-drawer-content][data-spross-drawer-placement=top][data-status=initial],
[data-spross-drawer-content][data-spross-drawer-placement=top][data-status=close] {
transform: translate3d(0, -100%, 0);
}
[data-spross-drawer-content][data-spross-drawer-placement=bottom][data-status=initial],
[data-spross-drawer-content][data-spross-drawer-placement=bottom][data-status=close] {
transform: translate3d(0, 100%, 0);
}
[data-spross-drawer-steps] {
position: relative;
overflow: hidden;
transition: height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-spross-drawer-step] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
[data-spross-drawer-steps][data-spross-drawer-step-transition-type=fade],
[data-spross-drawer-step][data-spross-drawer-step-transition-type=fade] {
transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-spross-drawer-steps][data-spross-drawer-step-transition-type=slide],
[data-spross-drawer-step][data-spross-drawer-step-transition-type=slide] {
transition: all 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-spross-drawer-step][data-spross-drawer-step-transition-type=fade][data-spross-drawer-step-prev=true],
[data-spross-drawer-step][data-spross-drawer-step-transition-type=fade][data-spross-drawer-step-next=true] {
opacity: 0;
}
[data-spross-drawer-step][data-spross-drawer-step-transition-type=fade][data-spross-drawer-step-active=true] {
opacity: 1;
}
[data-spross-drawer-step][data-spross-drawer-step-transition-type=slide][data-spross-drawer-step-prev=true] {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
[data-spross-drawer-step][data-spross-drawer-step-transition-type=slide][data-spross-drawer-step-next=true] {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
[data-spross-drawer-step][data-spross-drawer-step-transition-type=slide][data-spross-drawer-step-active=true] {
opacity: 1;
transform: translate3d(0, 0, 0);
}
[data-spross-dialog-content-wrapper] {
margin: auto;
width: fit-content;
min-width: 520px;
min-height: 380px;
padding: 50px;
pointer-events: none;
transition-property: opacity, transform;
}
[data-spross-dialog-content] {
display: flex;
flex-direction: column;
background-color: #fff;
overflow: auto;
pointer-events: initial;
border-radius: 10px;
}
[data-spross-dialog-content-wrapper][data-status=open],
[data-spross-dialog-content-wrapper][data-status=close] {
transition-duration: 0.18s, 0.3s;
transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
[data-spross-dialog-content-wrapper][data-status=initial],
[data-spross-dialog-content-wrapper][data-status=close] {
opacity: 0;
transform: scale(0.75);
}
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-normal: 1px solid var(--odn-color-black-6);
--odn-input-border-normal-hover: 1px solid var(--odn-color-black-7);
--odn-input-border-normal-focus: 1px solid var(--odn-color-blue-6);
--odn-input-border-danger: 1px solid var(--odn-color-red-6);
--odn-input-border-danger-hover: 1px solid var(--odn-color-red-6);
--odn-input-border-danger-focus: 1px solid var(--odn-color-red-6);
--odn-input-border-disabled: 1px solid 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.1s 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-size=small] {
padding: var(--odn-input-padding-block-small) var(--odn-input-padding-inline-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=medium] {
padding: var(--odn-input-padding-block-medium) var(--odn-input-padding-inline-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=large] {
padding: var(--odn-input-padding-block-large) var(--odn-input-padding-inline-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-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-normal);
box-shadow: var(--odn-input-shadow-normal);
}
[data-odn-input-intent=normal]:not([data-odn-input-disabled=true]):hover {
color: var(--odn-input-color-normal-hover);
background: var(--odn-input-bg-normal-hover);
border: 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])[data-odn-input-focused=true] {
color: var(--odn-input-color-normal-focus);
background: var(--odn-input-bg-normal-focus);
border: 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-danger);
box-shadow: var(--odn-input-shadow-danger);
}
[data-odn-input-intent=danger]:not([data-odn-input-disabled=true]):hover {
color: var(--odn-input-color-danger-hover);
background: var(--odn-input-bg-danger-hover);
border: 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])[data-odn-input-focused=true] {
color: var(--odn-input-color-danger-focus);
background: var(--odn-input-bg-danger-focus);
border: 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-disabled);
box-shadow: var(--odn-input-shadow-disabled);
cursor: not-allowed;
}
[data-odn-input-disabled=true] [data-odn-input] {
cursor: not-allowed;
}
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(208, 100%, 97%);
--odn-message-info-border-color: hsl(221, 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(49, 100%, 97%);
--odn-message-warning-border-color: hsl(49, 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(359, 100%, 97%);
--odn-message-danger-border-color: hsl(359, 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-spross-message-container] {
position: fixed;
top: var(--odn-message-top);
left: 0;
z-index: var(--z-index-spross-message);
width: 100vw;
opacity: 0;
transform: translate3d(0, -68px, 0);
transition: 0.25s cubic-bezier(0, 0, 0.2, 1) all;
}
[data-spross-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-spross-message]::after {
content: "";
position: absolute;
left: 0;
height: calc(var(--odn-message-gap) + 1px);
bottom: 100%;
width: 100%;
}
[data-spross-message-prefix-icon] {
width: 16px;
height: 16px;
}
[data-spross-message-content] {
flex: 1;
margin-left: 8px;
font-size: var(--odn-message-font-size);
}
[data-spross-message-close-icon] {
width: 18px;
height: 18px;
fill: hsl(220, 3%, 59%);
cursor: pointer;
}
[data-spross-message-close-icon]:hover {
fill: hsl(220, 3%, 45%);
}
[data-spross-message][data-spross-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-spross-message][data-spross-message-intent=success] [data-spross-message-prefix-icon] {
color: var(--odn-message-success-prefix-color);
}
[data-spross-message][data-spross-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-spross-message][data-spross-message-intent=info] [data-spross-message-prefix-icon] {
color: var(--odn-message-info-prefix-color);
}
[data-spross-message][data-spross-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-spross-message][data-spross-message-intent=warning] [data-spross-message-prefix-icon] {
color: var(--odn-message-warning-prefix-color);
}
[data-spross-message][data-spross-message-intent=danger],
[data-spross-message][data-spross-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-spross-message][data-spross-message-intent=danger] [data-spross-message-prefix-icon],
[data-spross-message][data-spross-message-intent=error] [data-spross-message-prefix-icon] {
color: var(--odn-message-danger-prefix-color);
}
@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-springen-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-springen-pagination-simple=true] {
gap: 8px;
}
[data-springen-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-springen-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-springen-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-springen-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-springen-pagination-item-active=true] {
color: var(--odn-pagination-item-color-active);
font-weight: var(--odn-pagination-item-font-weight-active);
}
[data-springen-pagination-item-disabled=true] {
cursor: not-allowed;
color: rgba(69, 80, 102, 0.25);
}
[data-springen-pagination-item-ellipsis-icon] {
transition: opacity 0.1s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-springen-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-springen-pagination-item-ellipsis]:hover [data-springen-pagination-item-ellipsis-icon] {
opacity: 0;
}
[data-springen-pagination-item-ellipsis]:hover [data-springen-pagination-item-ellipsis-icon-hover] {
opacity: 1;
}
[data-springen-pagination-simple-page-value] {
display: inline-block;
margin-left: -5px;
width: 15px;
text-align: right;
white-space: nowrap;
}
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;
--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);
}
[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]) {
color: var(--odn-radio-color);
cursor: pointer;
}
[data-odn-radio]:not([data-odn-radio-disabled]) [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]):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]) [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] {
transform: scale(1);
}
[data-odn-radio][data-odn-radio-checked=true]:not([data-odn-radio-disabled]):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]) [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] {
color: var(--odn-radio-color-checked-disabled);
}
[data-odn-radio][data-odn-radio-checked=true][data-odn-radio-disabled] [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] {
color: var(--odn-radio-color-disabled);
cursor: not-allowed;
}
[data-odn-radio][data-odn-radio-disabled] [data-odn-radio-input] {
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] {
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);
}
@charset "UTF-8";
html {
--odn-select-selector-padding-inline: 12px;
--odn-font-size: 14px;
--odn-control-height: 36px;
--odn-line-height: 1.57142857;
--odn-border-radius: 6px;
--odn-line-width: 1px;
--odn-motion-duration-slow: 0.25s;
--odn-control-padding-horizontal: 12px;
--odn-color-icon: var(--odn-color-black-9);
--odn-color-icon-hover: var(--odn-color-black-10);
--odn-padding-xxs: 4px;
--odn-padding-xs: 8px;
--odn-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-option-padding-block: 7px;
--odn-select-option-padding-inline: 12px;
--odn-select-option-height: 36px;
--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-css-var {
font-family: var(--odn-font-family);
font-size: var(--odn-font-size);
box-sizing: border-box;
}
.odn-select.odn-select-in-form-item {
width: 100%;
}
.odn-select {
box-sizing: border-box;
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-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 {
cursor: text;
}
.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;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 50%;
inset-inline-start: auto;
inset-inline-end: 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-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: var(--odn-select-select-affix-padding);
}
.odn-select .odn-select-clear {
position: absolute;
top: 50%;
inset-inline-start: auto;
inset-inline-end: 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-selector {
box-sizing: border-box;
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-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%;
-webkit-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.odn-select-open .odn-select-selection-item {
color: var(--odn-color-text-placeholder);
}
.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-start: 0;
inset-inline-end: 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 {
box-sizing: border-box;
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-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%;
-webkit-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.odn-select-open .odn-select-selection-item {
color: var(--odn-color-text-placeholder);
}
.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-start: 0;
inset-inline-end: 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 {
box-sizing: border-box;
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-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%;
-webkit-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.odn-select-open .odn-select-selection-item {
color: var(--odn-color-text-placeholder);
}
.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-start: 0;
inset-inline-end: 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;
box-sizing: border-box;
max-width: 100%;
margin-block: var(--odn-select-internal_fixed_item_margin);
border-radius: var(--odn-border-radius-sm);
cursor: default;
transition: font-size var(--odn-motion-duration-slow), line-height var(--odn-motion-duration-slow), height var(--odn-motion-duration-slow);
margin-inline-end: 8px;
padding-inline-start: var(--odn-padding-xs);
padding-inline-end: 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;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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-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-prefix {
margin-inline-start: calc(var(--odn-select-selector-padding-inline) - 1px - max(var(--odn-padding-xxs) - 1px, 0px));
}
.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 {
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-start: 0;
inset-inline-end: auto;
z-index: 999;
white-space: pre;
visibility: hidden;
}
.odn-select-multiple .odn-select-selection-placeholder {
position: absolute;
top: 50%;
inset-inline-start: 0;
inset-inline-end: calc(var(--odn-select-selector-padding-inline) - 1px);
transform: translateY(-50%);
transition: all var(--odn-motion-duration-slow);
}
.odn-select-multiple {
font-size: var(--odn-font-size);
}
.odn-select-show-search.odn-select-multiple .odn-select-selector {
cursor: text;
}
.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;
box-sizing: border-box;
max-width: 100%;
margin-block: var(--odn-select-internal_fixed_item_margin);
border-radius: var(--odn-border-radius-xs);
cursor: default;
transition: font-size var(--odn-motion-duration-slow), line-height var(--odn-motion-duration-slow), height var(--odn-motion-duration-slow);
margin-inline-end: 8px;
padding-inline-start: var(--odn-padding-xs);
padding-inline-end: 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;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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-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-start: 0;
inset-inline-end: 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-start: calc(var(--odn-select-selector-padding-inline) - 1px - max(var(--odn-padding-xxs) - 1px, 0px));
inset-inline-end: 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-show-search.odn-select-multiple.odn-select-sm .odn-select-selector {
cursor: text;
}
.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;
box-sizing: border-box;
max-width: 100%;
margin-block: var(--odn-select-internal_fixed_item_margin);
border-radius: var(--odn-border-radius);
cursor: default;
transition: font-size var(--odn-motion-duration-slow), line-height var(--odn-motion-duration-slow), height var(--odn-motion-duration-slow);
margin-inline-end: 8px;
padding-inline-start: var(--odn-padding-xs);
padding-inline-end: 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;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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-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-start: 0;
inset-inline-end: 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-start: calc(var(--odn-select-selector-padding-inline) - 1px - max(var(--odn-padding-xxs) - 1px, 0px));
inset-inline-end: 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-show-search.odn-select-multiple.odn-select-lg .odn-select-selector {
cursor: text;
}
.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 {
box-sizing: border-box;
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-popup);
overflow: hidden;
font-variant: initial;
background-color: var(--odn-color-bg-elevated);
border-radius: var(--odn-popover-border-radius);
outline: none;
box-shadow: var(--odn-popover-box-shadow);
filter: var(--odn-popover-filter);
}
.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);
box-sizing: border-box;
cursor: pointer;
transition: background var(--odn-motion-duration-slow) ease;
border-radius: var(--odn-select-option-border-radius);
}
.odn-select-dropdown .odn-select-item-group {
color: var(--odn-color-text-description);
font-size: var(--odn-font-size-sm);
cursor: default;
}
.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-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-option-grouped {
padding-inline-start: calc(var(--odn-control-padding-horizontal) * 2);
}
.odn-select-dropdown .odn-select-item-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);
box-sizing: border-box;
}
.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-select-dropdown-rtl {
direction: rtl;
}
.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-rtl {
direction: rtl;
}
.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):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.ant-pagination-size-changer):hover .odn-select-selector {
background: var(--odn-color-fill-secondary);
}
.odn-select-focused.odn-select-filled:not(.odn-select-disabled):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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 0;
border-style: none none solid none;
border-color: var(--odn-select-border-color);
background: var(--odn-select-selector-bg);
border-radius: 0;
}
.odn-select-underlined:not(.odn-select-disabled):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.ant-pagination-size-changer) .odn-select-selector {
border-color: var(--odn-select-border-color-active);
outline: 0;
}
.odn-select-underlined:not(.odn-select-disabled):not(.odn-select-customize-input):not(.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 0;
border-style: none none solid none;
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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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 0;
border-style: none none solid none;
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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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):not(.odn-select-customize-input):not(.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-top: calc(var(--odn-select-popup-padding-block) * -1);
margin-bottom: var(--odn-select-popup-padding-block);
}
.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 .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;
}
[data-springen-slider-wrapper] {
position: relative;
display: flex;
align-items: center;
white-space: nowrap;
user-select: none;
}
.springen-slider {
flex: 1;
list-style: none;
position: relative;
margin-left: 5px;
margin-right: 5px;
padding: 4px 0;
height: 12px;
cursor: pointer;
}
.springen-slider-hasMarks {
padding-bottom: 12px;
}
.springen-slider-rail {
position: absolute;
width: 100%;
height: 4px;
background-color: #e6e6e6;
border-radius: 2px;
transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.springen-slider-track {
position: absolute;
height: 4px;
background-color: var(--odn-color-primary);
border-radius: 4px;
transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-springen-slider-handle-wrapper] {
position: relative;
}
.springen-slider-handle {
position: absolute;
margin-top: -4px;
cursor: pointer;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
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);
}
.springen-slider-handle.springen-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);
}
.springen-slider-handle:hover {
transform: scale(1.2);
}
.springen-slider-handle:focus {
outline: none;
}
.springen-slider-handle.ant-tooltip-open {
border-color: #1890ff;
}
.springen-slider:hover .springen-slider-rail {
background-color: #d6d6d6;
}
.springen-slider:hover .springen-slider-handle:not(.ant-tooltip-open) {
border-color: #69c0ff;
}
.springen-slider-step {
position: absolute;
width: 100%;
height: 4px;
background: transparent;
}
.springen-slider-mark-text {
position: absolute;
top: 14px;
font-size: 13px;
line-height: 20px;
text-align: center;
color: #1f1f1f;
word-break: keep-all;
cursor: pointer;
}
.springen-slider-disabled {
cursor: not-allowed;
}
.springen-slider-disabled .springen-slider-mark-text,
.springen-slider-disabled .springen-slider-handle {
cursor: not-allowed;
}
[data-springen-slider-handle-tooltip] {
position: absolute;
left: 50%;
bottom: 22px;
padding: 10px 16px;
font-size: 13px;
color: #fff;
background-color: #393939;
border-radius: 6px;
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-springen-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: #393939;
border-style: solid;
}
[data-springen-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-springen-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-springen-slider-range-tooltip-wrapper][data-springen-slider-range-tooltip-wrapper-visible=true] {
opacity: 1;
visibility: visible;
}
[data-springen-slider-range-tooltip-wrapper-visible][data-springen-slider-range-tooltip-wrapper-combined=true] [data-springen-slider-range-tooltip] {
color: transparent;
}
[data-springen-slider-range-tooltip-wrapper-visible][data-springen-slider-range-tooltip-wrapper-combined=true] [data-springen-slider-range-tooltip-left] {
border-radius: 6px 0 0 6px;
}
[data-springen-slider-range-tooltip-wrapper-visible][data-springen-slider-range-tooltip-wrapper-combined=true] [data-springen-slider-range-tooltip-right] {
border-radius: 0 6px 6px 0;
}
[data-springen-slider-range-tooltip-wrapper-visible][data-springen-slider-range-tooltip-wrapper-combined=true] [data-springen-slider-range-tooltip-combined] {
opacity: 1;
visibility: visible;
}
[data-springen-slider-handle-tooltip-wrapper-visible][data-springen-slider-handle-tooltip-wrapper-overlapped=true] [data-springen-slider-handle-tooltip-left] {
opacity: 0;
visibility: hidden;
}
[data-springen-slider-range-tooltip] {
position: absolute;
bottom: 22px;
padding: 10px 16px;
font-size: 13px;
color: #fff;
background-color: #393939;
border-radius: 6px;
transform: translate3d(-50%, 0, 0);
}
[data-springen-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: #393939;
border-style: solid;
}
[data-springen-slider-range-tooltip-combined] {
position: absolute;
bottom: 22px;
display: flex;
padding: 10px 0;
align-items: center;
justify-content: center;
color: #fff;
opacity: 0;
visibility: hidden;
font-size: 13px;
}
/* ==========================================================================
Vertical
========================================================================== */
[data-springen-vertical] {
position: relative;
width: fit-content;
white-space: nowrap;
}
[data-springen-vertical-item] {
display: flex;
align-items: center;
padding-left: 15px;
height: 30px;
font-size: 18px;
color: rgba(51, 55, 61, 0.58);
cursor: pointer;
}
[data-springen-vertical-item] svg {
flex: none;
fill: rgba(62, 69, 82, 0.36);
}
[data-springen-vertical-item-layer=true] {
-webkit-text-stroke: 0.5px;
color: var(--odn-color-primary);
}
[data-springen-vertical-item-layer=true] svg {
fill: var(--odn-color-primary);
}
[data-springen-vertical-layer] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
will-change: clip-path;
}
[data-springen-vertical-indicator-wrapper] {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 8px;
}
[data-springen-vertical-indicator] {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: var(--odn-color-primary);
border-radius: inherit;
}
/* ==========================================================================
Divider
========================================================================== */
[data-springen-divider] {
position: relative;
white-space: nowrap;
display: flex;
align-items: center;
width: fit-content;
}
[data-springen-divider-divider] {
width: 1px;
height: 12px;
background-color: rgba(73, 90, 122, 0.12);
}
[data-springen-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-springen-divider-item] {
font-size: 14px;
cursor: pointer;
color: rgba(51, 55, 61, 0.58);
}
[data-springen-divider-item] svg {
flex: none;
fill: rgba(62, 69, 82, 0.36);
}
[data-springen-divider-item-layer] {
color: var(--odn-color-primary);
-webkit-text-stroke: 0.1px;
}
[data-springen-divider-item-disabled=true] {
cursor: not-allowed;
}
/* ==========================================================================
ButtonGroup
========================================================================== */
[data-springen-button-group] {
position: relative;
width: fit-content;
white-space: nowrap;
display: flex;
align-items: center;
border: 1px solid rgba(73, 90, 122, 0.12);
border-radius: 6px;
}
[data-springen-button-group-item] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 4px;
padding: 0 12px;
height: 36px;
font-size: 14px;
cursor: pointer;
color: rgba(51, 55, 61, 0.58);
}
[data-springen-button-group-item] svg {
flex: none;
fill: rgba(62, 69, 82, 0.36);
}
[data-springen-button-group-item-layer] svg {
fill: currentColor;
}
[data-springen-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-springen-button-group-item-layer] {
color: var(--odn-color-primary);
-webkit-text-stroke: 0.1px;
}
[data-springen-button-group-indicator] {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 100%;
background-color: rgba(41, 107, 239, 0.06);
background-color: color-mix(in srgb, var(--odn-color-primary) 6%, transparent);
outline: 2px solid rgba(41, 107, 239, 0.8);
outline: 2px solid color-mix(in srgb, var(--odn-color-primary) 80%, transparent);
border-radius: 6px;
}
/* ==========================================================================
Tabs
========================================================================== */
[data-springen-tabs] {
position: relative;
white-space: nowrap;
}
[data-springen-tabs-base] {
display: flex;
align-items: center;
width: fit-content;
}
[data-springen-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-springen-tabs-item] {
padding-bottom: 10px;
font-size: 18px;
line-height: 24px;
font-weight: 600;
cursor: pointer;
}
[data-springen-tabs-item-layer] {
color: var(--odn-color-primary);
}
[data-springen-tabs-indicator] {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: var(--odn-color-primary);
border-radius: 8px;
pointer-events: none;
}
/* ==========================================================================
Tag
========================================================================== */
[data-springen-tag] {
position: relative;
display: flex;
align-items: center;
width: fit-content;
white-space: nowrap;
}
[data-springen-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-springen-tag-item] {
display: flex;
align-items: center;
gap: 2px;
padding: 0 12px;
height: 30px;
font-size: 14px;
color: rgba(51, 55, 61, 0.58);
background-color: rgba(73, 90, 122, 0.03);
cursor: pointer;
border-radius: 6px;
}
[data-springen-tag-item] svg {
flex: none;
fill: rgba(62, 69, 82, 0.36);
}
[data-springen-tag-item-layer] {
color: var(--odn-color-primary);
background-color: #eef3fe;
}
[data-springen-tag-item-layer] svg {
fill: currentColor;
}