tdesign-vue-next
Version:
TDesign Component for vue-next
17,734 lines • 497 kB
CSS
:root {
--td-screen-xs: 320px;
--td-screen-sm: 768px;
--td-screen-md: 992px;
--td-screen-lg: 1200px;
--td-screen-xl: 1400px;
--td-screen-xxl: 1880px;
}
@-moz-document url-prefix() {
.narrow-scrollbar {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.narrow-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.narrow-scrollbar::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 15px;
}
.narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover,
.narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-fake-arrow path {
transition: d 0.2s;
stroke: currentcolor;
}
.t-fake-arrow--active path {
d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425");
}
.t-slide-down-enter-active,
.t-slide-down-leave-active {
transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
:root,
:root[theme-mode="light"] {
--td-brand-color-1: #f2f3ff;
--td-brand-color-2: #d9e1ff;
--td-brand-color-3: #b5c7ff;
--td-brand-color-4: #8eabff;
--td-brand-color-5: #618dff;
--td-brand-color-6: #366ef4;
--td-brand-color-7: #0052d9;
--td-brand-color-8: #003cab;
--td-brand-color-9: #002a7c;
--td-brand-color-10: #001a57;
--td-warning-color-1: #fff1e9;
--td-warning-color-2: #ffd9c2;
--td-warning-color-3: #ffb98c;
--td-warning-color-4: #fa9550;
--td-warning-color-5: #e37318;
--td-warning-color-6: #be5a00;
--td-warning-color-7: #954500;
--td-warning-color-8: #713300;
--td-warning-color-9: #532300;
--td-warning-color-10: #3b1700;
--td-error-color-1: #fff0ed;
--td-error-color-2: #ffd8d2;
--td-error-color-3: #ffb9b0;
--td-error-color-4: #ff9285;
--td-error-color-5: #f6685d;
--td-error-color-6: #d54941;
--td-error-color-7: #ad352f;
--td-error-color-8: #881f1c;
--td-error-color-9: #68070a;
--td-error-color-10: #490002;
--td-success-color-1: #e3f9e9;
--td-success-color-2: #c6f3d7;
--td-success-color-3: #92dab2;
--td-success-color-4: #56c08d;
--td-success-color-5: #2ba471;
--td-success-color-6: #008858;
--td-success-color-7: #006c45;
--td-success-color-8: #005334;
--td-success-color-9: #003b23;
--td-success-color-10: #002515;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eee;
--td-gray-color-3: #e8e8e8;
--td-gray-color-4: #ddd;
--td-gray-color-5: #c6c6c6;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #393939;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
--td-font-white-1: #ffffff;
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
--td-brand-color: var(--td-brand-color-7);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
--td-brand-color-hover: var(--td-brand-color-6);
--td-brand-color-focus: var(--td-brand-color-2);
--td-brand-color-active: var(--td-brand-color-8);
--td-brand-color-disabled: var(--td-brand-color-3);
--td-brand-color-light: var(--td-brand-color-1);
--td-brand-color-light-hover: var(--td-brand-color-2);
--td-warning-color-hover: var(--td-warning-color-4);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-hover: var(--td-warning-color-2);
--td-error-color-hover: var(--td-error-color-5);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-hover: var(--td-error-color-2);
--td-success-color-hover: var(--td-success-color-4);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-hover: var(--td-success-color-2);
--td-mask-active: rgba(0, 0, 0, 0.6);
--td-mask-disabled: rgba(255, 255, 255, 0.6);
--td-mask-background: rgba(255, 255, 255, 0.96);
--td-bg-color-page: var(--td-gray-color-2);
--td-bg-color-container: #fff;
--td-bg-color-container-hover: var(--td-gray-color-1);
--td-bg-color-container-active: var(--td-gray-color-3);
--td-bg-color-container-select: #fff;
--td-bg-color-secondarycontainer: var(--td-gray-color-1);
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
--td-bg-color-component: var(--td-gray-color-3);
--td-bg-color-component-hover: var(--td-gray-color-4);
--td-bg-color-component-active: var(--td-gray-color-6);
--td-bg-color-secondarycomponent: var(--td-gray-color-4);
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);
--td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
--td-bg-color-component-disabled: var(--td-gray-color-2);
--td-bg-color-specialcomponent: #fff;
--td-text-color-primary: var(--td-font-gray-1);
--td-text-color-secondary: var(--td-font-gray-2);
--td-text-color-placeholder: var(--td-font-gray-3);
--td-text-color-disabled: var(--td-font-gray-4);
--td-text-color-anti: #fff;
--td-text-color-brand: var(--td-brand-color-7);
--td-text-color-link: var(--td-brand-color-8);
--td-border-level-1-color: var(--td-gray-color-3);
--td-component-stroke: var(--td-gray-color-3);
--td-border-level-2-color: var(--td-gray-color-4);
--td-component-border: var(--td-gray-color-4);
--td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
--td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1);
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
--td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
--td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
--td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
--td-table-shadow-color: rgba(0, 0, 0, 0.08);
--td-scrollbar-color: rgba(0, 0, 0, 0.1);
--td-scrollbar-hover-color: rgba(0, 0, 0, 0.3);
--td-scroll-track-color: #fff;
}
:root[theme-mode="dark"] {
--td-brand-color-1: #1b2f51;
--td-brand-color-2: #173463;
--td-brand-color-3: #143975;
--td-brand-color-4: #103d88;
--td-brand-color-5: #0d429a;
--td-brand-color-6: #054bbe;
--td-brand-color-7: #2667d4;
--td-brand-color-8: #4582e6;
--td-brand-color-9: #699ef5;
--td-brand-color-10: #96bbf8;
--td-warning-color-1: #4f2a1d;
--td-warning-color-2: #582f21;
--td-warning-color-3: #733c23;
--td-warning-color-4: #a75d2b;
--td-warning-color-5: #cf6e2d;
--td-warning-color-6: #dc7633;
--td-warning-color-7: #e8935c;
--td-warning-color-8: #ecbf91;
--td-warning-color-9: #eed7bf;
--td-warning-color-10: #f3e9dc;
--td-error-color-1: #472324;
--td-error-color-2: #5e2a2d;
--td-error-color-3: #703439;
--td-error-color-4: #83383e;
--td-error-color-5: #a03f46;
--td-error-color-6: #c64751;
--td-error-color-7: #de6670;
--td-error-color-8: #ec888e;
--td-error-color-9: #edb1b6;
--td-error-color-10: #eeced0;
--td-success-color-1: #193a2a;
--td-success-color-2: #1a4230;
--td-success-color-3: #17533d;
--td-success-color-4: #0d7a55;
--td-success-color-5: #059465;
--td-success-color-6: #43af8a;
--td-success-color-7: #46bf96;
--td-success-color-8: #80d2b6;
--td-success-color-9: #b4e1d3;
--td-success-color-10: #deede8;
--td-gray-color-1: #f3f3f3;
--td-gray-color-2: #eee;
--td-gray-color-3: #e8e8e8;
--td-gray-color-4: #ddd;
--td-gray-color-5: #c6c6c6;
--td-gray-color-6: #a6a6a6;
--td-gray-color-7: #8b8b8b;
--td-gray-color-8: #777;
--td-gray-color-9: #5e5e5e;
--td-gray-color-10: #4b4b4b;
--td-gray-color-11: #393939;
--td-gray-color-12: #2c2c2c;
--td-gray-color-13: #242424;
--td-gray-color-14: #181818;
--td-font-white-1: rgba(255, 255, 255, 0.9);
--td-font-white-2: rgba(255, 255, 255, 0.55);
--td-font-white-3: rgba(255, 255, 255, 0.35);
--td-font-white-4: rgba(255, 255, 255, 0.22);
--td-font-gray-1: rgba(0, 0, 0, 0.9);
--td-font-gray-2: rgba(0, 0, 0, 0.6);
--td-font-gray-3: rgba(0, 0, 0, 0.4);
--td-font-gray-4: rgba(0, 0, 0, 0.26);
--td-brand-color: var(--td-brand-color-8);
--td-warning-color: var(--td-warning-color-5);
--td-error-color: var(--td-error-color-6);
--td-success-color: var(--td-success-color-5);
--td-brand-color-hover: var(--td-brand-color-7);
--td-brand-color-focus: var(--td-brand-color-2);
--td-brand-color-active: var(--td-brand-color-9);
--td-brand-color-disabled: var(--td-brand-color-3);
--td-brand-color-light: var(--td-brand-color-1);
--td-brand-color-light-hover: var(--td-brand-color-2);
--td-warning-color-hover: var(--td-warning-color-4);
--td-warning-color-focus: var(--td-warning-color-2);
--td-warning-color-active: var(--td-warning-color-6);
--td-warning-color-disabled: var(--td-warning-color-3);
--td-warning-color-light: var(--td-warning-color-1);
--td-warning-color-light-hover: var(--td-warning-color-2);
--td-error-color-hover: var(--td-error-color-5);
--td-error-color-focus: var(--td-error-color-2);
--td-error-color-active: var(--td-error-color-7);
--td-error-color-disabled: var(--td-error-color-3);
--td-error-color-light: var(--td-error-color-1);
--td-error-color-light-hover: var(--td-error-color-2);
--td-success-color-hover: var(--td-success-color-4);
--td-success-color-focus: var(--td-success-color-2);
--td-success-color-active: var(--td-success-color-6);
--td-success-color-disabled: var(--td-success-color-3);
--td-success-color-light: var(--td-success-color-1);
--td-success-color-light-hover: var(--td-success-color-2);
--td-mask-active: rgba(0, 0, 0, 0.4);
--td-mask-disabled: rgba(0, 0, 0, 0.6);
--td-mask-background: rgba(36, 36, 36, 0.96);
--td-bg-color-page: var(--td-gray-color-14);
--td-bg-color-container: var(--td-gray-color-13);
--td-bg-color-container-hover: var(--td-gray-color-12);
--td-bg-color-container-active: var(--td-gray-color-10);
--td-bg-color-container-select: var(--td-gray-color-9);
--td-bg-color-secondarycontainer: var(--td-gray-color-12);
--td-bg-color-secondarycontainer-hover: var(--td-gray-color-11);
--td-bg-color-secondarycontainer-active: var(--td-gray-color-9);
--td-bg-color-component: var(--td-gray-color-11);
--td-bg-color-component-hover: var(--td-gray-color-10);
--td-bg-color-component-active: var(--td-gray-color-9);
--td-bg-color-secondarycomponent: var(--td-gray-color-10);
--td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
--td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
--td-bg-color-component-disabled: var(--td-gray-color-12);
--td-bg-color-specialcomponent: transparent;
--td-text-color-primary: var(--td-font-white-1);
--td-text-color-secondary: var(--td-font-white-2);
--td-text-color-placeholder: var(--td-font-white-3);
--td-text-color-disabled: var(--td-font-white-4);
--td-text-color-anti: #fff;
--td-text-color-brand: var(--td-brand-color-8);
--td-text-color-link: var(--td-brand-color-8);
--td-border-level-1-color: var(--td-gray-color-11);
--td-component-stroke: var(--td-gray-color-11);
--td-border-level-2-color: var(--td-gray-color-9);
--td-component-border: var(--td-gray-color-9);
--td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16);
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2);
--td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
--td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
--td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
--td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
--td-table-shadow-color: rgba(0, 0, 0, 0.55);
--td-scrollbar-color: rgba(255, 255, 255, 0.1);
--td-scrollbar-hover-color: rgba(255, 255, 255, 0.3);
--td-scroll-track-color: #333;
}
:root {
--td-radius-small: 2px;
--td-radius-default: 3px;
--td-radius-medium: 6px;
--td-radius-large: 9px;
--td-radius-extraLarge: 12px;
--td-radius-round: 999px;
--td-radius-circle: 50%;
}
:root {
--td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
--td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
--td-font-size-link-small: 12px;
--td-font-size-link-medium: 14px;
--td-font-size-link-large: 16px;
--td-font-size-mark-small: 12px;
--td-font-size-mark-medium: 14px;
--td-font-size-body-small: 12px;
--td-font-size-body-medium: 14px;
--td-font-size-body-large: 16px;
--td-font-size-title-small: 14px;
--td-font-size-title-medium: 16px;
--td-font-size-title-large: 18px;
--td-font-size-title-extraLarge: 20px;
--td-font-size-headline-small: 24px;
--td-font-size-headline-medium: 28px;
--td-font-size-headline-large: 36px;
--td-font-size-display-medium: 48px;
--td-font-size-display-large: 64px;
--td-line-height-link-small: 20px;
--td-line-height-link-medium: 22px;
--td-line-height-link-large: 24px;
--td-line-height-mark-small: 20px;
--td-line-height-mark-medium: 22px;
--td-line-height-body-small: 20px;
--td-line-height-body-medium: 22px;
--td-line-height-body-large: 24px;
--td-line-height-title-small: 22px;
--td-line-height-title-medium: 24px;
--td-line-height-title-large: 26px;
--td-line-height-title-extraLarge: 28px;
--td-line-height-headline-small: 32px;
--td-line-height-headline-medium: 36px;
--td-line-height-headline-large: 44px;
--td-line-height-display-medium: 56px;
--td-line-height-display-large: 72px;
--td-font-link-small: var(--td-font-size-link-small) /
var(--td-line-height-link-small) var(--td-font-family);
--td-font-link-medium: var(--td-font-size-link-medium) /
var(--td-line-height-link-medium) var(--td-font-family);
--td-font-link-large: var(--td-font-size-link-large) /
var(--td-line-height-link-large) var(--td-font-family);
--td-font-mark-small: 600 var(--td-font-size-mark-small) /
var(--td-line-height-mark-small) var(--td-font-family);
--td-font-mark-medium: 600 var(--td-font-size-mark-medium) /
var(--td-line-height-mark-medium) var(--td-font-family);
--td-font-body-small: var(--td-font-size-body-small) /
var(--td-line-height-body-small) var(--td-font-family);
--td-font-body-medium: var(--td-font-size-body-medium) /
var(--td-line-height-body-medium) var(--td-font-family);
--td-font-body-large: var(--td-font-size-body-large) /
var(--td-line-height-body-large) var(--td-font-family);
--td-font-title-small: 600 var(--td-font-size-title-small) /
var(--td-line-height-title-small) var(--td-font-family);
--td-font-title-medium: 600 var(--td-font-size-title-medium) /
var(--td-line-height-title-medium) var(--td-font-family);
--td-font-title-large: 600 var(--td-font-size-title-large) /
var(--td-line-height-title-large) var(--td-font-family);
--td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) /
var(--td-line-height-title-extraLarge) var(--td-font-family);
--td-font-headline-small: 600 var(--td-font-size-headline-small) /
var(--td-line-height-headline-small) var(--td-font-family);
--td-font-headline-medium: 600 var(--td-font-size-headline-medium) /
var(--td-line-height-headline-medium) var(--td-font-family);
--td-font-headline-large: 600 var(--td-font-size-headline-large) /
var(--td-line-height-headline-large) var(--td-font-family);
--td-font-display-medium: 600 var(--td-font-size-display-medium) /
var(--td-line-height-display-medium) var(--td-font-family);
--td-font-display-large: 600 var(--td-font-size-display-large) /
var(--td-line-height-display-large) var(--td-font-family);
}
:root {
--td-size-1: 2px;
--td-size-2: 4px;
--td-size-3: 6px;
--td-size-4: 8px;
--td-size-5: 12px;
--td-size-6: 16px;
--td-size-7: 20px;
--td-size-8: 24px;
--td-size-9: 28px;
--td-size-10: 32px;
--td-size-11: 36px;
--td-size-12: 40px;
--td-size-13: 48px;
--td-size-14: 56px;
--td-size-15: 64px;
--td-size-16: 72px;
--td-comp-size-xxxs: var(--td-size-6);
--td-comp-size-xxs: var(--td-size-7);
--td-comp-size-xs: var(--td-size-8);
--td-comp-size-s: var(--td-size-9);
--td-comp-size-m: var(--td-size-10);
--td-comp-size-l: var(--td-size-11);
--td-comp-size-xl: var(--td-size-12);
--td-comp-size-xxl: var(--td-size-13);
--td-comp-size-xxxl: var(--td-size-14);
--td-comp-size-xxxxl: var(--td-size-15);
--td-comp-size-xxxxxl: var(--td-size-16);
--td-pop-padding-s: var(--td-size-2);
--td-pop-padding-m: var(--td-size-3);
--td-pop-padding-l: var(--td-size-4);
--td-pop-padding-xl: var(--td-size-5);
--td-pop-padding-xxl: var(--td-size-6);
--td-comp-paddingLR-xxs: var(--td-size-1);
--td-comp-paddingLR-xs: var(--td-size-2);
--td-comp-paddingLR-s: var(--td-size-4);
--td-comp-paddingLR-m: var(--td-size-5);
--td-comp-paddingLR-l: var(--td-size-6);
--td-comp-paddingLR-xl: var(--td-size-8);
--td-comp-paddingLR-xxl: var(--td-size-10);
--td-comp-paddingTB-xxs: var(--td-size-1);
--td-comp-paddingTB-xs: var(--td-size-2);
--td-comp-paddingTB-s: var(--td-size-4);
--td-comp-paddingTB-m: var(--td-size-5);
--td-comp-paddingTB-l: var(--td-size-6);
--td-comp-paddingTB-xl: var(--td-size-8);
--td-comp-paddingTB-xxl: var(--td-size-10);
--td-comp-margin-xxs: var(--td-size-1);
--td-comp-margin-xs: var(--td-size-2);
--td-comp-margin-s: var(--td-size-4);
--td-comp-margin-m: var(--td-size-5);
--td-comp-margin-l: var(--td-size-6);
--td-comp-margin-xl: var(--td-size-7);
--td-comp-margin-xxl: var(--td-size-8);
--td-comp-margin-xxxl: var(--td-size-10);
--td-comp-margin-xxxxl: var(--td-size-12);
}
@keyframes t-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes t-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes t-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.t-icon-loading {
animation: t-spin 1s linear infinite;
}
@keyframes t-zoom-out {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.t-loading {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
color: var(--td-brand-color);
font-size: var(--td-comp-size-l);
}
.t-loading--lock {
overflow: hidden;
}
.t-loading.t-size-s {
font-size: var(--td-comp-size-xxxs);
}
.t-loading.t-size-l {
font-size: var(--td-comp-size-xxxl);
}
.t-loading__parent--relative {
position: relative !important;
}
.t-loading__fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3500;
}
.t-loading--center {
display: inline-flex;
align-items: center;
vertical-align: middle;
justify-content: center;
}
.t-loading__content {
position: absolute;
left: 48%;
top: 20%;
}
.t-loading--inherit-color {
color: inherit;
}
.t-loading__parent {
position: relative;
}
.t-loading__overlay {
background-color: var(--td-mask-disabled);
}
/** 仅用于作为包裹元素时 */
.t-loading--full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3500;
}
.t-loading--hidden {
visibility: hidden;
}
.t-loading--visible {
visibility: visible;
}
.t-loading__text {
width: auto;
display: inline-block;
vertical-align: middle;
font: var(--td-font-body-medium);
margin-left: var(--td-comp-margin-xs);
}
.t-loading__gradient {
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
}
.t-loading__gradient-conic {
width: 100%;
height: 100%;
border-radius: var(--td-radius-circle);
/* stylelint-disable-next-line color-no-hex */
background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
/* stylelint-disable-next-line */
-webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
/* stylelint-disable-next-line color-no-hex */
mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
}
.t-button {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 0;
overflow: hidden;
font-size: var(--td-font-body-medium);
outline: none;
border-width: 1px;
border-style: solid;
border-color: transparent;
background-color: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
white-space: nowrap;
border-radius: var(--td-radius-default);
transition: all 0.2s linear;
touch-action: manipulation;
text-decoration: none;
}
.t-button .t-button__text,
.t-button .t-icon {
position: relative;
z-index: 1;
display: inline-flex;
}
.t-button .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-button .t-loading {
font-size: var(--td-font-size-body-large);
}
.t-button .t-icon + .t-button__text:not(:empty) {
margin-left: 8px;
}
.t-button .t-loading + .t-button__text:not(:empty) {
margin-left: 8px;
}
.t-button .t-button__suffix:not(:empty) {
display: inline-flex;
margin-left: 8px;
}
.t-button--variant-base {
color: var(--td-text-color-anti);
height: var(--td-comp-size-m);
font: var(--td-font-body-medium);
padding-left: calc(var(--td-comp-paddingLR-l) - 1px);
padding-right: calc(var(--td-comp-paddingLR-l) - 1px);
background-color: var(--td-bg-color-component);
border-color: var(--td-bg-color-component);
color: var(--td-text-color-primary);
}
.t-button--variant-base .t-icon,
.t-button--variant-base .t-loading {
font-size: var(--td-font-size-body-large);
}
.t-button--variant-base:hover,
.t-button--variant-base:focus-visible {
background-color: var(--td-bg-color-component-hover);
}
.t-button--variant-base.t-is-loading {
background-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-base.t-is-disabled {
background-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-base:hover,
.t-button--variant-base:focus-visible {
border-color: var(--td-bg-color-component-hover);
}
.t-button--variant-base.t-is-loading {
border-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-base.t-is-disabled {
border-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-base:hover,
.t-button--variant-base:focus-visible {
color: var(--td-text-color-primary);
}
.t-button--variant-base.t-is-loading {
color: var(--td-text-color-disabled);
}
.t-button--variant-base.t-is-disabled {
color: var(--td-text-color-disabled);
}
.t-button--variant-base.t-button--theme-primary {
color: var(--td-text-color-anti);
background-color: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-button--variant-base.t-button--theme-primary:hover,
.t-button--variant-base.t-button--theme-primary:focus-visible {
background-color: var(--td-brand-color-hover);
}
.t-button--variant-base.t-button--theme-primary.t-is-loading {
background-color: var(--td-brand-color-disabled);
}
.t-button--variant-base.t-button--theme-primary.t-is-disabled {
background-color: var(--td-brand-color-disabled);
}
.t-button--variant-base.t-button--theme-primary:hover,
.t-button--variant-base.t-button--theme-primary:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-base.t-button--theme-primary.t-is-loading {
border-color: var(--td-brand-color-disabled);
}
.t-button--variant-base.t-button--theme-primary.t-is-disabled {
border-color: var(--td-brand-color-disabled);
}
.t-button--variant-base.t-button--theme-success {
color: var(--td-text-color-anti);
background-color: var(--td-success-color);
border-color: var(--td-success-color);
}
.t-button--variant-base.t-button--theme-success:hover,
.t-button--variant-base.t-button--theme-success:focus-visible {
background-color: var(--td-success-color-hover);
}
.t-button--variant-base.t-button--theme-success.t-is-loading {
background-color: var(--td-success-color-disabled);
}
.t-button--variant-base.t-button--theme-success.t-is-disabled {
background-color: var(--td-success-color-disabled);
}
.t-button--variant-base.t-button--theme-success:hover,
.t-button--variant-base.t-button--theme-success:focus-visible {
border-color: var(--td-success-color-hover);
}
.t-button--variant-base.t-button--theme-success.t-is-loading {
border-color: var(--td-success-color-disabled);
}
.t-button--variant-base.t-button--theme-success.t-is-disabled {
border-color: var(--td-success-color-disabled);
}
.t-button--variant-base.t-button--theme-warning {
color: var(--td-text-color-anti);
background-color: var(--td-warning-color);
border-color: var(--td-warning-color);
}
.t-button--variant-base.t-button--theme-warning:hover,
.t-button--variant-base.t-button--theme-warning:focus-visible {
background-color: var(--td-warning-color-hover);
}
.t-button--variant-base.t-button--theme-warning.t-is-loading {
background-color: var(--td-warning-color-disabled);
}
.t-button--variant-base.t-button--theme-warning.t-is-disabled {
background-color: var(--td-warning-color-disabled);
}
.t-button--variant-base.t-button--theme-warning:hover,
.t-button--variant-base.t-button--theme-warning:focus-visible {
border-color: var(--td-warning-color-hover);
}
.t-button--variant-base.t-button--theme-warning.t-is-loading {
border-color: var(--td-warning-color-disabled);
}
.t-button--variant-base.t-button--theme-warning.t-is-disabled {
border-color: var(--td-warning-color-disabled);
}
.t-button--variant-base.t-button--theme-danger {
color: var(--td-text-color-anti);
background-color: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-button--variant-base.t-button--theme-danger:hover,
.t-button--variant-base.t-button--theme-danger:focus-visible {
background-color: var(--td-error-color-hover);
}
.t-button--variant-base.t-button--theme-danger.t-is-loading {
background-color: var(--td-error-color-disabled);
}
.t-button--variant-base.t-button--theme-danger.t-is-disabled {
background-color: var(--td-error-color-disabled);
}
.t-button--variant-base.t-button--theme-danger:hover,
.t-button--variant-base.t-button--theme-danger:focus-visible {
border-color: var(--td-error-color-hover);
}
.t-button--variant-base.t-button--theme-danger.t-is-loading {
border-color: var(--td-error-color-disabled);
}
.t-button--variant-base.t-button--theme-danger.t-is-disabled {
border-color: var(--td-error-color-disabled);
}
.t-button--variant-base.t-button--ghost {
background-color: transparent;
color: var(--td-text-color-anti);
border-color: var(--td-text-color-anti);
}
.t-button--variant-base.t-button--ghost:hover,
.t-button--variant-base.t-button--ghost:focus-visible {
background-color: transparent;
}
.t-button--variant-base.t-button--ghost:active {
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-is-loading {
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-is-disabled {
background-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost:hover,
.t-button--variant-base.t-button--ghost:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-base.t-button--ghost:active {
color: var(--td-brand-color-active);
}
.t-button--variant-base.t-button--ghost.t-is-loading {
color: var(--td-text-color-anti);
}
.t-button--variant-base.t-button--ghost.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost:hover,
.t-button--variant-base.t-button--ghost:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-base.t-button--ghost:active {
border-color: var(--td-brand-color-active);
}
.t-button--variant-base.t-button--ghost.t-is-loading {
border-color: var(--td-text-color-anti);
}
.t-button--variant-base.t-button--ghost.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary {
color: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary:active {
color: var(--td-brand-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading {
color: var(--td-brand-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary:active {
border-color: var(--td-brand-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading {
border-color: var(--td-brand-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-success {
color: var(--td-success-color);
border-color: var(--td-success-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-success:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible {
color: var(--td-success-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-success:active {
color: var(--td-success-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading {
color: var(--td-success-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-success:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible {
border-color: var(--td-success-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-success:active {
border-color: var(--td-success-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading {
border-color: var(--td-success-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning {
color: var(--td-warning-color);
border-color: var(--td-warning-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible {
color: var(--td-warning-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning:active {
color: var(--td-warning-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading {
color: var(--td-warning-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible {
border-color: var(--td-warning-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning:active {
border-color: var(--td-warning-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading {
border-color: var(--td-warning-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger {
color: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible {
color: var(--td-error-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger:active {
color: var(--td-error-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading {
color: var(--td-error-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger:hover,
.t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible {
border-color: var(--td-error-color-hover);
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger:active {
border-color: var(--td-error-color-active);
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading {
border-color: var(--td-error-color);
}
.t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-base.t-is-loading:not(.t-button--variant-base.t-button--ghost).t-button--theme-default {
color: var(--td-text-color-primary);
}
.t-button--variant-outline {
height: var(--td-comp-size-m);
font: var(--td-font-body-medium);
padding-left: calc(var(--td-comp-paddingLR-l) - 1px);
padding-right: calc(var(--td-comp-paddingLR-l) - 1px);
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-specialcomponent);
border-color: var(--td-border-level-2-color);
}
.t-button--variant-outline .t-icon,
.t-button--variant-outline .t-loading {
font-size: var(--td-font-size-body-large);
}
.t-button--variant-outline:hover,
.t-button--variant-outline:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-is-loading {
color: var(--td-text-color-disabled);
}
.t-button--variant-outline.t-is-disabled {
color: var(--td-text-color-disabled);
}
.t-button--variant-outline:hover,
.t-button--variant-outline:focus-visible {
background-color: var(--td-bg-color-specialcomponent);
}
.t-button--variant-outline.t-is-loading {
background-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-outline.t-is-disabled {
background-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-outline:hover,
.t-button--variant-outline:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-is-loading {
border-color: var(--td-border-level-2-color);
}
.t-button--variant-outline.t-is-disabled {
border-color: var(--td-border-level-2-color);
}
.t-button--variant-outline.t-button--theme-primary {
color: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-button--variant-outline.t-button--theme-primary:hover,
.t-button--variant-outline.t-button--theme-primary:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-button--theme-primary.t-is-loading {
color: var(--td-brand-color-disabled);
}
.t-button--variant-outline.t-button--theme-primary.t-is-disabled {
color: var(--td-brand-color-disabled);
}
.t-button--variant-outline.t-button--theme-primary:hover,
.t-button--variant-outline.t-button--theme-primary:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-button--theme-primary.t-is-loading {
border-color: var(--td-brand-color-disabled);
}
.t-button--variant-outline.t-button--theme-primary.t-is-disabled {
border-color: var(--td-brand-color-disabled);
}
.t-button--variant-outline.t-button--theme-success {
color: var(--td-success-color);
border-color: var(--td-success-color);
}
.t-button--variant-outline.t-button--theme-success:hover,
.t-button--variant-outline.t-button--theme-success:focus-visible {
color: var(--td-success-color-hover);
}
.t-button--variant-outline.t-button--theme-success.t-is-loading {
color: var(--td-success-color-disabled);
}
.t-button--variant-outline.t-button--theme-success.t-is-disabled {
color: var(--td-success-color-disabled);
}
.t-button--variant-outline.t-button--theme-success:hover,
.t-button--variant-outline.t-button--theme-success:focus-visible {
border-color: var(--td-success-color-hover);
}
.t-button--variant-outline.t-button--theme-success.t-is-loading {
border-color: var(--td-success-color-disabled);
}
.t-button--variant-outline.t-button--theme-success.t-is-disabled {
border-color: var(--td-success-color-disabled);
}
.t-button--variant-outline.t-button--theme-warning {
color: var(--td-warning-color);
border-color: var(--td-warning-color);
}
.t-button--variant-outline.t-button--theme-warning:hover,
.t-button--variant-outline.t-button--theme-warning:focus-visible {
color: var(--td-warning-color-hover);
}
.t-button--variant-outline.t-button--theme-warning.t-is-loading {
color: var(--td-warning-color-disabled);
}
.t-button--variant-outline.t-button--theme-warning.t-is-disabled {
color: var(--td-warning-color-disabled);
}
.t-button--variant-outline.t-button--theme-warning:hover,
.t-button--variant-outline.t-button--theme-warning:focus-visible {
border-color: var(--td-warning-color-hover);
}
.t-button--variant-outline.t-button--theme-warning.t-is-loading {
border-color: var(--td-warning-color-disabled);
}
.t-button--variant-outline.t-button--theme-warning.t-is-disabled {
border-color: var(--td-warning-color-disabled);
}
.t-button--variant-outline.t-button--theme-danger {
color: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-button--variant-outline.t-button--theme-danger:hover,
.t-button--variant-outline.t-button--theme-danger:focus-visible {
color: var(--td-error-color-hover);
}
.t-button--variant-outline.t-button--theme-danger.t-is-loading {
color: var(--td-error-color-disabled);
}
.t-button--variant-outline.t-button--theme-danger.t-is-disabled {
color: var(--td-error-color-disabled);
}
.t-button--variant-outline.t-button--theme-danger:hover,
.t-button--variant-outline.t-button--theme-danger:focus-visible {
border-color: var(--td-error-color-hover);
}
.t-button--variant-outline.t-button--theme-danger.t-is-loading {
border-color: var(--td-error-color-disabled);
}
.t-button--variant-outline.t-button--theme-danger.t-is-disabled {
border-color: var(--td-error-color-disabled);
}
.t-button--variant-outline.t-button--ghost {
background-color: transparent;
color: var(--td-text-color-anti);
border-color: var(--td-text-color-anti);
}
.t-button--variant-outline.t-button--ghost:hover,
.t-button--variant-outline.t-button--ghost:focus-visible {
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost:active {
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-is-loading {
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-is-disabled {
background-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost:hover,
.t-button--variant-outline.t-button--ghost:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-button--ghost:active {
color: var(--td-brand-color-active);
}
.t-button--variant-outline.t-button--ghost.t-is-loading {
color: var(--td-text-color-anti);
}
.t-button--variant-outline.t-button--ghost.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost:hover,
.t-button--variant-outline.t-button--ghost:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-button--ghost:active {
border-color: var(--td-brand-color-active);
}
.t-button--variant-outline.t-button--ghost.t-is-loading {
border-color: var(--td-text-color-anti);
}
.t-button--variant-outline.t-button--ghost.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary {
color: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary:active {
color: var(--td-brand-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading {
color: var(--td-brand-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary:active {
border-color: var(--td-brand-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading {
border-color: var(--td-brand-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success {
color: var(--td-success-color);
border-color: var(--td-success-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible {
color: var(--td-success-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success:active {
color: var(--td-success-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading {
color: var(--td-success-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible {
border-color: var(--td-success-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success:active {
border-color: var(--td-success-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading {
border-color: var(--td-success-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning {
color: var(--td-warning-color);
border-color: var(--td-warning-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible {
color: var(--td-warning-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning:active {
color: var(--td-warning-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading {
color: var(--td-warning-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible {
border-color: var(--td-warning-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning:active {
border-color: var(--td-warning-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading {
border-color: var(--td-warning-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger {
color: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible {
color: var(--td-error-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger:active {
color: var(--td-error-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading {
color: var(--td-error-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover,
.t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible {
border-color: var(--td-error-color-hover);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger:active {
border-color: var(--td-error-color-active);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading {
border-color: var(--td-error-color);
}
.t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost) {
color: var(--td-text-color-primary);
}
.t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-primary {
color: var(--td-brand-color);
background-color: transparent;
}
.t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-success {
color: var(--td-success-color);
background-color: transparent;
}
.t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-warning {
color: var(--td-warning-color);
background-color: transparent;
}
.t-button--variant-outline.t-is-loading:not(.t-button--variant-outline.t-button--ghost).t-button--theme-danger {
color: var(--td-error-color);
background-color: transparent;
}
.t-button--variant-dashed {
height: var(--td-comp-size-m);
font: var(--td-font-body-medium);
padding-left: calc(var(--td-comp-paddingLR-l) - 1px);
padding-right: calc(var(--td-comp-paddingLR-l) - 1px);
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-specialcomponent);
border-color: var(--td-border-level-2-color);
border-style: dashed;
}
.t-button--variant-dashed .t-icon,
.t-button--variant-dashed .t-loading {
font-size: var(--td-font-size-body-large);
}
.t-button--variant-dashed:hover,
.t-button--variant-dashed:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-is-loading {
color: var(--td-text-color-disabled);
}
.t-button--variant-dashed.t-is-disabled {
color: var(--td-text-color-disabled);
}
.t-button--variant-dashed:hover,
.t-button--variant-dashed:focus-visible {
background-color: var(--td-bg-color-specialcomponent);
}
.t-button--variant-dashed.t-is-loading {
background-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-dashed.t-is-disabled {
background-color: var(--td-bg-color-component-disabled);
}
.t-button--variant-dashed:hover,
.t-button--variant-dashed:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-is-loading {
border-color: var(--td-border-level-2-color);
}
.t-button--variant-dashed.t-is-disabled {
border-color: var(--td-border-level-2-color);
}
.t-button--variant-dashed.t-button--theme-primary {
color: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-button--variant-dashed.t-button--theme-primary:hover,
.t-button--variant-dashed.t-button--theme-primary:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-button--theme-primary.t-is-loading {
color: var(--td-brand-color-disabled);
}
.t-button--variant-dashed.t-button--theme-primary.t-is-disabled {
color: var(--td-brand-color-disabled);
}
.t-button--variant-dashed.t-button--theme-primary:hover,
.t-button--variant-dashed.t-button--theme-primary:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-button--theme-primary.t-is-loading {
border-color: var(--td-brand-color-disabled);
}
.t-button--variant-dashed.t-button--theme-primary.t-is-disabled {
border-color: var(--td-brand-color-disabled);
}
.t-button--variant-dashed.t-button--theme-success {
color: var(--td-success-color);
border-color: var(--td-success-color);
}
.t-button--variant-dashed.t-button--theme-success:hover,
.t-button--variant-dashed.t-button--theme-success:focus-visible {
color: var(--td-success-color-hover);
}
.t-button--variant-dashed.t-button--theme-success.t-is-loading {
color: var(--td-success-color-disabled);
}
.t-button--variant-dashed.t-button--theme-success.t-is-disabled {
color: var(--td-success-color-disabled);
}
.t-button--variant-dashed.t-button--theme-success:hover,
.t-button--variant-dashed.t-button--theme-success:focus-visible {
border-color: var(--td-success-color-hover);
}
.t-button--variant-dashed.t-button--theme-success.t-is-loading {
border-color: var(--td-success-color-disabled);
}
.t-button--variant-dashed.t-button--theme-success.t-is-disabled {
border-color: var(--td-success-color-disabled);
}
.t-button--variant-dashed.t-button--theme-warning {
color: var(--td-warning-color);
border-color: var(--td-warning-color);
}
.t-button--variant-dashed.t-button--theme-warning:hover,
.t-button--variant-dashed.t-button--theme-warning:focus-visible {
color: var(--td-warning-color-hover);
}
.t-button--variant-dashed.t-button--theme-warning.t-is-loading {
color: var(--td-warning-color-disabled);
}
.t-button--variant-dashed.t-button--theme-warning.t-is-disabled {
color: var(--td-warning-color-disabled);
}
.t-button--variant-dashed.t-button--theme-warning:hover,
.t-button--variant-dashed.t-button--theme-warning:focus-visible {
border-color: var(--td-warning-color-hover);
}
.t-button--variant-dashed.t-button--theme-warning.t-is-loading {
border-color: var(--td-warning-color-disabled);
}
.t-button--variant-dashed.t-button--theme-warning.t-is-disabled {
border-color: var(--td-warning-color-disabled);
}
.t-button--variant-dashed.t-button--theme-danger {
color: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-button--variant-dashed.t-button--theme-danger:hover,
.t-button--variant-dashed.t-button--theme-danger:focus-visible {
color: var(--td-error-color-hover);
}
.t-button--variant-dashed.t-button--theme-danger.t-is-loading {
color: var(--td-error-color-disabled);
}
.t-button--variant-dashed.t-button--theme-danger.t-is-disabled {
color: var(--td-error-color-disabled);
}
.t-button--variant-dashed.t-button--theme-danger:hover,
.t-button--variant-dashed.t-button--theme-danger:focus-visible {
border-color: var(--td-error-color-hover);
}
.t-button--variant-dashed.t-button--theme-danger.t-is-loading {
border-color: var(--td-error-color-disabled);
}
.t-button--variant-dashed.t-button--theme-danger.t-is-disabled {
border-color: var(--td-error-color-disabled);
}
.t-button--variant-dashed.t-button--ghost {
background-color: transparent;
color: var(--td-text-color-anti);
border-color: var(--td-text-color-anti);
}
.t-button--variant-dashed.t-button--ghost:hover,
.t-button--variant-dashed.t-button--ghost:focus-visible {
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost:active {
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-is-loading {
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-is-disabled {
background-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost:hover,
.t-button--variant-dashed.t-button--ghost:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-button--ghost:active {
color: var(--td-brand-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-is-loading {
color: var(--td-text-color-anti);
}
.t-button--variant-dashed.t-button--ghost.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost:hover,
.t-button--variant-dashed.t-button--ghost:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-button--ghost:active {
border-color: var(--td-brand-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-is-loading {
border-color: var(--td-text-color-anti);
}
.t-button--variant-dashed.t-button--ghost.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary {
color: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active {
color: var(--td-brand-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading {
color: var(--td-brand-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible {
border-color: var(--td-brand-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active {
border-color: var(--td-brand-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading {
border-color: var(--td-brand-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success {
color: var(--td-success-color);
border-color: var(--td-success-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible {
color: var(--td-success-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success:active {
color: var(--td-success-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading {
color: var(--td-success-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible {
border-color: var(--td-success-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success:active {
border-color: var(--td-success-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading {
border-color: var(--td-success-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning {
color: var(--td-warning-color);
border-color: var(--td-warning-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible {
color: var(--td-warning-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active {
color: var(--td-warning-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading {
color: var(--td-warning-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible {
border-color: var(--td-warning-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active {
border-color: var(--td-warning-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading {
border-color: var(--td-warning-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger {
color: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible {
color: var(--td-error-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active {
color: var(--td-error-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading {
color: var(--td-error-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover,
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible {
border-color: var(--td-error-color-hover);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active {
border-color: var(--td-error-color-active);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading {
border-color: var(--td-error-color);
}
.t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled {
border-color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost) {
color: var(--td-text-color-primary);
}
.t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-primary {
color: var(--td-brand-color);
background-color: transparent;
}
.t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-success {
color: var(--td-success-color);
background-color: transparent;
}
.t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-warning {
color: var(--td-warning-color);
background-color: transparent;
}
.t-button--variant-dashed.t-is-loading:not(.t-button--variant-dashed.t-button--ghost).t-button--theme-danger {
color: var(--td-error-color);
background-color: transparent;
}
.t-button--variant-text {
height: var(--td-comp-size-m);
font: var(--td-font-body-medium);
padding-left: calc(var(--td-comp-paddingLR-l) - 1px);
padding-right: calc(var(--td-comp-paddingLR-l) - 1px);
color: var(--td-text-color-primary);
background-color: transparent;
border-color: transparent;
}
.t-button--variant-text .t-icon,
.t-button--variant-text .t-loading {
font-size: var(--td-font-size-body-large);
}
.t-button--variant-text:hover,
.t-button--variant-text:focus-visible {
color: var(--td-text-color-primary);
}
.t-button--variant-text.t-is-loading {
color: var(--td-text-color-disabled);
}
.t-button--variant-text.t-is-disabled {
color: var(--td-text-color-disabled);
}
.t-button--variant-text:hover,
.t-button--variant-text:focus-visible {
background-color: var(--td-bg-color-container-hover);
}
.t-button--variant-text.t-is-loading {
background-color: transparent;
}
.t-button--variant-text.t-is-disabled {
background-color: transparent;
}
.t-button--variant-text:hover,
.t-button--variant-text:focus-visible {
border-color: var(--td-bg-color-container-hover);
}
.t-button--variant-text.t-is-loading {
border-color: transparent;
}
.t-button--variant-text.t-is-disabled {
border-color: transparent;
}
.t-button--variant-text.t-button--theme-primary {
color: var(--td-brand-color);
}
.t-button--variant-text.t-button--theme-primary:hover,
.t-button--variant-text.t-button--theme-primary:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-text.t-button--theme-primary.t-is-loading {
color: var(--td-brand-color-disabled);
}
.t-button--variant-text.t-button--theme-primary.t-is-disabled {
color: var(--td-brand-color-disabled);
}
.t-button--variant-text.t-button--theme-success {
color: var(--td-success-color);
}
.t-button--variant-text.t-button--theme-success:hover,
.t-button--variant-text.t-button--theme-success:focus-visible {
color: var(--td-success-color-hover);
}
.t-button--variant-text.t-button--theme-success.t-is-loading {
color: var(--td-success-color-disabled);
}
.t-button--variant-text.t-button--theme-success.t-is-disabled {
color: var(--td-success-color-disabled);
}
.t-button--variant-text.t-button--theme-warning {
color: var(--td-warning-color);
}
.t-button--variant-text.t-button--theme-warning:hover,
.t-button--variant-text.t-button--theme-warning:focus-visible {
color: var(--td-warning-color-hover);
}
.t-button--variant-text.t-button--theme-warning.t-is-loading {
color: var(--td-warning-color-disabled);
}
.t-button--variant-text.t-button--theme-warning.t-is-disabled {
color: var(--td-warning-color-disabled);
}
.t-button--variant-text.t-button--theme-danger {
color: var(--td-error-color);
}
.t-button--variant-text.t-button--theme-danger:hover,
.t-button--variant-text.t-button--theme-danger:focus-visible {
color: var(--td-error-color-hover);
}
.t-button--variant-text.t-button--theme-danger.t-is-loading {
color: var(--td-error-color-disabled);
}
.t-button--variant-text.t-button--theme-danger.t-is-disabled {
color: var(--td-error-color-disabled);
}
.t-button--variant-text.t-button--ghost {
background: none;
color: var(--td-text-color-anti);
}
.t-button--variant-text.t-button--ghost:hover,
.t-button--variant-text.t-button--ghost:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-text.t-button--ghost:active {
color: var(--td-brand-color-active);
}
.t-button--variant-text.t-button--ghost.t-is-loading {
color: var(--td-text-color-anti);
}
.t-button--variant-text.t-button--ghost.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-text.t-button--ghost.t-button--theme-primary {
color: var(--td-brand-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-primary:hover,
.t-button--variant-text.t-button--ghost.t-button--theme-primary:focus-visible {
color: var(--td-brand-color-hover);
}
.t-button--variant-text.t-button--ghost.t-button--theme-primary:active {
color: var(--td-brand-color-active);
}
.t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-loading {
color: var(--td-brand-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-text.t-button--ghost.t-button--theme-success {
color: var(--td-success-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-success:hover,
.t-button--variant-text.t-button--ghost.t-button--theme-success:focus-visible {
color: var(--td-success-color-hover);
}
.t-button--variant-text.t-button--ghost.t-button--theme-success:active {
color: var(--td-success-color-active);
}
.t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-loading {
color: var(--td-success-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-text.t-button--ghost.t-button--theme-warning {
color: var(--td-warning-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-warning:hover,
.t-button--variant-text.t-button--ghost.t-button--theme-warning:focus-visible {
color: var(--td-warning-color-hover);
}
.t-button--variant-text.t-button--ghost.t-button--theme-warning:active {
color: var(--td-warning-color-active);
}
.t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-loading {
color: var(--td-warning-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-text.t-button--ghost.t-button--theme-danger {
color: var(--td-error-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-danger:hover,
.t-button--variant-text.t-button--ghost.t-button--theme-danger:focus-visible {
color: var(--td-error-color-hover);
}
.t-button--variant-text.t-button--ghost.t-button--theme-danger:active {
color: var(--td-error-color-active);
}
.t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-loading {
color: var(--td-error-color);
}
.t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
background-color: transparent;
}
.t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost) {
color: var(--td-text-color-primary);
}
.t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-primary {
color: var(--td-brand-color);
}
.t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-success {
color: var(--td-success-color);
}
.t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-warning {
color: var(--td-warning-color);
}
.t-button--variant-text.t-is-loading:not(.t-button--variant-text.t-button--ghost).t-button--theme-danger {
color: var(--td-error-color);
}
.t-button.t-is-loading,
.t-button.t-is-disabled {
cursor: not-allowed;
}
.t-button.t-size-s {
height: var(--td-comp-size-xs);
font: var(--td-font-body-small);
padding-left: calc(var(--td-comp-paddingLR-s) - 1px);
padding-right: calc(var(--td-comp-paddingLR-s) - 1px);
}
.t-button.t-size-s .t-icon,
.t-button.t-size-s .t-loading {
font-size: var(--td-font-size-body-medium);
}
.t-button.t-size-l {
height: var(--td-comp-size-xl);
font: var(--td-font-body-large);
padding-left: calc(var(--td-comp-paddingLR-xl) - 1px);
padding-right: calc(var(--td-comp-paddingLR-xl) - 1px);
}
.t-button.t-size-l .t-icon,
.t-button.t-size-l .t-loading {
font-size: var(--td-font-size-title-large);
}
.t-button--shape-square {
width: var(--td-comp-size-m);
padding: 0;
}
.t-button--shape-square.t-size-s {
width: var(--td-comp-size-xs);
padding: 0;
}
.t-button--shape-square.t-size-l {
width: var(--td-comp-size-xl);
padding: 0;
}
.t-button--shape-round {
border-radius: var(--td-radius-round);
}
.t-button--shape-round.t-size-s {
border-radius: calc(var(--td-comp-size-xs) / 2);
}
.t-button--shape-round.t-size-l {
border-radius: calc(var(--td-comp-size-xl) / 2);
}
.t-button--shape-circle {
width: var(--td-comp-size-m);
padding: 0;
text-align: center;
border-radius: calc(var(--td-comp-size-m) / 2);
}
.t-button--shape-circle .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-button--shape-circle .t-loading {
font-size: var(--td-font-size-body-large);
}
.t-button--shape-circle.t-size-s {
width: var(--td-comp-size-xs);
border-radius: calc(var(--td-comp-size-xs) / 2);
}
.t-button--shape-circle.t-size-l {
width: var(--td-comp-size-xl);
padding: 0;
border-radius: calc(var(--td-comp-size-xl) / 2);
}
.t-button.t-size-full-width {
display: flex;
width: 100%;
}
.t-button--ghost {
--ripple-color: var(--td-gray-color-10);
}
.t-button:not(.t-is-disabled):not(.t-button--ghost) {
--ripple-color: var(--td-bg-color-container-active);
}
.t-button--variant-base:not(.t-is-disabled):not(.t-button--ghost) {
--ripple-color: var(--td-bg-color-component-active);
}
.t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) {
--ripple-color: var(--td-brand-color-active);
}
.t-button--variant-base.t-button--theme-success:not(.t-is-disabled):not(.t-button--ghost) {
--ripple-color: var(--td-success-color-active);
}
.t-button--variant-base.t-button--theme-warning:not(.t-is-disabled):not(.t-button--ghost) {
--ripple-color: var(--td-warning-color-active);
}
.t-button--variant-base.t-button--theme-danger:not(.t-is-disabled):not(.t-button--ghost) {
--ripple-color: var(--td-error-color-active);
}
@keyframes t-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.t-icon {
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
}
.t-icon::before {
font-family: unset;
}
.t-icon-loading {
animation: t-spin 1s linear infinite;
}
.t-icon {
fill: currentColor;
}
.t-icon.t-size-s,
i.t-size-s {
font-size: 14px;
}
.t-icon.t-size-m,
i.t-size-m {
font-size: 16px;
}
.t-icon.t-size-l,
i.t-size-l {
font-size: 18px;
}
.t-link {
display: inline-flex;
cursor: pointer;
align-items: center;
position: relative;
text-decoration: none;
outline: none;
padding: 0;
transition: all 0.2s linear;
font: var(--td-font-link-medium);
}
.t-link .t-link__prefix-icon {
margin-right: var(--td-comp-margin-s);
display: flex;
}
.t-link .t-link__suffix-icon {
margin-left: var(--td-comp-margin-s);
display: flex;
}
.t-link.t-size-s {
font: var(--td-font-link-small);
}
.t-link.t-size-s .t-link__prefix-icon {
margin-right: var(--td-comp-margin-xs);
display: flex;
}
.t-link.t-size-s .t-link__suffix-icon {
margin-left: var(--td-comp-margin-xs);
display: flex;
}
.t-link.t-size-l {
font: var(--td-font-link-large);
}
.t-link.t-size-l .t-link__prefix-icon {
margin-right: var(--td-comp-margin-m);
display: flex;
}
.t-link.t-size-l .t-link__suffix-icon {
margin-left: var(--td-comp-margin-m);
display: flex;
}
.t-link--theme-default {
color: var(--td-text-color-primary);
}
.t-link--theme-default:active {
color: var(--td-brand-color-active);
}
.t-link--theme-default.t-link--hover-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid var(--td-text-color-primary);
opacity: 0;
transition: all 0.2s linear;
}
.t-link--theme-default.t-link--hover-underline:hover::after {
opacity: 1;
}
.t-link--theme-default.t-link--hover-underline:active::after {
opacity: 1;
border-color: var(--td-brand-color-active);
}
.t-link--theme-default.t-link--hover-color:hover {
color: var(--td-brand-color-hover);
}
.t-link--theme-default.t-link--hover-color.t-is-underline:hover::after {
border-color: var(--td-brand-color-hover);
}
.t-link--theme-default.t-link--hover-color.t-is-underline:active::after {
border-color: var(--td-brand-color-active);
}
.t-link--theme-default.t-link--hover-color:active {
color: var(--td-brand-color-active);
}
.t-link--theme-default.t-is-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
opacity: 1;
border-bottom: 1px solid var(--td-text-color-primary);
transition: all 0.2s linear;
}
.t-link--theme-default.t-is-disabled {
cursor: not-allowed;
color: var(--td-text-color-disabled);
}
.t-link--theme-default.t-is-disabled:hover,
.t-link--theme-default.t-is-disabled:active {
color: var(--td-text-color-disabled);
}
.t-link--theme-default.t-is-disabled.t-is-underline::after {
border-color: var(--td-text-color-disabled);
}
.t-link--theme-primary {
color: var(--td-brand-color);
}
.t-link--theme-primary:active {
color: var(--td-brand-color-active);
}
.t-link--theme-primary.t-link--hover-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid var(--td-brand-color);
opacity: 0;
transition: all 0.2s linear;
}
.t-link--theme-primary.t-link--hover-underline:hover::after {
opacity: 1;
}
.t-link--theme-primary.t-link--hover-underline:active::after {
opacity: 1;
border-color: var(--td-brand-color-active);
}
.t-link--theme-primary.t-link--hover-color:hover {
color: var(--td-brand-color-hover);
}
.t-link--theme-primary.t-link--hover-color.t-is-underline:hover::after {
border-color: var(--td-brand-color-hover);
}
.t-link--theme-primary.t-link--hover-color.t-is-underline:active::after {
border-color: var(--td-brand-color-active);
}
.t-link--theme-primary.t-link--hover-color:active {
color: var(--td-brand-color-active);
}
.t-link--theme-primary.t-is-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
opacity: 1;
border-bottom: 1px solid var(--td-brand-color);
transition: all 0.2s linear;
}
.t-link--theme-primary.t-is-disabled {
cursor: not-allowed;
color: var(--td-brand-color-disabled);
}
.t-link--theme-primary.t-is-disabled:hover,
.t-link--theme-primary.t-is-disabled:active {
color: var(--td-brand-color-disabled);
}
.t-link--theme-primary.t-is-disabled.t-is-underline::after {
border-color: var(--td-brand-color-disabled);
}
.t-link--theme-success {
color: var(--td-success-color);
}
.t-link--theme-success:active {
color: var(--td-success-color-active);
}
.t-link--theme-success.t-link--hover-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid var(--td-success-color);
opacity: 0;
transition: all 0.2s linear;
}
.t-link--theme-success.t-link--hover-underline:hover::after {
opacity: 1;
}
.t-link--theme-success.t-link--hover-underline:active::after {
opacity: 1;
border-color: var(--td-success-color-active);
}
.t-link--theme-success.t-link--hover-color:hover {
color: var(--td-success-color-hover);
}
.t-link--theme-success.t-link--hover-color.t-is-underline:hover::after {
border-color: var(--td-success-color-hover);
}
.t-link--theme-success.t-link--hover-color.t-is-underline:active::after {
border-color: var(--td-success-color-active);
}
.t-link--theme-success.t-link--hover-color:active {
color: var(--td-success-color-active);
}
.t-link--theme-success.t-is-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
opacity: 1;
border-bottom: 1px solid var(--td-success-color);
transition: all 0.2s linear;
}
.t-link--theme-success.t-is-disabled {
cursor: not-allowed;
color: var(--td-success-color-disabled);
}
.t-link--theme-success.t-is-disabled:hover,
.t-link--theme-success.t-is-disabled:active {
color: var(--td-success-color-disabled);
}
.t-link--theme-success.t-is-disabled.t-is-underline::after {
border-color: var(--td-success-color-disabled);
}
.t-link--theme-danger {
color: var(--td-error-color);
}
.t-link--theme-danger:active {
color: var(--td-error-color-active);
}
.t-link--theme-danger.t-link--hover-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid var(--td-error-color);
opacity: 0;
transition: all 0.2s linear;
}
.t-link--theme-danger.t-link--hover-underline:hover::after {
opacity: 1;
}
.t-link--theme-danger.t-link--hover-underline:active::after {
opacity: 1;
border-color: var(--td-error-color-active);
}
.t-link--theme-danger.t-link--hover-color:hover {
color: var(--td-error-color-hover);
}
.t-link--theme-danger.t-link--hover-color.t-is-underline:hover::after {
border-color: var(--td-error-color-hover);
}
.t-link--theme-danger.t-link--hover-color.t-is-underline:active::after {
border-color: var(--td-error-color-active);
}
.t-link--theme-danger.t-link--hover-color:active {
color: var(--td-error-color-active);
}
.t-link--theme-danger.t-is-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
opacity: 1;
border-bottom: 1px solid var(--td-error-color);
transition: all 0.2s linear;
}
.t-link--theme-danger.t-is-disabled {
cursor: not-allowed;
color: var(--td-error-color-disabled);
}
.t-link--theme-danger.t-is-disabled:hover,
.t-link--theme-danger.t-is-disabled:active {
color: var(--td-error-color-disabled);
}
.t-link--theme-danger.t-is-disabled.t-is-underline::after {
border-color: var(--td-error-color-disabled);
}
.t-link--theme-warning {
color: var(--td-warning-color);
}
.t-link--theme-warning:active {
color: var(--td-warning-color-active);
}
.t-link--theme-warning.t-link--hover-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid var(--td-warning-color);
opacity: 0;
transition: all 0.2s linear;
}
.t-link--theme-warning.t-link--hover-underline:hover::after {
opacity: 1;
}
.t-link--theme-warning.t-link--hover-underline:active::after {
opacity: 1;
border-color: var(--td-warning-color-active);
}
.t-link--theme-warning.t-link--hover-color:hover {
color: var(--td-warning-color-hover);
}
.t-link--theme-warning.t-link--hover-color.t-is-underline:hover::after {
border-color: var(--td-warning-color-hover);
}
.t-link--theme-warning.t-link--hover-color.t-is-underline:active::after {
border-color: var(--td-warning-color-active);
}
.t-link--theme-warning.t-link--hover-color:active {
color: var(--td-warning-color-active);
}
.t-link--theme-warning.t-is-underline::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
opacity: 1;
border-bottom: 1px solid var(--td-warning-color);
transition: all 0.2s linear;
}
.t-link--theme-warning.t-is-disabled {
cursor: not-allowed;
color: var(--td-warning-color-disabled);
}
.t-link--theme-warning.t-is-disabled:hover,
.t-link--theme-warning.t-is-disabled:active {
color: var(--td-warning-color-disabled);
}
.t-link--theme-warning.t-is-disabled.t-is-underline::after {
border-color: var(--td-warning-color-disabled);
}
.t-row {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
}
.t-row--start {
justify-content: flex-start;
}
.t-row--center {
justify-content: center;
}
.t-row--end {
justify-content: flex-end;
}
.t-row--space-between {
justify-content: space-between;
}
.t-row--space-around {
justify-content: space-around;
}
.t-row--top {
align-items: flex-start;
}
.t-row--middle {
align-items: center;
}
.t-row--bottom {
align-items: flex-end;
}
.t-row--align-top,
.t-row--align-start {
align-items: flex-start;
}
.t-row--align-middle,
.t-row--align-center {
align-items: center;
}
.t-row--align-bottom,
.t-row--align-end {
align-items: flex-end;
}
.t-row--align-stretch {
align-items: stretch;
}
.t-row--align-baseline {
align-items: baseline;
}
.t-col {
position: relative;
max-width: 100%;
min-height: 1px;
box-sizing: border-box;
}
.t-col-12 {
display: block;
flex: 0 0 100%;
max-width: 100%;
}
.t-col-push-12 {
left: 100%;
}
.t-col-pull-12 {
right: 100%;
}
.t-col-offset-12 {
margin-left: 100%;
}
.t-col-order-12 {
order: 12;
}
.t-col-11 {
display: block;
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.t-col-push-11 {
left: 91.66666667%;
}
.t-col-pull-11 {
right: 91.66666667%;
}
.t-col-offset-11 {
margin-left: 91.66666667%;
}
.t-col-order-11 {
order: 11;
}
.t-col-10 {
display: block;
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.t-col-push-10 {
left: 83.33333333%;
}
.t-col-pull-10 {
right: 83.33333333%;
}
.t-col-offset-10 {
margin-left: 83.33333333%;
}
.t-col-order-10 {
order: 10;
}
.t-col-9 {
display: block;
flex: 0 0 75%;
max-width: 75%;
}
.t-col-push-9 {
left: 75%;
}
.t-col-pull-9 {
right: 75%;
}
.t-col-offset-9 {
margin-left: 75%;
}
.t-col-order-9 {
order: 9;
}
.t-col-8 {
display: block;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.t-col-push-8 {
left: 66.66666667%;
}
.t-col-pull-8 {
right: 66.66666667%;
}
.t-col-offset-8 {
margin-left: 66.66666667%;
}
.t-col-order-8 {
order: 8;
}
.t-col-7 {
display: block;
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.t-col-push-7 {
left: 58.33333333%;
}
.t-col-pull-7 {
right: 58.33333333%;
}
.t-col-offset-7 {
margin-left: 58.33333333%;
}
.t-col-order-7 {
order: 7;
}
.t-col-6 {
display: block;
flex: 0 0 50%;
max-width: 50%;
}
.t-col-push-6 {
left: 50%;
}
.t-col-pull-6 {
right: 50%;
}
.t-col-offset-6 {
margin-left: 50%;
}
.t-col-order-6 {
order: 6;
}
.t-col-5 {
display: block;
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.t-col-push-5 {
left: 41.66666667%;
}
.t-col-pull-5 {
right: 41.66666667%;
}
.t-col-offset-5 {
margin-left: 41.66666667%;
}
.t-col-order-5 {
order: 5;
}
.t-col-4 {
display: block;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.t-col-push-4 {
left: 33.33333333%;
}
.t-col-pull-4 {
right: 33.33333333%;
}
.t-col-offset-4 {
margin-left: 33.33333333%;
}
.t-col-order-4 {
order: 4;
}
.t-col-3 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
.t-col-push-3 {
left: 25%;
}
.t-col-pull-3 {
right: 25%;
}
.t-col-offset-3 {
margin-left: 25%;
}
.t-col-order-3 {
order: 3;
}
.t-col-2 {
display: block;
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.t-col-push-2 {
left: 16.66666667%;
}
.t-col-pull-2 {
right: 16.66666667%;
}
.t-col-offset-2 {
margin-left: 16.66666667%;
}
.t-col-order-2 {
order: 2;
}
.t-col-1 {
display: block;
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.t-col-push-1 {
left: 8.33333333%;
}
.t-col-pull-1 {
right: 8.33333333%;
}
.t-col-offset-1 {
margin-left: 8.33333333%;
}
.t-col-order-1 {
order: 1;
}
.t-col-0 {
display: none;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-offset-0 {
margin-left: 0;
}
.t-col-order-0 {
order: 0;
}
.t-col-xs-12 {
display: block;
flex: 0 0 100%;
max-width: 100%;
}
.t-col-xs-push-12 {
left: 100%;
}
.t-col-xs-pull-12 {
right: 100%;
}
.t-col-xs-offset-12 {
margin-left: 100%;
}
.t-col-xs-order-12 {
order: 12;
}
.t-col-xs-11 {
display: block;
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.t-col-xs-push-11 {
left: 91.66666667%;
}
.t-col-xs-pull-11 {
right: 91.66666667%;
}
.t-col-xs-offset-11 {
margin-left: 91.66666667%;
}
.t-col-xs-order-11 {
order: 11;
}
.t-col-xs-10 {
display: block;
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.t-col-xs-push-10 {
left: 83.33333333%;
}
.t-col-xs-pull-10 {
right: 83.33333333%;
}
.t-col-xs-offset-10 {
margin-left: 83.33333333%;
}
.t-col-xs-order-10 {
order: 10;
}
.t-col-xs-9 {
display: block;
flex: 0 0 75%;
max-width: 75%;
}
.t-col-xs-push-9 {
left: 75%;
}
.t-col-xs-pull-9 {
right: 75%;
}
.t-col-xs-offset-9 {
margin-left: 75%;
}
.t-col-xs-order-9 {
order: 9;
}
.t-col-xs-8 {
display: block;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.t-col-xs-push-8 {
left: 66.66666667%;
}
.t-col-xs-pull-8 {
right: 66.66666667%;
}
.t-col-xs-offset-8 {
margin-left: 66.66666667%;
}
.t-col-xs-order-8 {
order: 8;
}
.t-col-xs-7 {
display: block;
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.t-col-xs-push-7 {
left: 58.33333333%;
}
.t-col-xs-pull-7 {
right: 58.33333333%;
}
.t-col-xs-offset-7 {
margin-left: 58.33333333%;
}
.t-col-xs-order-7 {
order: 7;
}
.t-col-xs-6 {
display: block;
flex: 0 0 50%;
max-width: 50%;
}
.t-col-xs-push-6 {
left: 50%;
}
.t-col-xs-pull-6 {
right: 50%;
}
.t-col-xs-offset-6 {
margin-left: 50%;
}
.t-col-xs-order-6 {
order: 6;
}
.t-col-xs-5 {
display: block;
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.t-col-xs-push-5 {
left: 41.66666667%;
}
.t-col-xs-pull-5 {
right: 41.66666667%;
}
.t-col-xs-offset-5 {
margin-left: 41.66666667%;
}
.t-col-xs-order-5 {
order: 5;
}
.t-col-xs-4 {
display: block;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.t-col-xs-push-4 {
left: 33.33333333%;
}
.t-col-xs-pull-4 {
right: 33.33333333%;
}
.t-col-xs-offset-4 {
margin-left: 33.33333333%;
}
.t-col-xs-order-4 {
order: 4;
}
.t-col-xs-3 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
.t-col-xs-push-3 {
left: 25%;
}
.t-col-xs-pull-3 {
right: 25%;
}
.t-col-xs-offset-3 {
margin-left: 25%;
}
.t-col-xs-order-3 {
order: 3;
}
.t-col-xs-2 {
display: block;
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.t-col-xs-push-2 {
left: 16.66666667%;
}
.t-col-xs-pull-2 {
right: 16.66666667%;
}
.t-col-xs-offset-2 {
margin-left: 16.66666667%;
}
.t-col-xs-order-2 {
order: 2;
}
.t-col-xs-1 {
display: block;
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.t-col-xs-push-1 {
left: 8.33333333%;
}
.t-col-xs-pull-1 {
right: 8.33333333%;
}
.t-col-xs-offset-1 {
margin-left: 8.33333333%;
}
.t-col-xs-order-1 {
order: 1;
}
.t-col-xs-0 {
display: none;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-xs-push-0 {
left: auto;
}
.t-col-xs-pull-0 {
right: auto;
}
.t-col-xs-offset-0 {
margin-left: 0;
}
.t-col-xs-order-0 {
order: 0;
}
@media (min-width: 768px) {
.t-col-sm-12 {
display: block;
flex: 0 0 100%;
max-width: 100%;
}
.t-col-sm-push-12 {
left: 100%;
}
.t-col-sm-pull-12 {
right: 100%;
}
.t-col-sm-offset-12 {
margin-left: 100%;
}
.t-col-sm-order-12 {
order: 12;
}
.t-col-sm-11 {
display: block;
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.t-col-sm-push-11 {
left: 91.66666667%;
}
.t-col-sm-pull-11 {
right: 91.66666667%;
}
.t-col-sm-offset-11 {
margin-left: 91.66666667%;
}
.t-col-sm-order-11 {
order: 11;
}
.t-col-sm-10 {
display: block;
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.t-col-sm-push-10 {
left: 83.33333333%;
}
.t-col-sm-pull-10 {
right: 83.33333333%;
}
.t-col-sm-offset-10 {
margin-left: 83.33333333%;
}
.t-col-sm-order-10 {
order: 10;
}
.t-col-sm-9 {
display: block;
flex: 0 0 75%;
max-width: 75%;
}
.t-col-sm-push-9 {
left: 75%;
}
.t-col-sm-pull-9 {
right: 75%;
}
.t-col-sm-offset-9 {
margin-left: 75%;
}
.t-col-sm-order-9 {
order: 9;
}
.t-col-sm-8 {
display: block;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.t-col-sm-push-8 {
left: 66.66666667%;
}
.t-col-sm-pull-8 {
right: 66.66666667%;
}
.t-col-sm-offset-8 {
margin-left: 66.66666667%;
}
.t-col-sm-order-8 {
order: 8;
}
.t-col-sm-7 {
display: block;
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.t-col-sm-push-7 {
left: 58.33333333%;
}
.t-col-sm-pull-7 {
right: 58.33333333%;
}
.t-col-sm-offset-7 {
margin-left: 58.33333333%;
}
.t-col-sm-order-7 {
order: 7;
}
.t-col-sm-6 {
display: block;
flex: 0 0 50%;
max-width: 50%;
}
.t-col-sm-push-6 {
left: 50%;
}
.t-col-sm-pull-6 {
right: 50%;
}
.t-col-sm-offset-6 {
margin-left: 50%;
}
.t-col-sm-order-6 {
order: 6;
}
.t-col-sm-5 {
display: block;
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.t-col-sm-push-5 {
left: 41.66666667%;
}
.t-col-sm-pull-5 {
right: 41.66666667%;
}
.t-col-sm-offset-5 {
margin-left: 41.66666667%;
}
.t-col-sm-order-5 {
order: 5;
}
.t-col-sm-4 {
display: block;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.t-col-sm-push-4 {
left: 33.33333333%;
}
.t-col-sm-pull-4 {
right: 33.33333333%;
}
.t-col-sm-offset-4 {
margin-left: 33.33333333%;
}
.t-col-sm-order-4 {
order: 4;
}
.t-col-sm-3 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
.t-col-sm-push-3 {
left: 25%;
}
.t-col-sm-pull-3 {
right: 25%;
}
.t-col-sm-offset-3 {
margin-left: 25%;
}
.t-col-sm-order-3 {
order: 3;
}
.t-col-sm-2 {
display: block;
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.t-col-sm-push-2 {
left: 16.66666667%;
}
.t-col-sm-pull-2 {
right: 16.66666667%;
}
.t-col-sm-offset-2 {
margin-left: 16.66666667%;
}
.t-col-sm-order-2 {
order: 2;
}
.t-col-sm-1 {
display: block;
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.t-col-sm-push-1 {
left: 8.33333333%;
}
.t-col-sm-pull-1 {
right: 8.33333333%;
}
.t-col-sm-offset-1 {
margin-left: 8.33333333%;
}
.t-col-sm-order-1 {
order: 1;
}
.t-col-sm-0 {
display: none;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-sm-push-0 {
left: auto;
}
.t-col-sm-pull-0 {
right: auto;
}
.t-col-sm-offset-0 {
margin-left: 0;
}
.t-col-sm-order-0 {
order: 0;
}
}
@media (min-width: 992px) {
.t-col-md-12 {
display: block;
flex: 0 0 100%;
max-width: 100%;
}
.t-col-md-push-12 {
left: 100%;
}
.t-col-md-pull-12 {
right: 100%;
}
.t-col-md-offset-12 {
margin-left: 100%;
}
.t-col-md-order-12 {
order: 12;
}
.t-col-md-11 {
display: block;
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.t-col-md-push-11 {
left: 91.66666667%;
}
.t-col-md-pull-11 {
right: 91.66666667%;
}
.t-col-md-offset-11 {
margin-left: 91.66666667%;
}
.t-col-md-order-11 {
order: 11;
}
.t-col-md-10 {
display: block;
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.t-col-md-push-10 {
left: 83.33333333%;
}
.t-col-md-pull-10 {
right: 83.33333333%;
}
.t-col-md-offset-10 {
margin-left: 83.33333333%;
}
.t-col-md-order-10 {
order: 10;
}
.t-col-md-9 {
display: block;
flex: 0 0 75%;
max-width: 75%;
}
.t-col-md-push-9 {
left: 75%;
}
.t-col-md-pull-9 {
right: 75%;
}
.t-col-md-offset-9 {
margin-left: 75%;
}
.t-col-md-order-9 {
order: 9;
}
.t-col-md-8 {
display: block;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.t-col-md-push-8 {
left: 66.66666667%;
}
.t-col-md-pull-8 {
right: 66.66666667%;
}
.t-col-md-offset-8 {
margin-left: 66.66666667%;
}
.t-col-md-order-8 {
order: 8;
}
.t-col-md-7 {
display: block;
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.t-col-md-push-7 {
left: 58.33333333%;
}
.t-col-md-pull-7 {
right: 58.33333333%;
}
.t-col-md-offset-7 {
margin-left: 58.33333333%;
}
.t-col-md-order-7 {
order: 7;
}
.t-col-md-6 {
display: block;
flex: 0 0 50%;
max-width: 50%;
}
.t-col-md-push-6 {
left: 50%;
}
.t-col-md-pull-6 {
right: 50%;
}
.t-col-md-offset-6 {
margin-left: 50%;
}
.t-col-md-order-6 {
order: 6;
}
.t-col-md-5 {
display: block;
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.t-col-md-push-5 {
left: 41.66666667%;
}
.t-col-md-pull-5 {
right: 41.66666667%;
}
.t-col-md-offset-5 {
margin-left: 41.66666667%;
}
.t-col-md-order-5 {
order: 5;
}
.t-col-md-4 {
display: block;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.t-col-md-push-4 {
left: 33.33333333%;
}
.t-col-md-pull-4 {
right: 33.33333333%;
}
.t-col-md-offset-4 {
margin-left: 33.33333333%;
}
.t-col-md-order-4 {
order: 4;
}
.t-col-md-3 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
.t-col-md-push-3 {
left: 25%;
}
.t-col-md-pull-3 {
right: 25%;
}
.t-col-md-offset-3 {
margin-left: 25%;
}
.t-col-md-order-3 {
order: 3;
}
.t-col-md-2 {
display: block;
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.t-col-md-push-2 {
left: 16.66666667%;
}
.t-col-md-pull-2 {
right: 16.66666667%;
}
.t-col-md-offset-2 {
margin-left: 16.66666667%;
}
.t-col-md-order-2 {
order: 2;
}
.t-col-md-1 {
display: block;
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.t-col-md-push-1 {
left: 8.33333333%;
}
.t-col-md-pull-1 {
right: 8.33333333%;
}
.t-col-md-offset-1 {
margin-left: 8.33333333%;
}
.t-col-md-order-1 {
order: 1;
}
.t-col-md-0 {
display: none;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-md-push-0 {
left: auto;
}
.t-col-md-pull-0 {
right: auto;
}
.t-col-md-offset-0 {
margin-left: 0;
}
.t-col-md-order-0 {
order: 0;
}
}
@media (min-width: 1200px) {
.t-col-lg-12 {
display: block;
flex: 0 0 100%;
max-width: 100%;
}
.t-col-lg-push-12 {
left: 100%;
}
.t-col-lg-pull-12 {
right: 100%;
}
.t-col-lg-offset-12 {
margin-left: 100%;
}
.t-col-lg-order-12 {
order: 12;
}
.t-col-lg-11 {
display: block;
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.t-col-lg-push-11 {
left: 91.66666667%;
}
.t-col-lg-pull-11 {
right: 91.66666667%;
}
.t-col-lg-offset-11 {
margin-left: 91.66666667%;
}
.t-col-lg-order-11 {
order: 11;
}
.t-col-lg-10 {
display: block;
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.t-col-lg-push-10 {
left: 83.33333333%;
}
.t-col-lg-pull-10 {
right: 83.33333333%;
}
.t-col-lg-offset-10 {
margin-left: 83.33333333%;
}
.t-col-lg-order-10 {
order: 10;
}
.t-col-lg-9 {
display: block;
flex: 0 0 75%;
max-width: 75%;
}
.t-col-lg-push-9 {
left: 75%;
}
.t-col-lg-pull-9 {
right: 75%;
}
.t-col-lg-offset-9 {
margin-left: 75%;
}
.t-col-lg-order-9 {
order: 9;
}
.t-col-lg-8 {
display: block;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.t-col-lg-push-8 {
left: 66.66666667%;
}
.t-col-lg-pull-8 {
right: 66.66666667%;
}
.t-col-lg-offset-8 {
margin-left: 66.66666667%;
}
.t-col-lg-order-8 {
order: 8;
}
.t-col-lg-7 {
display: block;
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.t-col-lg-push-7 {
left: 58.33333333%;
}
.t-col-lg-pull-7 {
right: 58.33333333%;
}
.t-col-lg-offset-7 {
margin-left: 58.33333333%;
}
.t-col-lg-order-7 {
order: 7;
}
.t-col-lg-6 {
display: block;
flex: 0 0 50%;
max-width: 50%;
}
.t-col-lg-push-6 {
left: 50%;
}
.t-col-lg-pull-6 {
right: 50%;
}
.t-col-lg-offset-6 {
margin-left: 50%;
}
.t-col-lg-order-6 {
order: 6;
}
.t-col-lg-5 {
display: block;
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.t-col-lg-push-5 {
left: 41.66666667%;
}
.t-col-lg-pull-5 {
right: 41.66666667%;
}
.t-col-lg-offset-5 {
margin-left: 41.66666667%;
}
.t-col-lg-order-5 {
order: 5;
}
.t-col-lg-4 {
display: block;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.t-col-lg-push-4 {
left: 33.33333333%;
}
.t-col-lg-pull-4 {
right: 33.33333333%;
}
.t-col-lg-offset-4 {
margin-left: 33.33333333%;
}
.t-col-lg-order-4 {
order: 4;
}
.t-col-lg-3 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
.t-col-lg-push-3 {
left: 25%;
}
.t-col-lg-pull-3 {
right: 25%;
}
.t-col-lg-offset-3 {
margin-left: 25%;
}
.t-col-lg-order-3 {
order: 3;
}
.t-col-lg-2 {
display: block;
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.t-col-lg-push-2 {
left: 16.66666667%;
}
.t-col-lg-pull-2 {
right: 16.66666667%;
}
.t-col-lg-offset-2 {
margin-left: 16.66666667%;
}
.t-col-lg-order-2 {
order: 2;
}
.t-col-lg-1 {
display: block;
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.t-col-lg-push-1 {
left: 8.33333333%;
}
.t-col-lg-pull-1 {
right: 8.33333333%;
}
.t-col-lg-offset-1 {
margin-left: 8.33333333%;
}
.t-col-lg-order-1 {
order: 1;
}
.t-col-lg-0 {
display: none;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-lg-push-0 {
left: auto;
}
.t-col-lg-pull-0 {
right: auto;
}
.t-col-lg-offset-0 {
margin-left: 0;
}
.t-col-lg-order-0 {
order: 0;
}
}
@media (min-width: 1400px) {
.t-col-xl-12 {
display: block;
flex: 0 0 100%;
max-width: 100%;
}
.t-col-xl-push-12 {
left: 100%;
}
.t-col-xl-pull-12 {
right: 100%;
}
.t-col-xl-offset-12 {
margin-left: 100%;
}
.t-col-xl-order-12 {
order: 12;
}
.t-col-xl-11 {
display: block;
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.t-col-xl-push-11 {
left: 91.66666667%;
}
.t-col-xl-pull-11 {
right: 91.66666667%;
}
.t-col-xl-offset-11 {
margin-left: 91.66666667%;
}
.t-col-xl-order-11 {
order: 11;
}
.t-col-xl-10 {
display: block;
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.t-col-xl-push-10 {
left: 83.33333333%;
}
.t-col-xl-pull-10 {
right: 83.33333333%;
}
.t-col-xl-offset-10 {
margin-left: 83.33333333%;
}
.t-col-xl-order-10 {
order: 10;
}
.t-col-xl-9 {
display: block;
flex: 0 0 75%;
max-width: 75%;
}
.t-col-xl-push-9 {
left: 75%;
}
.t-col-xl-pull-9 {
right: 75%;
}
.t-col-xl-offset-9 {
margin-left: 75%;
}
.t-col-xl-order-9 {
order: 9;
}
.t-col-xl-8 {
display: block;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.t-col-xl-push-8 {
left: 66.66666667%;
}
.t-col-xl-pull-8 {
right: 66.66666667%;
}
.t-col-xl-offset-8 {
margin-left: 66.66666667%;
}
.t-col-xl-order-8 {
order: 8;
}
.t-col-xl-7 {
display: block;
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.t-col-xl-push-7 {
left: 58.33333333%;
}
.t-col-xl-pull-7 {
right: 58.33333333%;
}
.t-col-xl-offset-7 {
margin-left: 58.33333333%;
}
.t-col-xl-order-7 {
order: 7;
}
.t-col-xl-6 {
display: block;
flex: 0 0 50%;
max-width: 50%;
}
.t-col-xl-push-6 {
left: 50%;
}
.t-col-xl-pull-6 {
right: 50%;
}
.t-col-xl-offset-6 {
margin-left: 50%;
}
.t-col-xl-order-6 {
order: 6;
}
.t-col-xl-5 {
display: block;
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.t-col-xl-push-5 {
left: 41.66666667%;
}
.t-col-xl-pull-5 {
right: 41.66666667%;
}
.t-col-xl-offset-5 {
margin-left: 41.66666667%;
}
.t-col-xl-order-5 {
order: 5;
}
.t-col-xl-4 {
display: block;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.t-col-xl-push-4 {
left: 33.33333333%;
}
.t-col-xl-pull-4 {
right: 33.33333333%;
}
.t-col-xl-offset-4 {
margin-left: 33.33333333%;
}
.t-col-xl-order-4 {
order: 4;
}
.t-col-xl-3 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
.t-col-xl-push-3 {
left: 25%;
}
.t-col-xl-pull-3 {
right: 25%;
}
.t-col-xl-offset-3 {
margin-left: 25%;
}
.t-col-xl-order-3 {
order: 3;
}
.t-col-xl-2 {
display: block;
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.t-col-xl-push-2 {
left: 16.66666667%;
}
.t-col-xl-pull-2 {
right: 16.66666667%;
}
.t-col-xl-offset-2 {
margin-left: 16.66666667%;
}
.t-col-xl-order-2 {
order: 2;
}
.t-col-xl-1 {
display: block;
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.t-col-xl-push-1 {
left: 8.33333333%;
}
.t-col-xl-pull-1 {
right: 8.33333333%;
}
.t-col-xl-offset-1 {
margin-left: 8.33333333%;
}
.t-col-xl-order-1 {
order: 1;
}
.t-col-xl-0 {
display: none;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-xl-push-0 {
left: auto;
}
.t-col-xl-pull-0 {
right: auto;
}
.t-col-xl-offset-0 {
margin-left: 0;
}
.t-col-xl-order-0 {
order: 0;
}
}
@media (min-width: 1880px) {
.t-col-xxl-12 {
display: block;
flex: 0 0 100%;
max-width: 100%;
}
.t-col-xxl-push-12 {
left: 100%;
}
.t-col-xxl-pull-12 {
right: 100%;
}
.t-col-xxl-offset-12 {
margin-left: 100%;
}
.t-col-xxl-order-12 {
order: 12;
}
.t-col-xxl-11 {
display: block;
flex: 0 0 91.66666667%;
max-width: 91.66666667%;
}
.t-col-xxl-push-11 {
left: 91.66666667%;
}
.t-col-xxl-pull-11 {
right: 91.66666667%;
}
.t-col-xxl-offset-11 {
margin-left: 91.66666667%;
}
.t-col-xxl-order-11 {
order: 11;
}
.t-col-xxl-10 {
display: block;
flex: 0 0 83.33333333%;
max-width: 83.33333333%;
}
.t-col-xxl-push-10 {
left: 83.33333333%;
}
.t-col-xxl-pull-10 {
right: 83.33333333%;
}
.t-col-xxl-offset-10 {
margin-left: 83.33333333%;
}
.t-col-xxl-order-10 {
order: 10;
}
.t-col-xxl-9 {
display: block;
flex: 0 0 75%;
max-width: 75%;
}
.t-col-xxl-push-9 {
left: 75%;
}
.t-col-xxl-pull-9 {
right: 75%;
}
.t-col-xxl-offset-9 {
margin-left: 75%;
}
.t-col-xxl-order-9 {
order: 9;
}
.t-col-xxl-8 {
display: block;
flex: 0 0 66.66666667%;
max-width: 66.66666667%;
}
.t-col-xxl-push-8 {
left: 66.66666667%;
}
.t-col-xxl-pull-8 {
right: 66.66666667%;
}
.t-col-xxl-offset-8 {
margin-left: 66.66666667%;
}
.t-col-xxl-order-8 {
order: 8;
}
.t-col-xxl-7 {
display: block;
flex: 0 0 58.33333333%;
max-width: 58.33333333%;
}
.t-col-xxl-push-7 {
left: 58.33333333%;
}
.t-col-xxl-pull-7 {
right: 58.33333333%;
}
.t-col-xxl-offset-7 {
margin-left: 58.33333333%;
}
.t-col-xxl-order-7 {
order: 7;
}
.t-col-xxl-6 {
display: block;
flex: 0 0 50%;
max-width: 50%;
}
.t-col-xxl-push-6 {
left: 50%;
}
.t-col-xxl-pull-6 {
right: 50%;
}
.t-col-xxl-offset-6 {
margin-left: 50%;
}
.t-col-xxl-order-6 {
order: 6;
}
.t-col-xxl-5 {
display: block;
flex: 0 0 41.66666667%;
max-width: 41.66666667%;
}
.t-col-xxl-push-5 {
left: 41.66666667%;
}
.t-col-xxl-pull-5 {
right: 41.66666667%;
}
.t-col-xxl-offset-5 {
margin-left: 41.66666667%;
}
.t-col-xxl-order-5 {
order: 5;
}
.t-col-xxl-4 {
display: block;
flex: 0 0 33.33333333%;
max-width: 33.33333333%;
}
.t-col-xxl-push-4 {
left: 33.33333333%;
}
.t-col-xxl-pull-4 {
right: 33.33333333%;
}
.t-col-xxl-offset-4 {
margin-left: 33.33333333%;
}
.t-col-xxl-order-4 {
order: 4;
}
.t-col-xxl-3 {
display: block;
flex: 0 0 25%;
max-width: 25%;
}
.t-col-xxl-push-3 {
left: 25%;
}
.t-col-xxl-pull-3 {
right: 25%;
}
.t-col-xxl-offset-3 {
margin-left: 25%;
}
.t-col-xxl-order-3 {
order: 3;
}
.t-col-xxl-2 {
display: block;
flex: 0 0 16.66666667%;
max-width: 16.66666667%;
}
.t-col-xxl-push-2 {
left: 16.66666667%;
}
.t-col-xxl-pull-2 {
right: 16.66666667%;
}
.t-col-xxl-offset-2 {
margin-left: 16.66666667%;
}
.t-col-xxl-order-2 {
order: 2;
}
.t-col-xxl-1 {
display: block;
flex: 0 0 8.33333333%;
max-width: 8.33333333%;
}
.t-col-xxl-push-1 {
left: 8.33333333%;
}
.t-col-xxl-pull-1 {
right: 8.33333333%;
}
.t-col-xxl-offset-1 {
margin-left: 8.33333333%;
}
.t-col-xxl-order-1 {
order: 1;
}
.t-col-xxl-0 {
display: none;
}
.t-col-push-0 {
left: auto;
}
.t-col-pull-0 {
right: auto;
}
.t-col-xxl-push-0 {
left: auto;
}
.t-col-xxl-pull-0 {
right: auto;
}
.t-col-xxl-offset-0 {
margin-left: 0;
}
.t-col-xxl-order-0 {
order: 0;
}
}
.t-layout {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-layout,
.t-layout__direction-vertical {
display: flex;
flex-direction: column;
background: var(--td-bg-color-page);
flex: auto;
}
.t-layout--with-sider,
.t-layout__direction-horizontal {
flex-direction: row;
}
.t-layout__header {
height: var(--td-comp-size-xxxl);
background-color: var(--td-bg-color-container);
}
.t-layout__content {
flex: auto;
}
.t-layout__sider {
position: relative;
transition: all 0.2s;
background: var(--td-bg-color-container);
width: 232px;
}
.t-layout__footer {
color: var(--td-text-color-placeholder);
padding: 24px;
}
.t-divider {
margin: 0;
padding: 0;
list-style: none;
font: var(--td-font-body-medium);
margin: var(--td-comp-margin-xxl) 0;
border-top: 1px solid var(--td-border-level-1-color);
color: var(--td-text-color-primary);
box-sizing: border-box;
}
.t-divider--dashed {
border-top-style: dashed;
}
.t-divider--horizontal {
width: 100%;
display: flex;
}
.t-divider--vertical {
border-top: 0;
display: inline-block;
margin: 0 var(--td-comp-margin-m);
border-left: 1px solid var(--td-border-level-1-color);
height: 0.9em;
vertical-align: middle;
}
.t-divider--with-text {
display: flex;
border-top: 0;
white-space: nowrap;
align-items: center;
}
.t-divider--with-text .t-divider__inner-text:not(:empty) {
padding: 0 1em;
display: inline-block;
}
.t-divider--with-text::before,
.t-divider--with-text::after {
content: "";
width: 50%;
border-top: 1px solid var(--td-border-level-1-color);
}
.t-divider--with-text-left::before {
width: 5%;
}
.t-divider--with-text-left::after {
width: 95%;
}
.t-divider--with-text-right::before {
width: 95%;
}
.t-divider--with-text-right::after {
width: 5%;
}
.t-divider--dashed::before,
.t-divider--dashed::after {
border-top: 1px dashed var(--td-border-level-1-color);
}
.t-divider--vertical.t-divider--dashed {
border-left: 1px dashed var(--td-border-level-1-color);
}
.t-space {
display: inline-flex;
}
.t-space .t-space-item {
width: inherit;
}
.t-space-align-start {
align-items: flex-start;
}
.t-space-align-end {
align-items: flex-end;
}
.t-space-align-baseline {
align-items: baseline;
}
.t-space-align-center {
align-items: center;
}
.t-space-vertical {
flex-direction: column;
}
.t-space-vertical > .t-space-item-separator {
width: 100%;
}
.t-space.t-space--break-line {
flex-wrap: wrap;
}
.t-space.t-space--polyfill {
display: flex;
}
.t-space.t-space--polyfill.t-space-horizontal,
.t-space.t-space--polyfill.t-space--break-line {
margin-left: calc(-1 * var(--td-space-column-gap, 0));
}
.t-space.t-space--polyfill.t-space-vertical,
.t-space.t-space--polyfill.t-space--break-line {
margin-top: calc(-1 * var(--td-space-row-gap, 0));
}
.t-space.t-space--polyfill.t-space-horizontal > *,
.t-space.t-space--polyfill.t-space--break-line > * {
margin-left: var(--td-space-column-gap);
}
.t-space.t-space--polyfill.t-space-vertical > *,
.t-space.t-space--polyfill.t-space--break-line > * {
margin-top: var(--td-space-row-gap);
}
.t-descriptions {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-descriptions__header {
color: var(--td-text-color-primary);
font: var(--td-font-title-medium);
margin-bottom: var(--td-comp-margin-m);
font-weight: 600;
}
.t-descriptions__body {
border-collapse: collapse;
font: var(--td-font-body-medium);
width: 100%;
}
.t-descriptions__body.t-size-l > tbody > tr > td {
padding: var(--td-comp-paddingTB-l) 0;
}
.t-descriptions__body.t-size-m > tbody > tr > td {
padding: var(--td-comp-paddingTB-m) 0;
}
.t-descriptions__body.t-size-s > tbody > tr > td {
padding: var(--td-comp-paddingTB-s) 0;
}
.t-descriptions__body .t-descriptions__label {
color: var(--td-text-color-placeholder);
}
.t-descriptions__body--fixed {
table-layout: fixed;
}
.t-descriptions__body--border > tbody > tr > td {
border: 1px solid var(--td-component-border);
}
.t-descriptions__body--border.t-size-l > tbody > tr > td {
padding: var(--td-comp-paddingTB-l);
}
.t-descriptions__body--border.t-size-m > tbody > tr > td {
padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l);
}
.t-descriptions__body--border.t-size-s > tbody > tr > td {
padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingLR-l);
}
.t-descriptions__body--border .t-descriptions__label {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-descriptions__body--border .t-descriptions__label:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-affix {
position: fixed;
z-index: 500;
}
.content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content {
margin-bottom: var(--td-comp-margin-s);
}
.content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow {
margin-bottom: var(--td-comp-margin-l);
}
.content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content {
margin-top: var(--td-comp-margin-s);
}
.content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow {
margin-top: var(--td-comp-margin-l);
}
.content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content {
margin-right: var(--td-comp-margin-s);
}
.content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow {
margin-right: var(--td-comp-margin-l);
}
.content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--text {
max-width: 480px;
}
.content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content {
margin-left: var(--td-comp-margin-s);
}
.content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow {
margin-left: var(--td-comp-margin-l);
}
.content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--text {
max-width: 480px;
}
.t-popup {
font: var(--td-font-body-medium);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
color: var(--td-text-color-primary);
display: inline-block;
z-index: 5500;
}
.t-popup__content {
position: relative;
background: var(--td-bg-color-container);
box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
border-radius: var(--td-radius-medium);
padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
font-size: var(--td-font-size-body-medium);
line-height: var(--td-line-height-body-medium);
box-sizing: border-box;
word-break: break-all;
}
.t-popup__arrow {
position: absolute;
z-index: 1;
width: 8px;
height: 8px;
}
.t-popup__arrow::before {
position: absolute;
content: "";
width: 8px;
height: 8px;
transform: rotate(45deg);
background: var(--td-bg-color-container);
}
.t-popup[data-popper-placement^="top"] .t-popup__content {
margin-bottom: var(--td-comp-margin-s);
}
.t-popup[data-popper-placement^="top"] .t-popup__content--arrow {
margin-bottom: var(--td-comp-margin-l);
}
.t-popup[data-popper-placement^="bottom"] .t-popup__content {
margin-top: var(--td-comp-margin-s);
}
.t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow {
margin-top: var(--td-comp-margin-l);
}
.t-popup[data-popper-placement^="left"] .t-popup__content {
margin-right: var(--td-comp-margin-s);
}
.t-popup[data-popper-placement^="left"] .t-popup__content--arrow {
margin-right: var(--td-comp-margin-l);
}
.t-popup[data-popper-placement^="left"] .t-popup__content--text {
max-width: 480px;
}
.t-popup[data-popper-placement^="right"] .t-popup__content {
margin-left: var(--td-comp-margin-s);
}
.t-popup[data-popper-placement^="right"] .t-popup__content--arrow {
margin-left: var(--td-comp-margin-l);
}
.t-popup[data-popper-placement^="right"] .t-popup__content--text {
max-width: 480px;
}
.t-popup[data-popper-placement^="top"] .t-popup__arrow::before {
border-top-left-radius: 100%;
box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom);
}
.t-popup[data-popper-placement="top-start"] .t-popup__arrow {
left: 8px;
}
.t-popup[data-popper-placement="top"] .t-popup__arrow {
left: 50%;
margin-left: calc(-8px / 2);
}
.t-popup[data-popper-placement="top-end"] .t-popup__arrow {
left: calc(100% - 8px * 2);
}
.t-popup[data-popper-placement^="bottom"] .t-popup__arrow {
top: calc(-8px / 2);
}
.t-popup[data-popper-placement^="bottom"] .t-popup__arrow::before {
border-bottom-right-radius: 100%;
box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right);
}
.t-popup[data-popper-placement="bottom-start"] .t-popup__arrow {
left: 8px;
}
.t-popup[data-popper-placement="bottom"] .t-popup__arrow {
left: 50%;
margin-left: calc(-8px / 2);
}
.t-popup[data-popper-placement="bottom-end"] .t-popup__arrow {
left: calc(100% - 8px * 2);
}
.t-popup[data-popper-placement^="left"] .t-popup__arrow {
right: calc(-8px / 2);
}
.t-popup[data-popper-placement^="left"] .t-popup__arrow::before {
box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top);
}
.t-popup[data-popper-placement="left-start"] .t-popup__arrow {
top: 8px;
}
.t-popup[data-popper-placement="left"] .t-popup__arrow {
top: 50%;
margin-top: calc(-8px / 2);
}
.t-popup[data-popper-placement="left-end"] .t-popup__arrow {
top: calc(100% - 8px * 2);
}
.t-popup[data-popper-placement^="right"] .t-popup__arrow {
left: calc(-8px / 2);
}
.t-popup[data-popper-placement^="right"] .t-popup__arrow::before {
box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom);
}
.t-popup[data-popper-placement="right-start"] .t-popup__arrow {
top: 8px;
}
.t-popup[data-popper-placement="right"] .t-popup__arrow {
top: 50%;
margin-top: calc(-8px / 2);
}
.t-popup[data-popper-placement="right-end"] .t-popup__arrow {
top: calc(100% - 8px * 2);
}
.t-popup--animation-enter,
.t-popup--animation-enter-from,
.t-popup--animation-exiting,
.t-popup--animation-leave-to {
opacity: 0;
visibility: hidden;
}
.t-popup--animation-enter-to,
.t-popup--animation-entering,
.t-popup--animation-leave-from,
.t-popup--animation-leave {
opacity: 1;
visibility: visible;
transform: none;
}
.t-popup--animation-enter-active {
transition: opacity 0.2s linear;
}
.t-popup--animation-leave-active {
transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-popup--animation-expand-enter-active[data-popper-placement^=top] {
animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear;
}
.t-popup--animation-expand-leave-active[data-popper-placement^=top] {
animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1);
}
@keyframes t-popup-animation-expand-in-top {
0% {
clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%);
}
100% {
clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
}
}
@keyframes t-popup-animation-expand-out-top {
0% {
clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
}
100% {
clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%);
}
}
.t-popup--animation-expand-enter-active[data-popper-placement^=bottom] {
animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear;
}
.t-popup--animation-expand-leave-active[data-popper-placement^=bottom] {
animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1);
}
@keyframes t-popup-animation-expand-in-bottom {
0% {
clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0);
}
100% {
clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
}
}
@keyframes t-popup-animation-expand-out-bottom {
0% {
clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%);
}
100% {
clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0);
}
}
.t-anchor {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
--td-anchor-space-base: var(--td-size-6);
position: relative;
background: var(--td-bg-color-container);
width: 200px;
color: var(--td-text-color-primary);
font: var(--td-font-body-medium);
}
.t-anchor .t-is-active > a {
color: var(--td-brand-color);
}
.t-anchor__line {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background-color: var(--td-component-stroke);
cursor: pointer;
}
.t-anchor__line-cursor-wrapper {
position: absolute;
display: block;
height: 0;
opacity: 0;
transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9);
}
.t-anchor__line-cursor-wrapper .t-anchor__line-cursor {
width: 1px;
height: 100%;
background-color: var(--td-brand-color);
}
.t-anchor__item {
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l);
--level: 1;
padding-left: calc(var(--level) * var(--td-anchor-space-base));
display: flex;
flex-direction: column;
}
.t-anchor__item.t-is-active {
font-weight: 500;
}
.t-anchor__item-link {
display: inline-block;
position: relative;
overflow: hidden;
word-break: break-all;
color: var(--td-text-color-primary);
text-decoration: none;
text-align: justify;
}
.t-anchor a {
transition: color 0.2s linear;
}
.t-anchor a:hover {
color: var(--td-brand-color);
cursor: pointer;
}
.t-anchor a:active {
color: var(--td-brand-color-active);
}
.t-anchor.t-size-s {
width: 120px;
}
.t-anchor.t-size-l {
width: 320px;
}
.t-anchor__target {
cursor: pointer;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
.t-anchor__target .t-anchor__copy {
display: none;
margin: 0 0 0 var(--td-comp-margin-xs);
}
.t-anchor__target:hover .t-anchor__copy {
display: inline-block;
}
.t-anchor__target:target::after {
display: inline-block;
content: "";
width: 6px;
height: 6px;
border-radius: var(--td-radius-circle);
background-color: var(--td-brand-color);
vertical-align: middle;
animation: fadeOut 2s 2s linear 1;
animation-fill-mode: forwards;
}
.t-tooltip .t-popup__content {
display: inline-block;
border: 0;
z-index: 5600;
margin-bottom: 1px;
max-width: 480px;
word-break: break-word;
box-sizing: border-box;
border-radius: var(--td-radius-medium);
color: var(--td-text-color-primary);
}
.t-tooltip--default .t-popup__content {
color: var(--td-text-color-anti);
background: var(--td-gray-color-13);
box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9);
}
.t-tooltip--default[data-popper-placement^="left"] .t-popup__arrow:before {
box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9);
}
.t-tooltip--default[data-popper-placement^="right"] .t-popup__arrow:before {
box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9);
}
.t-tooltip--default[data-popper-placement^="top"] .t-popup__arrow:before {
box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9);
}
.t-tooltip--default[data-popper-placement^="bottom"] .t-popup__arrow:before {
box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9);
}
.t-tooltip--primary .t-popup__content {
color: var(--td-brand-color);
background: var(--td-brand-color-light);
}
.t-tooltip--success .t-popup__content {
color: var(--td-success-color);
background: var(--td-success-color-light);
}
.t-tooltip--danger .t-popup__content {
color: var(--td-error-color);
background: var(--td-error-color-light);
}
.t-tooltip--warning .t-popup__content {
color: var(--td-warning-color);
background: var(--td-warning-color-light);
}
.t-tooltip .t-popup__arrow {
background: inherit;
height: auto;
}
.t-tooltip .t-popup__arrow::before {
background: inherit;
}
.t-tooltip--noshadow .t-popup__content,
.t-tooltip--noshadow[data-popper-placement] .t-popup__arrow:before {
box-shadow: none;
}
@keyframes changeColor {
from {
color: var(--td-brand-color-hover);
}
to {
color: var(--td-brand-color-active);
}
}
.t-breadcrumb {
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
font: var(--td-font-body-medium);
display: flex;
align-items: center;
}
.t-breadcrumb__separator {
margin: 0 var(--td-comp-margin-xs);
display: flex;
align-items: center;
}
.t-breadcrumb__separator .t-icon {
color: var(--td-text-color-placeholder);
}
.t-breadcrumb__item {
display: flex;
align-items: center;
color: var(--td-text-color-placeholder);
text-decoration: none;
}
.t-breadcrumb__item.t-is-current {
color: var(--td-text-color-primary);
}
.t-breadcrumb__item.t-is-current .t-icon {
color: var(--td-text-color-placeholder);
}
.t-breadcrumb__item:last-child {
color: var(--td-text-color-primary);
}
.t-breadcrumb__item:last-child .t-breadcrumb__separator {
display: none;
}
.t-breadcrumb__item .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-breadcrumb__item .t-link {
color: inherit;
text-decoration: none;
}
.t-breadcrumb__item .t-link:hover {
color: var(--td-brand-color);
}
.t-breadcrumb__item .t-is-disabled {
cursor: not-allowed;
}
.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner {
color: var(--td-text-color-disabled);
}
.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:hover {
color: var(--td-text-color-disabled);
cursor: not-allowed;
}
.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:active {
animation: none;
}
.t-breadcrumb__item--arrow {
margin: 0 var(--td-comp-margin-xs);
line-height: 0;
color: var(--td-text-color-placeholder);
display: inline-block;
vertical-align: middle;
}
.t-breadcrumb__item--slash {
margin: 0 var(--td-comp-margin-xs);
line-height: 0;
color: var(--td-text-color-placeholder);
display: inline-block;
vertical-align: middle;
}
.t-breadcrumb__inner {
font: var(--td-font-body-medium);
word-break: break-all;
display: inline-block;
vertical-align: middle;
}
.t-breadcrumb__inner .t-icon {
margin: 0 var(--td-comp-margin-xs);
}
.t-breadcrumb__select {
position: relative;
}
.t-breadcrumb__select:hover .t-breadcrumb__option {
display: block;
}
.t-breadcrumb__select-item:hover .t-icon {
color: var(--td-brand-color);
}
.t-breadcrumb__option {
display: none;
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
max-width: 120px;
background: var(--td-bg-color-container);
box-shadow: var(--td-shadow-2);
z-index: 20;
}
.t-breadcrumb__option-item {
padding: 8px;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.t-breadcrumb__option-item:hover {
color: var(--td-brand-color);
}
.t-breadcrumb__option-item.t-is-active {
color: var(--td-brand-color);
}
.t-breadcrumb__inner-msg {
display: none;
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 300px;
padding: 8px;
color: var(--td-text-color-primary);
background: var(--td-bg-color-container);
border-radius: calc(var(--td-radius-default) * 0.5);
box-shadow: var(--td-shadow-2);
z-index: 20;
}
.t-breadcrumb__inner-msg::before {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -4px;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 6px 0;
border-color: var(--td-bg-color-container) transparent transparent transparent;
z-index: 20;
}
.t-breadcrumb--text-overflow {
position: relative;
display: flex;
align-items: center;
}
.t-breadcrumb--text-overflow:hover .t-breadcrumb__inner-msg {
display: block;
}
.t-breadcrumb--text-overflow .t-breadcrumb__inner {
max-width: 120px;
display: flex;
align-items: center;
transition: color 0.2s linear;
}
.t-breadcrumb--text-overflow .t-breadcrumb__inner-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.t-breadcrumb--text-overflow .t-breadcrumb__inner:hover {
color: var(--td-brand-color);
cursor: pointer;
}
.t-breadcrumb--text-overflow .t-breadcrumb__inner:active {
animation: 0.2s linear changeColor;
}
.t-dropdown {
font: var(--td-font-body-medium);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
background-color: var(--td-bg-color-container);
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-primary);
position: relative;
box-shadow: var(--td-shadow-2);
border: 0.5px solid var(--td-component-border);
border-radius: var(--td-radius-medium);
}
.t-dropdown__menu {
display: flex;
justify-content: flex-start;
flex-direction: column;
border-radius: var(--td-radius-medium);
padding: var(--td-pop-padding-m);
gap: 2px;
overflow-y: auto;
overflow-x: hidden;
}
@-moz-document url-prefix() {
.t-dropdown__menu {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-dropdown__menu::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.t-dropdown__menu::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 15px;
}
.t-dropdown__menu::-webkit-scrollbar-thumb:vertical:hover,
.t-dropdown__menu::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-dropdown__menu .t-divider {
margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s);
color: var(--td-brand-color-light);
width: calc(100% - var(--td-comp-margin-s) * 2);
}
.t-dropdown__menu .t-dropdown__item-direction {
margin: 0 0 0 var(--td-comp-margin-s);
}
.t-dropdown__menu--overflow .t-dropdown__submenu-wrapper--right {
left: calc(100% - 14px);
}
.t-dropdown__menu--overflow .t-dropdown__submenu-wrapper--left {
right: calc(100% - 14px);
}
.t-dropdown__submenu {
background-color: var(--td-bg-color-container);
box-shadow: var(--td-shadow-2);
border-radius: var(--td-radius-medium);
border: 0.5px solid var(--td-component-border);
z-index: 1100;
position: absolute;
padding: var(--td-pop-padding-m);
display: none;
overflow-y: auto;
overflow-x: visible;
}
@-moz-document url-prefix() {
.t-dropdown__submenu {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-dropdown__submenu::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.t-dropdown__submenu::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 15px;
}
.t-dropdown__submenu::-webkit-scrollbar-thumb:vertical:hover,
.t-dropdown__submenu::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-dropdown__submenu ul {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 2px;
}
.t-dropdown__submenu--disabled {
visibility: hidden;
}
.t-dropdown__submenu .t-dropdown__item-direction {
margin: 0 0 0 var(--td-comp-margin-s);
}
.t-dropdown__submenu-wrapper--right {
left: calc(100% - 6px);
}
.t-dropdown__submenu-wrapper--left {
right: calc(100% - 6px);
}
.t-dropdown__item {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border-radius: var(--td-radius-default);
cursor: pointer;
user-select: none;
outline: none;
transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
white-space: nowrap;
display: flex;
align-items: center;
padding: calc(var(--td-comp-paddingTB-xs) - 1px) var(--td-comp-paddingLR-s);
--ripple-color: var(--td-bg-color-container-active);
}
.t-dropdown__item-icon {
display: flex;
color: currentcolor;
margin-right: var(--td-comp-margin-s);
font-size: var(--td-font-size-body-large);
}
.t-dropdown__item:hover > div > div {
display: flex;
}
.t-dropdown__item--disabled {
cursor: not-allowed;
}
.t-dropdown__item-content {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
max-width: 100%;
}
.t-dropdown__item-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.t-dropdown__item.t-dropdown__item--suffix .t-dropdown__item-sub-icon {
color: currentcolor;
font-size: var(--td-font-size-body-large);
flex-shrink: 0;
}
.t-dropdown__item--theme-default {
color: var(--td-text-color-primary);
}
.t-dropdown__item--theme-default:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-default:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-default.t-dropdown__item--active {
color: var(--td-brand-color);
background-color: var(--td-brand-color-light);
}
.t-dropdown__item--theme-default.t-dropdown__item--active:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-default.t-dropdown__item--active:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-default.t-dropdown__item--disabled {
color: var(--td-text-color-disabled);
}
.t-dropdown__item--theme-default.t-dropdown__item--disabled:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-default.t-dropdown__item--suffix:hover {
background-color: var(--td-brand-color-light);
color: var(--td-brand-color);
}
.t-dropdown__item--theme-success {
color: var(--td-success-color);
}
.t-dropdown__item--theme-success:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-success:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-success.t-dropdown__item--active {
background-color: var(--td-success-color-light);
}
.t-dropdown__item--theme-success.t-dropdown__item--active:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-success.t-dropdown__item--active:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-success.t-dropdown__item-disabled {
color: var(--td-text-color-disabled);
}
.t-dropdown__item--theme-success.t-dropdown__item-disabled:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-success.t-dropdown__item--suffix:hover {
background-color: var(--td-success-color-light);
}
.t-dropdown__item--theme-error {
color: var(--td-error-color);
}
.t-dropdown__item--theme-error:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-error:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-error.t-dropdown__item--active {
background-color: var(--td-error-color-light);
}
.t-dropdown__item--theme-error.t-dropdown__item--active:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-error.t-dropdown__item--active:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-error.t-dropdown__item--disabled {
color: var(--td-text-color-disabled);
}
.t-dropdown__item--theme-error.t-dropdown__item--disabled:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-error.t-dropdown__item--suffix:hover {
background-color: var(--td-error-color-light);
}
.t-dropdown__item--theme-warning {
color: var(--td-warning-color);
}
.t-dropdown__item--theme-warning:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-warning:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-warning.t-dropdown__item--active {
background-color: var(--td-warning-color-light);
}
.t-dropdown__item--theme-warning.t-dropdown__item--active:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-warning.t-dropdown__item--active:active {
background-color: var(--td-bg-color-container-active);
}
.t-dropdown__item--theme-warning.t-dropdown__item--disabled {
color: var(--td-text-color-disabled);
}
.t-dropdown__item--theme-warning.t-dropdown__item--disabled:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-dropdown__item--theme-warning.t-dropdown__item--suffix:hover {
background-color: var(--td-warning-color-light);
}
.t-tabs {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: var(--td-bg-color-container);
}
.t-tabs__header.t-is-left {
float: left;
}
.t-tabs__header.t-is-right {
float: right;
}
.t-tabs__header .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-tabs__nav {
position: relative;
overflow: hidden;
user-select: none;
}
.t-tabs__operations {
display: flex;
flex-direction: row;
position: absolute;
border-bottom: 1px solid var(--td-component-stroke);
background-color: var(--td-bg-color-container);
}
.t-tabs__operations--left {
left: 0;
z-index: 2;
}
.t-tabs__operations--right {
right: 0;
z-index: 2;
}
.t-tabs__operations--right .t-tabs__btn:first-child {
box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05);
}
.t-tabs__operations--right .t-tabs__nav-action {
display: flex;
align-items: center;
width: 100%;
flex: 1;
}
.t-tabs__btn {
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--td-bg-color-secondarycontainer);
border-left: 1px solid var(--td-component-stroke);
cursor: pointer;
color: var(--td-text-color-secondary);
font: var(--td-font-body-large);
transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1);
z-index: 1;
opacity: 1;
}
.t-tabs__btn:hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.t-tabs__btn.t-size-m {
height: var(--td-comp-size-xxl);
line-height: var(--td-comp-size-xxl);
}
.t-tabs__btn.t-size-l {
height: var(--td-comp-size-xxxxl);
line-height: var(--td-comp-size-xxxxl);
}
.t-tabs__btn--left {
border-right: 1px solid var(--td-component-stroke);
box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05);
}
.t-tabs__btn--left.fade-enter,
.t-tabs__btn--left.fade-enter-from,
.t-tabs__btn--left.fade-leave-to {
transform: translateX(-50px);
}
.t-tabs__btn--right.fade-enter,
.t-tabs__btn--right.fade-enter-from,
.t-tabs__btn--right.fade-leave-to {
transform: translateX(50px);
}
.t-tabs__nav-container {
position: relative;
}
.t-tabs__nav-container.t-is-top::after {
content: "";
width: 100%;
height: 1px;
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: 0;
background-color: var(--td-component-stroke);
}
.t-tabs__nav-container.t-is-bottom::after {
content: "";
width: 100%;
height: 1px;
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
background-color: var(--td-component-stroke);
}
.t-tabs__nav-container.t-is-left::after {
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: auto;
background-color: var(--td-component-stroke);
}
.t-tabs__nav-container.t-is-right::after {
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
background-color: var(--td-component-stroke);
}
.t-tabs__nav-container.t-is-addable {
margin-right: 40px;
}
.t-tabs__nav-container.t-tabs__nav--card::after {
content: "";
background-color: transparent;
}
.t-tabs__scroll-btn {
position: absolute;
z-index: 1;
width: 40px;
height: 100%;
display: block;
background-color: var(--td-bg-color-secondarycontainer);
text-align: center;
border-bottom: 1px solid var(--td-component-stroke);
cursor: pointer;
color: var(--td-text-color-secondary);
font: var(--td-font-body-large);
}
.t-tabs__scroll-btn.t-size-m {
height: var(--td-comp-size-xxl);
line-height: var(--td-comp-size-xxl);
}
.t-tabs__scroll-btn.t-size-l {
height: var(--td-comp-size-xxxxl);
line-height: var(--td-comp-size-xxxxl);
}
.t-tabs__nav-scroll {
position: relative;
display: inline-block;
display: flex;
flex: auto;
align-self: stretch;
overflow: hidden;
white-space: nowrap;
transform: translate(0);
z-index: 1;
}
.t-tabs__nav-wrap {
position: relative;
display: flex;
font-size: 0;
}
.t-tabs__nav-wrap.t-is-smooth {
transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1);
}
.t-tabs__nav-wrap.t-is-vertical {
flex-direction: column;
}
.t-tabs__bar {
position: absolute;
background-color: var(--td-brand-color);
z-index: 1;
transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1);
border-radius: var(--td-radius-small);
}
.t-tabs__bar.t-is-top {
bottom: 0;
left: 0;
height: 3px;
}
.t-tabs__bar.t-is-bottom {
top: 0;
left: 0;
height: 3px;
}
.t-tabs__bar.t-is-left {
top: 0;
right: 0;
width: 3px;
}
.t-tabs__bar.t-is-right {
top: 0;
left: 0;
width: 3px;
}
.t-tabs__nav-item {
display: inline-flex;
align-items: center;
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
position: relative;
overflow: hidden;
z-index: 0;
cursor: pointer;
flex-shrink: 0;
transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
--ripple-color: var(--td-bg-color-container-active);
}
.t-tabs__nav-item-wrapper {
display: flex;
align-items: center;
height: var(--td-comp-size-m);
padding: 0 var(--td-comp-paddingLR-s);
margin-left: var(--td-comp-margin-s);
margin-right: var(--td-comp-margin-s);
border-radius: var(--td-radius-default);
transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
--ripple-color: var(--td-bg-color-container-active);
}
.t-tabs__nav-item.t-size-l {
font: var(--td-font-body-large);
}
.t-tabs__nav-item.t-size-l .t-tabs__nav-item-wrapper {
height: var(--td-comp-size-xxl);
padding: 0 var(--td-comp-paddingLR-m);
}
.t-tabs__nav-item-text-wrapper {
position: relative;
display: flex;
align-items: center;
}
.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover .t-tabs__nav-item-wrapper {
background-color: var(--td-bg-color-container-hover);
}
.t-tabs__nav-item.t-is-left,
.t-tabs__nav-item.t-is-right {
display: flex;
align-items: center;
}
.t-tabs__nav-item.t-size-m {
height: var(--td-comp-size-xxl);
line-height: var(--td-comp-size-xxl);
}
.t-tabs__nav-item.t-size-l {
height: var(--td-comp-size-xxxxl);
line-height: var(--td-comp-size-xxxxl);
}
.t-tabs__nav-item.t-is-active {
color: var(--td-brand-color);
text-shadow: 0 0 0.3px currentcolor;
}
.t-tabs__nav-item.t-is-disabled {
color: var(--td-text-color-disabled);
cursor: not-allowed;
}
.t-tabs__nav-item > .remove-btn {
margin-left: var(--td-comp-margin-s);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.t-tabs__nav--card {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-tabs__nav--card.t-tabs__nav-item {
padding-right: var(--td-comp-paddingLR-l);
padding-left: var(--td-comp-paddingLR-l);
border-bottom: 1px solid var(--td-component-stroke);
}
.t-tabs__nav--card.t-tabs__nav-item::after {
display: none;
}
.t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.t-tabs__nav--card.t-tabs__nav-item:not(:first-of-type) {
border-left: 1px solid var(--td-component-stroke);
}
.t-tabs__nav--card.t-tabs__nav-item:last-of-type {
border-right: 1px solid var(--td-component-stroke);
}
.t-tabs__nav--card.t-tabs__nav-item.t-is-active {
color: var(--td-brand-color);
background-color: var(--td-bg-color-container);
border-bottom-color: var(--td-bg-color-container);
}
.t-tabs__nav--card.t-tabs__nav-item.t-size-l {
padding-left: var(--td-comp-paddingLR-xl);
padding-right: var(--td-comp-paddingLR-xl);
}
.t-tabs__nav--card .t-icon-close {
color: var(--td-text-color-secondary);
transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
}
.t-tabs__nav--card .t-icon-close:hover {
color: var(--td-text-color-primary);
}
.t-tabs__content {
overflow: hidden;
position: relative;
}
.t-tab-panel.t-is-hidden {
display: none;
}
a.t-menu__item {
text-decoration: none;
color: unset;
}
a.t-menu__item:hover,
a.t-menu__item:active {
color: inherit;
}
.t-menu__logo > * {
margin-left: var(--td-comp-margin-xxl);
}
.t-head-menu {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
background-color: var(--td-bg-color-container);
}
.t-head-menu__inner {
display: flex;
height: var(--td-comp-size-xxxl);
}
.t-head-menu__inner li + li {
margin-left: var(--td-comp-margin-s);
}
.t-head-menu__inner .t-menu:first-child {
margin-left: var(--td-comp-margin-xxl);
}
.t-head-menu .t-menu__logo:not(:empty) {
height: 100%;
margin-right: var(--td-comp-margin-xxxl);
}
.t-head-menu .t-menu {
flex: 1;
display: flex;
align-items: center;
}
.t-head-menu .t-menu__operations:not(:empty) {
position: relative;
display: flex;
align-items: center;
height: var(--td-comp-size-xxxl);
line-height: 64px;
text-align: right;
margin-right: var(--td-comp-margin-s);
overflow: hidden;
}
.t-head-menu .t-menu__operations-icon {
width: var(--td-comp-size-m);
height: var(--td-comp-size-m);
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
line-height: var(--td-comp-size-m);
box-sizing: border-box;
}
.t-head-menu .t-submenu > .t-menu__item {
overflow: unset;
}
.t-head-menu .t-submenu > .t-menu__item::before {
content: "";
display: block;
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 20px;
}
.t-head-menu .t-menu__item {
height: var(--td-comp-size-m);
line-height: var(--td-comp-size-m);
padding: 0 var(--td-comp-paddingLR-l);
justify-content: center;
transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
gap: var(--td-comp-margin-m);
}
.t-head-menu__submenu {
border-top: 1px solid var(--td-component-stroke);
padding-left: 0;
}
.t-default-menu {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 232px;
display: inline-block;
background: var(--td-bg-color-container);
transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
white-space: nowrap;
}
.t-default-menu .t-menu__item {
color: var(--td-text-color-secondary);
}
.t-default-menu.t-is-collapsed {
width: 64px;
}
.t-default-menu.t-is-collapsed .t-menu__logo > * {
margin-left: var(--td-comp-margin-l);
}
.t-default-menu.t-is-collapsed .t-menu .t-menu__item {
padding: 0 14px;
justify-content: center;
}
.t-default-menu.t-is-collapsed .t-menu .t-menu__item .t-menu__item-link {
margin-left: 0;
opacity: 0;
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.t-default-menu.t-is-collapsed .t-fake-arrow {
display: none;
}
.t-default-menu.t-is-collapsed .t-menu__item {
text-overflow: initial;
}
.t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened {
color: var(--td-brand-color);
background-color: var(--td-brand-color-light);
}
.t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon {
color: var(--td-brand-color);
}
.t-default-menu.t-is-collapsed .t-menu__item.t-menu__item--plain::after {
content: "";
}
.t-default-menu.t-is-collapsed .t-menu__item span {
display: none;
}
.t-default-menu.t-is-collapsed .t-menu__item .t-icon {
margin-right: initial;
}
.t-default-menu.t-is-collapsed .t-submenu-icon {
display: none;
}
.t-default-menu.t-is-collapsed .t-submenu > .t-menu__item {
min-width: initial;
}
.t-default-menu.t-is-collapsed .t-submenu > .t-menu__item::after {
content: "";
display: block;
position: absolute;
right: -20px;
top: 0;
bottom: 0;
width: 20px;
}
.t-default-menu.t-is-collapsed .t-menu-group:first-child .t-menu-group__title {
display: none;
}
.t-default-menu.t-is-collapsed .t-menu-group:first-child .t-menu-group__title + * {
margin-top: 0;
}
.t-default-menu.t-is-collapsed .t-menu-group__title {
padding: 0;
font-size: 0;
}
.t-default-menu.t-is-collapsed .t-menu-group__title::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 1px;
width: 20px;
background: var(--td-component-stroke);
}
.t-default-menu.t-is-collapsed .t-menu__operations {
text-align: center;
}
.t-default-menu.t-is-collapsed .t-menu__operations-icon {
display: block;
}
.t-default-menu.t-is-collapsed .t-menu__log > * {
margin: 0 auto;
}
.t-default-menu__inner {
display: flex;
flex-direction: column;
height: 100%;
}
.t-default-menu__inner .t-menu__logo:not(:empty) {
box-sizing: border-box;
width: 100%;
height: var(--td-comp-size-xxxl);
border-bottom: 1px solid var(--td-component-stroke);
}
.t-default-menu__inner .t-menu {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s);
position: relative;
flex: 1;
}
.t-default-menu__inner .t-menu--scroll {
overflow-y: auto;
overflow-x: hidden;
}
@-moz-document url-prefix() {
.t-default-menu__inner .t-menu--scroll {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-default-menu__inner .t-menu--scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb:vertical:hover,
.t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-default-menu__inner .t-menu > *:not(.t-menu-group):not(:first-child) {
margin-top: var(--td-comp-margin-xs);
}
.t-default-menu__inner .t-menu .t-menu-group > *:not(:first-child),
.t-default-menu__inner .t-menu .t-menu__sub > *:not(:first-child),
.t-default-menu__inner .t-menu .t-submenu > *:not(:first-child) {
margin-top: var(--td-comp-margin-xs);
}
.t-default-menu__inner .t-menu-group__title {
position: relative;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l);
color: var(--td-text-color-placeholder);
font-size: var(--td-font-body-small);
box-sizing: border-box;
}
.t-default-menu .t-submenu {
position: relative;
}
.t-default-menu .t-menu__operations:not(:empty) {
width: 100%;
position: relative;
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
top: 0;
left: 0;
text-align: left;
border-top: solid 1px var(--td-component-stroke);
box-sizing: border-box;
}
.t-default-menu .t-menu__operations-icon {
width: 32px;
height: 32px;
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
cursor: pointer;
color: var(--td-text-color-primary);
box-sizing: border-box;
}
.t-default-menu .t-menu__item.t-is-opened {
color: var(--td-text-color-primary);
background-color: unset;
}
.t-default-menu .t-menu__item.t-is-opened .t-icon {
color: var(--td-text-color-primary);
}
.t-default-menu .t-menu__sub {
padding: 0;
overflow: hidden;
}
.t-default-menu .t-menu__sub .t-menu__item {
padding-left: var(--padding-left, 32px);
}
.t-default-menu .t-slide-down-enter-active .t-menu__sub {
height: 100%;
}
.t-default-menu .t-menu__item {
position: relative;
padding: 0 10px 0 16px;
height: var(--td-comp-size-l);
line-height: var(--td-comp-size-l);
border-bottom: 0;
text-align: left;
border-radius: var(--td-radius-default);
transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1);
box-sizing: border-box;
}
.t-default-menu .t-menu__item .t-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-right: var(--td-comp-margin-s);
}
.t-default-menu .t-menu__item .t-fake-arrow {
margin-left: auto;
min-width: 16px;
}
.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) {
color: var(--td-brand-color);
background-color: var(--td-brand-color-light);
}
.t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) .t-icon {
color: var(--td-brand-color);
}
.t-default-menu .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) {
background: var(--td-bg-color-secondarycontainer-hover);
}
.t-default-menu.t-menu--dark {
background: var(--td-gray-color-13);
}
.t-default-menu.t-menu--dark .t-menu__item {
color: var(--td-font-white-2);
}
.t-default-menu.t-menu--dark .t-menu__logo:not(:empty) {
border-bottom-color: var(--td-gray-color-10);
}
.t-default-menu.t-menu--dark .t-menu__operations:not(:empty) {
border-top-color: var(--td-gray-color-10);
}
.t-default-menu.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) {
background-color: var(--td-gray-color-10);
}
.t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) {
color: var(--td-text-color-anti);
background-color: var(--td-brand-color);
}
.t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) .t-icon {
color: var(--td-text-color-anti);
}
.t-default-menu.t-menu--dark .t-menu__item.t-is-opened.t-is-active {
background-color: transparent;
}
.t-default-menu.t-menu--dark .t-menu-group__title {
color: var(--td-font-white-3);
}
.t-default-menu.t-menu--dark.t-is-collapsed .t-menu-group__title:after {
background-color: var(--td-gray-color-10);
}
.t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened {
background-color: var(--td-brand-color);
color: var(--td-text-color-anti);
}
.t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon {
color: var(--td-text-color-anti);
}
.t-menu {
color: var(--td-text-color-primary);
font: var(--td-font-body-medium);
list-style: none;
padding: 0;
margin: 0;
}
.t-menu--dark {
color: var(--td-font-white-2);
}
.t-menu__logo:not(:empty) {
display: flex;
align-items: center;
}
.t-menu .t-submenu {
position: relative;
}
.t-menu .t-submenu.t-is-active > .t-menu__item {
color: var(--td-gray-color-13);
}
.t-menu .t-submenu.t-is-active > .t-menu__item .t-icon {
color: var(--td-gray-color-13);
}
.t-menu .t-submenu .t-submenu-icon {
width: 16px;
height: 16px;
}
.t-menu .t-submenu.t-is-opened .t-submenu-icon {
transform: scaleY(-1);
}
.t-menu__spacer::before {
content: "";
display: block;
position: absolute;
z-index: 1;
}
.t-menu__spacer--left::before {
left: -16px;
width: 16px;
top: 0;
bottom: 0;
}
.t-menu__spacer--top::before {
top: -20px;
left: 0;
right: 0;
height: 20px;
}
.t-menu__item {
position: relative;
display: flex;
align-items: center;
height: 40px;
line-height: 40px;
text-align: center;
color: var(--td-text-color-primary);
cursor: pointer;
text-overflow: ellipsis;
border-radius: var(--td-radius-default);
--ripple-color: var(--td-bg-color-container-active);
}
.t-menu__item ::selection {
background: transparent;
}
.t-menu__item-spacer {
overflow: unset;
}
.t-menu__item-spacer::before {
content: "";
display: block;
position: absolute;
z-index: 1;
}
.t-menu__item-spacer--right::before {
right: -16px;
width: 16px;
top: 0;
bottom: 0;
}
.t-menu__item-spacer--bottom::before {
bottom: -20px;
left: 0;
right: 0;
height: 20px;
}
.t-menu__item a {
color: unset;
text-decoration: none;
}
.t-menu__item a.t-menu__item-link {
color: unset;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.t-menu__item a.t-menu__item-link::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.t-menu__item.t-is-active {
color: var(--td-brand-color);
background-color: var(--td-brand-color-light);
}
.t-menu__item.t-is-opened {
color: var(--td-brand-color);
}
.t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
background-color: var(--td-bg-color-container-hover);
}
.t-menu__item.t-is-disabled {
color: var(--td-text-color-disabled);
cursor: not-allowed;
}
.t-menu__content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.t-menu--dark.t-head-menu {
background-color: var(--td-gray-color-13);
}
.t-menu--dark .t-menu__item {
color: var(--td-text-color-anti);
--ripple-color: var(--td-gray-color-11);
}
.t-menu--dark .t-menu__item.t-is-active {
color: var(--td-text-color-anti);
background-color: var(--td-brand-color);
}
.t-menu--dark .t-menu__item.t-is-opened {
color: var(--td-text-color-anti);
}
.t-menu--dark .t-menu__item.t-is-opened .t-icon {
color: var(--td-text-color-anti);
}
.t-menu--dark .t-menu__item.t-is-disabled {
color: var(--td-font-white-4);
}
.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
background-color: var(--td-gray-color-10);
}
.t-menu--dark .t-menu__popup {
background: var(--td-gray-color-13);
border: solid 0.5px var(--td-gray-color-10);
}
.t-menu--dark .t-menu__popup .t-menu__item {
color: var(--td-text-color-anti);
border-radius: var(--td-radius-default);
}
.t-menu--dark .t-menu__popup .t-menu__item.t-is-active {
color: var(--td-text-color-anti);
background-color: var(--td-brand-color);
}
.t-menu--dark .t-menu__popup .t-menu__item:hover:not(.t-is-active) {
background-color: var(--td-gray-color-10);
}
.t-menu--dark .t-head-menu__submenu {
border-top: 1px solid transparent;
}
.t-menu--dark .t-menu__operations-icon {
color: var(--td-bg-color-container);
}
.t-menu--dark .t-menu__operations-icon:hover {
background-color: var(--td-brand-color);
}
.t-menu__popup {
overflow: hidden;
background: var(--td-bg-color-container);
z-index: 1000;
border-radius: var(--td-radius-medium);
opacity: 0;
list-style: none;
padding: 0;
margin: 0;
}
.t-menu__popup.t-popup__content {
position: absolute;
}
.t-menu__popup-wrapper {
padding: var(--td-pop-padding-m);
height: 100%;
list-style: none;
margin: 0;
}
@-moz-document url-prefix() {
.t-menu__popup-wrapper {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-menu__popup-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.t-menu__popup-wrapper::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 15px;
}
.t-menu__popup-wrapper::-webkit-scrollbar-thumb:vertical:hover,
.t-menu__popup-wrapper::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-menu__popup .t-fake-arrow {
margin-left: auto;
}
.t-menu__popup .t-menu__item {
padding-left: var(--td-comp-paddingLR-l);
padding-right: var(--td-comp-paddingLR-l);
}
.t-menu__popup.t-is-vertical {
min-width: var(--popup-width, 160px);
}
.t-menu__popup.t-is-horizontal .t-menu__item {
white-space: nowrap;
}
.t-menu__popup.t-is-horizontal li + li {
margin-top: var(--td-comp-margin-xs);
}
.t-menu__popup.t-is-opened {
opacity: 1;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05);
overflow: visible;
}
.t-menu__popup .t-menu__item {
color: var(--td-text-color-primary);
height: var(--td-comp-size-s);
line-height: var(--td-comp-size-s);
}
.t-menu__popup .t-menu__item + .t-menu__item {
margin-left: 0;
}
.t-menu__popup .t-menu__item:hover:not(.t-is-active) {
background-color: var(--td-bg-color-container-hover);
}
.t-menu__popup .t-is-disabled {
color: var(--td-text-color-disabled);
}
.t-menu__operations-icon {
margin-right: var(--td-comp-margin-l);
border-radius: var(--td-radius-default);
color: var(--td-text-color-primary);
transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-menu__operations-icon:hover {
background-color: var(--td-brand-color-light);
}
.t-opacity-transition {
transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1);
}
.horizontal-collapse-transition .t-submenu__title .t-submenu__icon-arrow {
transition: 0.2s;
opacity: 0;
}
.t-menu__popup {
top: 0;
left: calc(100% - var(--td-pop-padding-m));
}
.t-menu__popup .t-menu__item:not(:first-child),
.t-menu__popup .t-submenu:not(:first-child) {
margin-top: var(--td-comp-margin-xxs);
}
.t-is-head-menu .t-menu__popup {
margin-top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-m)) / 2) !important;
}
.t-menu-is-nested .t-menu__popup {
margin-top: calc(0px - var(--td-pop-padding-m)) !important;
}
.input-readonly.t-is-readonly {
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-specialcomponent);
}
.input-readonly.t-is-readonly .t-input__inner {
cursor: pointer;
}
.input-disabled.t-is-disabled {
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
}
.input-disabled.t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
}
.input-disabled.t-is-disabled .t-input__inner {
cursor: not-allowed;
color: var(--td-text-color-disabled);
text-overflow: initial;
}
.input-disabled.t-is-disabled .t-input__inner::placeholder {
color: var(--td-text-color-disabled);
}
.input-disabled.t-is-disabled > .t-input__prefix .t-icon,
.input-disabled.t-is-disabled > .t-input__suffix .t-icon {
color: var(--td-text-color-disabled);
}
.input-disabled.t-is-disabled > .t-input__prefix .t-icon:hover,
.input-disabled.t-is-disabled > .t-input__suffix .t-icon:hover {
color: var(--td-text-color-disabled);
}
.t-tips {
font-size: var(--td-font-size-body-small);
}
.t-tips.t-is-default {
color: var(--td-text-color-placeholder);
}
.t-tips.t-is-error {
color: var(--td-error-color);
}
.t-tips.t-is-warning {
color: var(--td-warning-color);
}
.t-tips.t-is-success {
color: var(--td-success-color);
}
.t-input {
margin: 0;
padding: 0;
list-style: none;
position: relative;
height: var(--td-comp-size-m);
border-width: 1px;
border-style: solid;
border-radius: var(--td-radius-default);
border-color: var(--td-border-level-2-color);
padding: 0 var(--td-comp-paddingLR-s);
background-color: var(--td-bg-color-specialcomponent);
outline: none;
color: var(--td-text-color-primary);
font: var(--td-font-body-medium);
width: 100%;
box-sizing: border-box;
transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
display: flex;
align-items: center;
overflow: hidden;
}
.t-input:hover {
border-color: var(--td-brand-color);
}
.t-input:focus {
z-index: 1;
border-color: var(--td-brand-color);
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}
.t-input--borderless:not(.t-input--focused) {
border-color: transparent;
transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
}
.t-input--borderless:not(.t-input--focused):hover {
border-color: var(--td-component-border);
background-color: var(--td-bg-color-container-hover);
cursor: pointer;
}
.t-input--borderless:not(.t-input--focused).t-is-disabled {
border: none;
background-color: var(--td-bg-color-component-disabled);
}
.t-input--focused {
border-color: var(--td-brand-color);
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
z-index: 1;
}
.t-input :focus-visible {
outline: none;
}
.t-input__inner {
flex: 1;
border: none;
outline: none;
padding: 0;
max-width: 100%;
min-width: 0;
color: var(--td-text-color-primary);
font: inherit;
background-color: transparent;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-input__inner::placeholder {
color: var(--td-text-color-placeholder);
}
.t-input__inner:placeholder-shown {
text-overflow: ellipsis;
width: 100%;
}
.t-input__inner[type="password"]::-ms-reveal {
display: none;
}
.t-input__inner[type="search"]::-webkit-search-decoration,
.t-input__inner[type="search"]::-webkit-search-cancel-button,
.t-input__inner[type="search"]::-webkit-search-results-button,
.t-input__inner[type="search"]::-webkit-search-results-decoration {
appearance: none;
}
.t-input__inner.t-input--soft-hidden {
width: 0;
}
.t-input__extra {
font: var(--td-font-body-small);
color: var(--td-text-color-placeholder);
}
.t-input__status {
position: absolute;
right: -24px;
top: 0;
}
.t-input.t-input--suffix > span.t-input__clear {
opacity: 0;
visibility: hidden;
transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
}
.t-input.t-input--suffix:hover > span.t-input__clear {
opacity: 1;
visibility: visible;
}
.t-input.t-is-success {
border-color: var(--td-success-color);
}
.t-input.t-is-success:focus {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-input.t-is-success.t-input--focused {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-input.t-is-success > .t-input__extra {
color: var(--td-success-color);
}
.t-input.t-is-warning {
border-color: var(--td-warning-color);
}
.t-input.t-is-warning:focus {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-input.t-is-warning.t-input--focused {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-input.t-is-warning > .t-input__extra {
color: var(--td-warning-color);
}
.t-input.t-is-error {
border-color: var(--td-error-color);
}
.t-input.t-is-error:focus {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-input.t-is-error.t-input--focused {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-input.t-is-error > .t-input__extra {
color: var(--td-error-color);
}
.t-input.t-is-readonly {
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-specialcomponent);
}
.t-input.t-is-readonly .t-input__inner {
cursor: pointer;
}
.t-input.t-is-disabled {
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
}
.t-input.t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
}
.t-input.t-is-disabled .t-input__inner {
cursor: not-allowed;
color: var(--td-text-color-disabled);
text-overflow: initial;
}
.t-input.t-is-disabled .t-input__inner::placeholder {
color: var(--td-text-color-disabled);
}
.t-input.t-is-disabled > .t-input__prefix .t-icon,
.t-input.t-is-disabled > .t-input__suffix .t-icon {
color: var(--td-text-color-disabled);
}
.t-input.t-is-disabled > .t-input__prefix .t-icon:hover,
.t-input.t-is-disabled > .t-input__suffix .t-icon:hover {
color: var(--td-text-color-disabled);
}
.t-input.t-input--prefix > .t-input__prefix {
z-index: 2;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
.t-input.t-input--prefix > .t-input__prefix-icon {
font-size: var(--td-font-size-body-large);
}
.t-input.t-input--prefix.t-size-s .t-input__prefix-icon {
font-size: var(--td-font-size-body-medium);
}
.t-input.t-input--prefix.t-size-l .t-input__prefix-icon {
font-size: var(--td-font-size-title-large);
}
.t-input.t-input--suffix > .t-input__suffix {
z-index: 2;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
.t-input.t-input--suffix > .t-input__suffix-icon {
font-size: var(--td-font-size-body-large);
}
.t-input.t-input--suffix.t-size-s .t-input__suffix-icon {
font-size: var(--td-font-size-body-medium);
}
.t-input.t-input--suffix.t-size-l .t-input__suffix-icon {
font-size: var(--td-font-size-title-large);
}
.t-input .t-input__suffix-clear {
cursor: pointer;
}
.t-input.t-size-l {
height: var(--td-comp-size-xl);
font: var(--td-font-body-large);
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
}
.t-input.t-size-s {
height: var(--td-comp-size-xs);
font: var(--td-font-body-small);
}
.t-input .t-input__prefix > .t-icon,
.t-input .t-input__suffix > .t-icon {
font-size: inherit;
}
.t-input .t-input__prefix > .t-icon {
color: var(--td-text-color-placeholder);
}
.t-input .t-input__prefix:not(:empty) {
margin-right: var(--td-comp-margin-s);
}
.t-input .t-input__suffix > .t-icon {
color: var(--td-text-color-placeholder);
transition: all 0.2s linear;
}
.t-input .t-input__suffix > .t-icon:hover {
color: var(--td-text-color-secondary);
transition: all 0.2s linear;
}
.t-input .t-input__suffix:not(:empty) {
margin-left: var(--td-comp-margin-s);
}
.t-input.t-is-focused .t-input__prefix > .t-icon {
color: var(--td-brand-color);
}
.t-input.t-is-focused .t-input__suffix > .t-icon-time,
.t-input.t-is-focused .t-input__suffix .t-icon-calendar {
color: var(--td-brand-color);
}
.t-input-group {
position: relative;
display: inline-flex;
align-items: stretch;
}
.t-input-group .t-input__wrap {
border-radius: 0;
}
.t-input-group .t-input__wrap:first-child {
border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
}
.t-input-group .t-input__wrap:last-child {
border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}
.t-input-group .t-button,
.t-input-group .t-select {
border-radius: 0;
}
.t-input-group .t-button:not(:first-child),
.t-input-group .t-select:not(:first-child) {
margin-left: -1px;
}
.t-input-group .t-input__wrap:not(:first-child) .t-input {
margin-left: -1px;
}
.t-input-group .t-input__wrap:first-child .t-input {
border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
}
.t-input-group .t-input__wrap:last-child .t-input {
border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}
.t-input-group .t-button:first-child,
.t-input-group .t-select:first-child {
border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
}
.t-input-group .t-button:last-child,
.t-input-group .t-select:last-child {
border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}
.t-input-group--separate .t-input__wrap + .t-input__wrap {
margin-left: var(--td-comp-margin-xxxl);
}
.t-input-group--separate .t-button,
.t-input-group--separate .t-select {
border-radius: var(--td-radius-default);
}
.t-input-group--separate .t-button:first-child,
.t-input-group--separate .t-select:first-child {
border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
}
.t-input-group--separate .t-button:last-child,
.t-input-group--separate .t-select:last-child {
border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}
.t-input-group--separate .t-input__wrap .t-input {
border-radius: var(--td-radius-default);
}
.t-input-group--separate .t-input__wrap .t-input:first-child {
border-radius: var(--td-radius-default);
}
.t-input-group--separate .t-input__wrap .t-input:last-child {
border-radius: var(--td-radius-default);
}
.t-input-group .t-input__inner,
.t-input-group .t-button,
.t-input-group .t-select {
position: relative;
z-index: 0;
}
.t-input-group .t-input__inner:hover,
.t-input-group .t-button:hover,
.t-input-group .t-select:hover,
.t-input-group .t-input__inner:focus,
.t-input-group .t-button:focus,
.t-input-group .t-select:focus,
.t-input-group .t-input__inner:active,
.t-input-group .t-button:active,
.t-input-group .t-select:active {
z-index: 1;
}
.t-input__wrap {
width: 100%;
}
.t-input__tips {
height: auto;
min-height: var(--td-line-height-body-small);
font: var(--td-font-body-small);
position: absolute;
}
.t-input__tips--default {
color: var(--td-text-color-placeholder);
}
.t-input__tips--success {
color: var(--td-success-color);
}
.t-input__tips--warning {
color: var(--td-warning-color);
}
.t-input__tips--error {
color: var(--td-error-color);
}
.t-align-center > .t-input__inner {
text-align: center;
}
.t-align-right > .t-input__inner {
text-align: right;
}
.t-input__input-pre {
position: absolute;
visibility: hidden;
white-space: pre;
display: block;
}
.t-input--auto-width {
width: fit-content;
min-width: 60px;
}
.t-input__limit-number {
font: var(--td-font-body-medium);
color: var(--td-text-color-placeholder);
background: var(--td-bg-color-specialcomponent);
}
.t-input__limit-number.t-is-disabled {
background: var(--td-bg-color-component-disabled);
}
@keyframes t-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes t-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes t-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.t-icon-loading {
animation: t-spin 1s linear infinite;
}
@keyframes t-zoom-out {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.t-input-number {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 0 var(--td-comp-size-m);
user-select: none;
width: 144px;
}
.t-input-number:not(.t-input-number--column) > .t-input-number__decrease + .t-input__wrap {
margin-left: var(--td-comp-margin-xs);
}
.t-input-number input::-webkit-outer-spin-button,
.t-input-number input::-webkit-inner-spin-button {
appearance: none;
}
.t-input-number input[type="number"] {
appearance: textfield;
}
.t-input-number > .t-input__tips {
position: absolute;
left: 0;
}
.t-input-number input + .t-input__suffix {
margin-left: var(--td-comp-paddingLR-s);
}
.t-input-number .t-input__prefix {
margin-right: var(--td-comp-paddingLR-s);
}
.t-input-number .t-input {
color: var(--td-text-color-primary);
}
.t-input-number.t-input-number--auto-width {
width: auto;
}
.t-input-number.t-input-number--auto-width.t-is-controls-right {
min-width: auto;
width: auto;
}
.t-input-number.t-input-number--auto-width .t-input__inner {
min-width: 42px;
}
.t-input-number .t-input-number__decrease,
.t-input-number .t-input-number__increase {
width: var(--td-comp-size-m);
height: var(--td-comp-size-m);
position: absolute;
top: 0;
border: 1px solid var(--td-border-level-2-color);
box-sizing: border-box;
border-radius: var(--td-radius-default);
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
cursor: pointer;
transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
}
.t-input-number .t-input-number__decrease:hover,
.t-input-number .t-input-number__increase:hover {
color: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-input-number .t-input-number__decrease:hover .t-icon,
.t-input-number .t-input-number__increase:hover .t-icon {
color: var(--td-brand-color);
}
.t-input-number .t-input-number__decrease:active,
.t-input-number .t-input-number__increase:active {
color: var(--td-brand-color);
background-color: var(--td-bg-color-container-hover);
}
.t-input-number .t-input-number__decrease .t-icon,
.t-input-number .t-input-number__increase .t-icon {
position: relative;
z-index: 1;
font-size: var(--td-font-size-body-large);
color: var(--td-text-color-secondary);
}
.t-input-number .t-input-number__decrease.t-is-disabled,
.t-input-number .t-input-number__increase.t-is-disabled {
color: var(--td-text-color-disabled);
cursor: no-drop;
background-color: var(--td-bg-color-component-disabled);
}
.t-input-number .t-input-number__decrease.t-is-disabled .t-icon,
.t-input-number .t-input-number__increase.t-is-disabled .t-icon {
color: var(--td-text-color-disabled);
}
.t-input-number .t-input-number__decrease.t-is-disabled:hover,
.t-input-number .t-input-number__increase.t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
}
.t-input-number .t-input-number__decrease.t-is-disabled:hover .t-icon,
.t-input-number .t-input-number__increase.t-is-disabled:hover .t-icon {
color: var(--td-text-color-disabled);
}
.t-input-number .t-input-number__decrease.t-is-disabled::placeholder,
.t-input-number .t-input-number__increase.t-is-disabled::placeholder {
color: var(--td-text-color-disabled);
}
.t-input-number .t-input-number__decrease {
left: 0;
}
.t-input-number .t-input-number__increase {
right: -8px;
}
.t-input-number.t-is-disabled .t-input {
cursor: no-drop;
background-color: var(--td-bg-color-component-disabled);
color: var(--td-text-color-disabled);
}
.t-input-number.t-is-disabled .t-input:hover,
.t-input-number.t-is-disabled .t-input:focus,
.t-input-number.t-is-disabled .t-input:active {
border-color: var(--td-border-level-2-color);
}
.t-input-number.t-is-disabled .t-input-number__decrease,
.t-input-number.t-is-disabled .t-input-number__increase {
color: var(--td-text-color-disabled);
cursor: no-drop;
background-color: var(--td-bg-color-component-disabled);
}
.t-input-number.t-is-disabled .t-input-number__decrease .t-icon,
.t-input-number.t-is-disabled .t-input-number__increase .t-icon {
color: var(--td-text-color-secondary);
}
.t-input-number.t-size-s {
width: 120px;
padding: 0 var(--td-comp-size-xs);
}
.t-input-number.t-size-s .t-input {
font-size: var(--td-font-size-body-small);
height: var(--td-comp-size-xs);
line-height: var(--td-comp-size-xs);
}
.t-input-number.t-size-s .t-input-number__decrease,
.t-input-number.t-size-s .t-input-number__increase {
font-size: var(--td-font-size-body-medium);
width: var(--td-comp-size-xs);
height: var(--td-comp-size-xs);
}
.t-input-number.t-size-l {
width: 168px;
padding: 0 var(--td-comp-size-xl);
}
.t-input-number.t-size-l .t-input {
height: var(--td-comp-size-xl);
line-height: var(--td-comp-size-xl);
}
.t-input-number.t-size-l .t-input-number__decrease,
.t-input-number.t-size-l .t-input-number__increase {
font-size: 18px;
width: var(--td-comp-size-xl);
height: var(--td-comp-size-xl);
}
.t-input-number.t-size-l.t-is-controls-right .t-input {
height: var(--td-comp-size-xl);
line-height: var(--td-comp-size-xl);
padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s));
}
.t-input-number.t-size-l.t-is-controls-right .t-input-number__decrease,
.t-input-number.t-size-l.t-is-controls-right .t-input-number__increase {
width: var(--td-comp-size-xl);
font-size: var(--td-font-size-body-large);
}
.t-input-number.t-size-l .t-input--prefix {
font: var(--td-font-body-large);
padding: 0 var(--td-comp-paddingLR-m);
}
.t-input-number.t-input-number--normal {
padding: 0;
border-radius: var(--td-radius-default);
}
.t-input-number.t-input-number--normal.t-is-disabled {
cursor: no-drop;
color: var(--td-text-color-disabled);
}
.t-input-number.t-input-number--normal.t-is-disabled:hover .t-input {
border-color: var(--td-border-level-2-color);
}
.t-input-number.t-input-number--normal.t-is-disabled::placeholder {
color: var(--td-text-color-disabled);
}
.t-input-number.t-input-number--normal.t-is-disabled .t-input:focus {
box-shadow: none;
}
.t-input-number.t-is-controls-right {
width: 96px;
padding: 0;
}
.t-input-number.t-is-controls-right:hover .t-input-number__decrease,
.t-input-number.t-is-controls-right:hover .t-input-number__increase {
opacity: 1;
visibility: visible;
}
.t-input-number.t-is-controls-right .t-input {
width: 100%;
box-sizing: border-box;
margin: 0;
padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s));
border-radius: var(--td-radius-default);
}
.t-input-number.t-is-controls-right .t-input-number__decrease,
.t-input-number.t-is-controls-right .t-input-number__increase {
width: var(--td-comp-size-m);
height: calc(calc(var(--td-comp-size-m) / 2) - 2px);
border: 0;
left: initial;
top: initial;
right: 1px;
border-radius: 0;
background: var(--td-bg-color-secondarycontainer);
opacity: 0;
visibility: hidden;
z-index: 2;
}
.t-input-number.t-is-controls-right .t-input-number__decrease .t-icon,
.t-input-number.t-is-controls-right .t-input-number__increase .t-icon {
font-size: var(--td-font-size-body-small);
}
.t-input-number.t-is-controls-right .t-input-number__decrease:hover,
.t-input-number.t-is-controls-right .t-input-number__increase:hover {
background: var(--td-bg-color-component-hover);
}
.t-input-number.t-is-controls-right .t-input-number__decrease:hover .t-icon,
.t-input-number.t-is-controls-right .t-input-number__increase:hover .t-icon {
color: var(--td-text-color-primary);
}
.t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled,
.t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled {
color: var(--td-text-color-disabled);
cursor: no-drop;
background-color: var(--td-bg-color-component-disabled);
}
.t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled .t-icon,
.t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled .t-icon {
color: var(--td-text-color-disabled);
}
.t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover,
.t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
}
.t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover .t-icon,
.t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover .t-icon {
color: var(--td-text-color-disabled);
}
.t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::placeholder,
.t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::placeholder {
color: var(--td-text-color-disabled);
}
.t-input-number.t-is-controls-right .t-input-number__increase {
top: 1px;
border-top-right-radius: calc(var(--td-radius-default) - 1px);
}
.t-input-number.t-is-controls-right .t-input-number__decrease {
top: calc(calc(calc(var(--td-comp-size-m) / 2) - 2px) + 3px);
border-bottom-right-radius: calc(var(--td-radius-default) - 1px);
}
.t-input-number.t-is-controls-right.t-size-l {
width: 120px;
}
.t-input-number.t-is-controls-right.t-size-l .t-input-number__increase,
.t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease {
height: calc(calc(var(--td-comp-size-xl) / 2) - 2px);
}
.t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease {
top: calc(calc(calc(var(--td-comp-size-xl) / 2) - 2px) + 3px);
}
.t-input-number.t-is-controls-right.t-size-s {
width: 88px;
}
.t-input-number.t-is-controls-right.t-size-s .t-input-number__increase,
.t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease {
height: calc(calc(var(--td-comp-size-xs) / 2) - 2px);
}
.t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease {
top: calc(calc(calc(var(--td-comp-size-xs) / 2) - 2px) + 3px);
}
.t-input-number--row .t-input__wrap {
width: initial;
margin-right: var(--td-comp-margin-xs);
}
.t-input-number--row .t-input-number__increase {
right: 0;
}
.t-tag {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
align-items: center;
flex-direction: row;
padding: 0px var(--td-comp-paddingLR-s);
height: var(--td-comp-size-xs);
font: var(--td-font-body-small);
color: var(--td-text-color-anti);
border-radius: var(--td-radius-default);
border: 1px solid transparent;
white-space: nowrap;
}
.t-tag .t-icon {
margin-right: var(--td-comp-margin-xs);
width: calc(var(--td-font-size-body-medium) + 2px);
height: calc(var(--td-font-size-body-medium) + 2px);
flex-shrink: 0;
}
.t-tag .t-tag__icon-close {
margin-right: 0;
margin-left: var(--td-comp-margin-s);
font: var(--td-font-body-medium);
cursor: pointer;
transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-tag--default {
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-component);
}
.t-tag--default .t-tag__icon-close {
color: var(--td-text-color-placeholder);
}
.t-tag--default .t-tag__icon-close:hover {
color: var(--td-text-color-primary);
}
.t-tag--default:active {
cursor: default;
}
.t-tag--default.t-tag--disabled {
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
border-color: var(--td-component-border);
cursor: not-allowed;
}
.t-tag--default.t-tag--disabled:hover {
cursor: not-allowed;
}
.t-tag--default.t-tag--disabled .t-icon:hover {
cursor: pointer;
}
.t-tag--default.t-tag--outline {
border-color: var(--td-component-border);
}
.t-tag--default.t-tag--light {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-tag--default.t-tag--light-outline {
border-color: var(--td-component-border);
background-color: var(--td-bg-color-secondarycontainer);
}
.t-tag--primary {
background-color: var(--td-brand-color);
}
.t-tag--primary.t-tag--outline {
border-color: var(--td-brand-color);
}
.t-tag--primary.t-tag--light {
background-color: var(--td-brand-color-light);
}
.t-tag--primary.t-tag--light-outline {
border-color: var(--td-brand-color);
background-color: var(--td-brand-color-light);
}
.t-tag--primary.t-tag--light,
.t-tag--primary.t-tag--outline,
.t-tag--primary.t-tag--light-outline {
color: var(--td-brand-color);
}
.t-tag--primary.t-tag--light .t-tag__icon-close:hover,
.t-tag--primary.t-tag--outline .t-tag__icon-close:hover,
.t-tag--primary.t-tag--light-outline .t-tag__icon-close:hover {
color: var(--td-brand-color-hover);
}
.t-tag--success {
background-color: var(--td-success-color);
}
.t-tag--success.t-tag--outline {
border-color: var(--td-success-color);
}
.t-tag--success.t-tag--light {
background-color: var(--td-success-color-light);
}
.t-tag--success.t-tag--light-outline {
border-color: var(--td-success-color);
background-color: var(--td-success-color-light);
}
.t-tag--success.t-tag--light,
.t-tag--success.t-tag--outline,
.t-tag--success.t-tag--light-outline {
color: var(--td-success-color);
}
.t-tag--success.t-tag--light .t-tag__icon-close:hover,
.t-tag--success.t-tag--outline .t-tag__icon-close:hover,
.t-tag--success.t-tag--light-outline .t-tag__icon-close:hover {
color: var(--td-success-color-hover);
}
.t-tag--warning {
background-color: var(--td-warning-color);
}
.t-tag--warning.t-tag--outline {
border-color: var(--td-warning-color);
}
.t-tag--warning.t-tag--light {
background-color: var(--td-warning-color-light);
}
.t-tag--warning.t-tag--light-outline {
border-color: var(--td-warning-color);
background-color: var(--td-warning-color-light);
}
.t-tag--warning.t-tag--light,
.t-tag--warning.t-tag--outline,
.t-tag--warning.t-tag--light-outline {
color: var(--td-warning-color);
}
.t-tag--warning.t-tag--light .t-tag__icon-close:hover,
.t-tag--warning.t-tag--outline .t-tag__icon-close:hover,
.t-tag--warning.t-tag--light-outline .t-tag__icon-close:hover {
color: var(--td-warning-color-hover);
}
.t-tag--danger {
background-color: var(--td-error-color);
}
.t-tag--danger.t-tag--outline {
border-color: var(--td-error-color);
}
.t-tag--danger.t-tag--light {
background-color: var(--td-error-color-light);
}
.t-tag--danger.t-tag--light-outline {
border-color: var(--td-error-color);
background-color: var(--td-error-color-light);
}
.t-tag--danger .t-tag__icon-close {
fill: var(--td-error-color);
}
.t-tag--danger .t-tag__icon-close:hover {
fill: var(--td-error-color-hover);
}
.t-tag--danger.t-tag--light,
.t-tag--danger.t-tag--outline,
.t-tag--danger.t-tag--light-outline {
color: var(--td-error-color);
}
.t-tag--danger.t-tag--light .t-tag__icon-close:hover,
.t-tag--danger.t-tag--outline .t-tag__icon-close:hover,
.t-tag--danger.t-tag--light-outline .t-tag__icon-close:hover {
color: var(--td-error-color-hover);
}
.t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close {
color: var(--td-font-white-2);
}
.t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close:hover {
color: var(--td-font-white-1);
}
.t-tag.t-tag--outline {
background: transparent;
}
.t-tag.t-size-s {
padding: 0px var(--td-comp-paddingLR-xs);
height: var(--td-comp-size-xxs);
font: var(--td-font-body-small);
}
.t-tag.t-size-s .t-icon {
font-size: var(--td-font-body-small);
}
.t-tag.t-size-l {
padding: 0px var(--td-comp-paddingLR-m);
height: var(--td-comp-size-m);
font: var(--td-font-body-medium);
}
.t-tag.t-size-l .t-icon {
font: var(--td-font-body-medium);
}
.t-tag.t-tag--round {
border-radius: var(--td-radius-extraLarge);
}
.t-tag.t-tag--mark {
border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0;
}
.t-tag.t-tag--ellipsis .t-tag--text {
display: inline-block;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-tag.t-tag--check:not(.t-tag--disabled) {
transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
cursor: pointer;
}
.t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--dark:not(.t-tag--checked):hover {
background-color: var(--td-bg-color-component-hover);
}
.t-tag.t-tag--check:not(.t-tag--disabled).t-tag--primary.t-tag--dark.t-tag--checked:hover {
background-color: var(--td-brand-color-hover);
}
.t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--outline:not(.t-tag--checked):hover {
color: var(--td-brand-color-hover);
}
.t-tag--check.t-tag--disabled.t-tag--primary.t-tag--dark {
background-color: var(--td-brand-color-disabled);
cursor: not-allowed;
}
.t-tag--check.t-tag--disabled.t-tag--primary.t-tag--outline {
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
border-color: var(--td-text-color-disabled);
cursor: not-allowed;
}
.t-check-tag-group .t-tag:not(:last-child) {
margin-right: var(--td-comp-margin-s);
}
a .t-tag {
cursor: pointer;
transition: all 0.2s linear;
}
a .t-tag:hover {
color: var(--td-brand-color);
background-color: var(--td-bg-color-component-hover);
}
a .t-tag:active {
color: var(--td-brand-color-active);
background-color: var(--td-bg-color-component-active);
}
@keyframes t-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes t-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes t-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.t-icon-loading {
animation: t-spin 1s linear infinite;
}
@keyframes t-zoom-out {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.t-tag-input {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
/** 设计稿：未填充标签场景，边距和已填充不同 */
}
.t-tag-input .t-tag {
vertical-align: middle;
animation: t-fade-in 0.2s ease-in-out;
margin: 3px var(--td-comp-margin-xs) 3px 0;
}
.t-tag-input .t-tag-input__drag_wrapper + .t-tag-input__drag_wrapper {
margin-left: var(--td-comp-margin-xs);
}
.t-tag-input .t-input {
overflow: hidden;
min-height: var(--td-comp-size-m);
height: fit-content;
padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs);
}
.t-tag-input .t-input .t-input__suffix-icon {
right: var(--td-comp-margin-s);
}
.t-tag-input .t-input.t-size-s {
padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs);
min-height: var(--td-comp-size-xs);
}
.t-tag-input .t-input.t-size-s .t-tag {
margin: 1px var(--td-comp-margin-xs) 1px 0;
}
.t-tag-input .t-input.t-size-l {
min-height: var(--td-comp-size-xl);
padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s);
}
.t-tag-input .t-input.t-size-l .t-input__suffix-icon {
right: var(--td-comp-margin-m);
}
.t-tag-input.t-is-empty .t-input__inner {
margin-left: var(--td-comp-margin-xs);
}
.t-tag-input:hover .t-input__inner:not(.t-input--soft-hidden),
.t-tag-input .t-input--focused .t-input__inner:not(.t-input--soft-hidden) {
min-width: 20px;
}
.t-tag-input .t-tag-input__prefix {
margin-left: var(--td-comp-margin-xs);
line-height: 1;
}
.t-tag-input .t-tag-input__prefix > .t-icon {
color: var(--td-text-color-placeholder);
}
.t-tag-input .t-input .t-input__prefix:not(:empty) {
margin-right: 0;
}
.t-tag-input.t-input--auto-width .t-input.t-input--focused {
padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs));
}
.t-tag-input.t-input--auto-width .t-input__prefix {
white-space: nowrap;
}
.t-tag-input .t-input__prefix--scrollable {
overflow-y: hidden;
overflow-x: auto;
}
@-moz-document url-prefix() {
.t-tag-input .t-input__prefix--scrollable {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover,
.t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-tag-input__suffix-clear {
cursor: pointer;
}
.t-tag-input--drag-sort .t-input__prefix .t-tag {
cursor: move;
}
.t-tag-input--break-line:not(.t-is-empty) .t-input {
display: block;
}
.t-tag-input--break-line:not(.t-is-empty) .t-input.t-input--prefix > .t-input__prefix {
display: inline;
text-align: left;
}
.t-tag-input--break-line:not(.t-is-empty) .t-input .t-input__suffix-icon {
position: absolute;
bottom: 0;
}
.t-tag-input--break-line:not(.t-is-empty) .t-tag-input__prefix {
vertical-align: middle;
}
.t-tag-input__prefix {
width: max-content;
display: inline-block;
margin-right: var(--td-comp-margin-s);
}
/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */
.t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-input,
.t-tag-input.t-input--auto-width:hover .t-input {
padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs));
}
.t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-size-l .t-input,
.t-tag-input.t-input--auto-width:hover .t-size-l .t-input {
padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs));
}
/** auto-width 模式，左右边距相同 */
.t-tag-input.t-input--auto-width .t-input {
padding-right: 0;
}
/** max-rows模式，限制最大高度 */
.t-tag-input--max-rows .t-input {
max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-m) - 2px));
overflow-y: scroll;
}
.t-tag-input--max-rows .t-input.t-size-s {
max-height: calc(var(--max-rows, 1) * var(--td-comp-size-xs));
}
.t-tag-input--max-rows .t-input.t-size-l {
max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-xl) - 2px));
}
.t-select-input {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
display: inline-block;
vertical-align: middle;
}
/** 宽度自适应场景，多选，预留图标的位置。带标签和不带标签的布局不同，故而间距不同 */
.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input {
padding-right: var(--td-comp-paddingLR-xl);
}
.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input.t-size-l {
padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s));
}
.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input {
padding-right: var(--td-comp-paddingLR-s);
}
.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input.t-size-l {
padding-right: var(--td-comp-paddingLR-m);
}
/** 无边框模式 */
.t-select-input--borderless {
/** 无边框模式的多选 */
}
.t-select-input--borderless .t-input {
box-shadow: none;
border: 1px solid transparent;
background: transparent;
transition: all 0.2s linear;
}
.t-select-input--borderless .t-input:hover:not(.t-input--focused) {
border-color: var(--td-component-border);
background-color: var(--td-bg-color-container-hover);
border-radius: var(--td-radius-default);
}
.t-select-input--borderless .t-input--focused {
border-color: var(--td-brand-color);
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
background-color: var(--td-bg-color-specialcomponent);
}
.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible input {
display: inline-block;
}
.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible .t-input {
background-color: var(--td-bg-color-container-hover);
}
.t-select-input--borderless.t-tag-input {
border: 0;
box-shadow: none;
background: transparent;
transition: background-color 0.2s linear;
}
.t-select-input--borderless.t-tag-input:hover {
background-color: var(--td-bg-color-container-hover);
border-radius: var(--td-radius-default);
}
.t-checkbox-group {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
flex-wrap: wrap;
gap: 16px;
}
.t-checkbox {
font: var(--td-font-body-medium);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
color: var(--td-text-color-primary);
}
.t-checkbox + .t-checkbox {
margin-left: inherit;
}
.t-checkbox__former {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
outline: 0;
appearance: none;
}
.t-checkbox__input {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
border: 1px solid var(--td-border-level-2-color);
border-radius: var(--td-radius-default);
background-color: var(--td-bg-color-container);
box-sizing: border-box;
flex-shrink: 0;
}
.t-checkbox__input::after {
content: "";
position: absolute;
opacity: 0;
box-sizing: border-box;
}
.t-checkbox__label {
display: inline-block;
margin-left: 8px;
vertical-align: middle;
font: var(--td-font-body-medium);
}
.t-checkbox:hover .t-checkbox__input {
border-color: var(--td-brand-color);
transition: border-color 0.2s linear;
}
.t-checkbox.t-is-checked .t-checkbox__input {
border-color: var(--td-brand-color);
background-color: var(--td-brand-color);
transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-checkbox.t-is-checked .t-checkbox__input::after {
opacity: 1;
top: 6px;
left: 3px;
width: 5px;
height: 9px;
border: 2px solid var(--td-text-color-anti);
border-radius: 0 0 1px;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(1) translate(-50%, -50%);
background: transparent;
}
.t-checkbox.t-is-indeterminate .t-checkbox__input {
border-color: var(--td-brand-color);
background-color: var(--td-brand-color);
transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-checkbox.t-is-indeterminate .t-checkbox__input::after {
opacity: 1;
width: 16px;
height: 4px;
left: -1px;
right: 0;
top: 5px;
border: unset;
transform: scale(0.5);
background-color: var(--td-font-white-1);
}
.t-checkbox.t-is-disabled {
cursor: not-allowed;
}
.t-checkbox.t-is-disabled .t-checkbox__label {
color: var(--td-text-color-disabled);
}
.t-checkbox.t-is-disabled .t-checkbox__input {
background-color: var(--td-bg-color-component-disabled);
}
.t-checkbox.t-is-disabled:hover .t-checkbox__input {
border-color: var(--td-border-level-2-color);
}
.t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input {
border-color: var(--td-border-level-2-color);
}
.t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input::after {
border-color: var(--td-text-color-disabled);
}
.t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input {
border-color: var(--td-border-level-2-color);
}
.t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input::after {
background-color: var(--td-text-color-disabled);
}
.t-checkbox:focus-visible:focus-visible {
outline: 2px solid var(--td-brand-color);
outline-offset: var(--td-comp-paddingTB-xs);
border-radius: 0;
}
.t-select__wrap {
width: 100%;
}
.t-select__dropdown .t-popup__content {
margin: var(--td-comp-paddingTB-s) 0;
padding: 0;
max-height: 300px;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: var(--td-shadow-2);
}
@-moz-document url-prefix() {
.t-select__dropdown .t-popup__content {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-select__dropdown .t-popup__content::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 15px;
}
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:vertical:hover,
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-select__dropdown-inner {
min-height: var(--td-comp-size-m);
}
.t-select__dropdown-inner .t-select__list .t-select__list {
padding: 0;
}
.t-select__dropdown-inner .t-select__list,
.t-select__dropdown-inner .t-tree {
padding: var(--td-pop-padding-m);
}
.t-select__dropdown-inner--size-s {
min-height: var(--td-comp-size-xs);
}
.t-select__dropdown-inner--size-s .t-select__list,
.t-select__dropdown-inner--size-s .t-tree {
padding: var(--td-pop-padding-s);
}
.t-select__dropdown-inner--size-l {
min-height: var(--td-comp-size-xl);
}
.t-select__dropdown-inner--size-l .t-select__list,
.t-select__dropdown-inner--size-l .t-tree {
padding: var(--td-pop-padding-l);
}
.t-select__list {
margin: 0;
padding: 0;
list-style: none;
}
.t-select__dropdown.t-popup {
padding: 0;
}
.t-select__empty.t-size-s {
line-height: var(--td-comp-size-xs);
}
.t-select__empty {
text-align: center;
color: var(--td-text-color-disabled);
line-height: var(--td-comp-size-m);
padding: 0 var(--td-comp-paddingLR-s);
}
.t-select__empty.t-size-l {
line-height: var(--td-comp-size-xl);
}
.t-select__loading-tips.t-size-s {
min-height: var(--td-comp-size-xs);
line-height: var(--td-comp-size-xs);
}
.t-select__loading-tips {
position: fixed;
top: var(--td-comp-paddingTB-s);
left: 0;
bottom: var(--td-comp-paddingTB-s);
right: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--td-bg-color-container);
border-radius: var(--td-radius-default);
min-height: var(--td-comp-size-m);
line-height: var(--td-comp-size-m);
color: var(--td-text-color-disabled);
z-index: 1000;
}
.t-select__loading-tips.t-size-l {
min-height: var(--td-comp-size-xl);
line-height: var(--td-comp-size-xl);
}
.t-select-option-group + .t-select-option-group {
padding-top: var(--td-comp-margin-xs);
margin-top: var(--td-comp-margin-xs);
}
.t-select-option-group__divider + .t-select-option-group__divider {
position: relative;
}
.t-select-option-group__divider + .t-select-option-group__divider::before {
content: "";
width: 100%;
height: 1px;
padding: 0 var(--td-comp-paddingLR-s);
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
background-color: var(--td-border-level-1-color);
background-clip: content-box;
}
ul.t-select-option-group__header,
.t-select-option-group__header {
color: var(--td-text-color-placeholder);
display: block;
height: var(--td-comp-size-s);
line-height: var(--td-comp-size-s);
padding: 0 var(--td-comp-paddingLR-s);
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-select-option-group__header.t-size-l {
height: var(--td-comp-size-l);
line-height: var(--td-comp-size-l);
padding: 0 var(--td-comp-paddingLR-m);
}
.t-select-option-group__header.t-size-s {
height: var(--td-comp-size-xxs);
line-height: var(--td-comp-size-xxs);
padding: 0 var(--td-comp-paddingLR-s);
}
.t-select-option {
display: flex;
align-items: center;
border-radius: var(--td-radius-default);
height: var(--td-comp-size-s);
font: var(--td-font-body-medium);
cursor: pointer;
padding: 0 var(--td-comp-paddingLR-s);
color: var(--td-text-color-primary);
transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
box-sizing: border-box;
--ripple-color: var(--td-bg-color-container-active);
}
.t-select-option span {
position: relative;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover {
background-color: var(--td-bg-color-container-hover);
}
.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__label {
color: inherit;
}
.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__input {
border-color: var(--td-brand-color);
}
.t-select-option .t-checkbox__label {
color: var(--td-text-color-primary);
flex: 1;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-select-option .t-checkbox {
width: 100%;
}
.t-select-option.t-is-disabled {
cursor: not-allowed;
color: var(--td-text-color-disabled);
background: var(--td-bg-color-specialcomponent);
}
.t-select-option.t-is-disabled:hover,
.t-select-option.t-is-disabled :active {
background: var(--td-bg-color-specialcomponent);
}
.t-select-option.t-size-l {
height: var(--td-comp-size-l);
padding: 0 var(--td-comp-paddingLR-m);
font: var(--td-font-body-large);
}
.t-select-option.t-size-m {
font: var(--td-font-body-medium);
}
.t-select-option.t-size-s {
height: var(--td-comp-size-xxs);
padding: 0 var(--td-comp-paddingLR-s);
font: var(--td-font-body-small);
}
.t-select-option.t-is-selected:not(.t-is-disabled) {
color: var(--td-brand-color);
background-color: var(--td-brand-color-light);
transition: all 0.2s linear;
}
.t-select-option.t-is-selected:not(.t-is-disabled) .t-checkbox__label {
color: var(--td-brand-color);
}
.t-select-option.t-is-selected:not(.t-is-disabled):hover {
background-color: var(--td-brand-color-light);
}
/** 规范 CSS 类名为 --hover */
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected),
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected),
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected),
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) {
background-color: var(--td-bg-color-container-hover);
}
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input,
.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input,
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input,
.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input {
border-color: var(--td-brand-color);
}
.t-select-option.t-select-option__hover .t-checkbox__label,
.t-select-option.t-select-option--hover .t-checkbox__label {
color: inherit;
}
.t-select-option + .t-select-option {
margin-top: var(--td-comp-paddingTB-xxs);
}
.t-select.t-select-input--borderless .t-select__right-icon {
position: relative;
margin: 0;
}
.t-select .t-fake-arrow {
color: var(--td-text-color-placeholder);
}
.t-select .t-fake-arrow--active {
color: var(--td-brand-color);
}
.t-is-selected.t-select-option__hover {
background-color: var(--td-brand-color-light-hover);
}
.t-is-selected.t-select-option__hover .t-checkbox__label {
color: var(--td-brand-color);
}
.t-input-adornment {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.t-input-adornment__prepend .t-input,
.t-input-adornment__append .t-input,
.t-input-adornment__prepend .t-textarea__inner,
.t-input-adornment__append .t-textarea__inner {
background-color: transparent;
}
.t-input-adornment__prepend {
background-color: var(--td-bg-color-secondarycontainer);
color: var(--td-text-color-primary);
word-break: keep-all;
margin-right: -1px;
}
.t-input-adornment__append {
background-color: var(--td-bg-color-secondarycontainer);
color: var(--td-text-color-primary);
word-break: keep-all;
margin-left: -1px;
}
.t-input-adornment__text {
display: inline-flex;
height: 100%;
align-items: center;
box-sizing: border-box;
white-space: nowrap;
padding: 0 var(--td-comp-paddingLR-s);
border: 1px solid var(--td-border-level-2-color);
}
.t-input-adornment > :first-child {
border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
}
.t-input-adornment > :first-child .t-input,
.t-input-adornment > :first-child .t-input-adornment__text,
.t-input-adornment > :first-child .t-textarea__inner {
border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
}
.t-input-adornment > :last-child {
border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}
.t-input-adornment > :last-child .t-input,
.t-input-adornment > :last-child .t-input-adornment__text,
.t-input-adornment > :last-child .t-textarea__inner {
border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}
.t-input-adornment > :not(:last-child):hover {
z-index: 2;
}
.t-input-adornment > :not(:first-child):not(:last-child) .t-input,
.t-input-adornment > :not(:first-child):not(:last-child) .t-textarea__inner {
border-radius: 0;
}
.t-pagination-mini {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-pagination-mini--outline .t-pagination-mini__prev {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
position: relative;
z-index: 1;
}
.t-pagination-mini--outline .t-pagination-mini__current {
border-radius: 0;
position: relative;
margin-left: -1px;
}
.t-pagination-mini--outline .t-pagination-mini__current:hover {
z-index: 1;
}
.t-pagination-mini--outline .t-pagination-mini__next {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative;
margin-left: -1px;
}
.t-pagination-mini--outline .t-pagination-mini__next:hover {
z-index: 1;
}
.t-pagination {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
color: var(--td-text-color-secondary);
user-select: none;
}
.t-pagination.t-is-disabled {
color: var(--td-text-color-disabled);
}
.t-pagination__total {
font: var(--td-font-body-medium);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.t-pagination .t-select__wrap {
width: auto;
}
.t-pagination__select {
flex-shrink: 0;
margin-right: var(--td-comp-margin-l);
height: var(--td-comp-size-m);
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-secondary);
}
.t-pagination__btn {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
cursor: pointer;
color: var(--td-text-color-secondary);
border-radius: var(--td-radius-default);
font: var(--td-font-body-large);
width: var(--td-comp-size-m);
height: var(--td-comp-size-m);
line-height: var(--td-comp-size-m);
}
.t-pagination__btn:hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-pagination__btn:active {
background-color: var(--td-bg-color-secondarycontainer-active);
}
.t-pagination__btn.t-is-disabled,
.t-pagination__btn.t-is-disabled:hover,
.t-pagination__btn.t-is-disabled:active {
background: none;
color: var(--td-text-color-disabled);
}
.t-pagination__btn.t-is-disabled {
cursor: not-allowed;
}
.t-pagination__btn-prev {
margin-right: var(--td-comp-margin-s);
}
.t-pagination__btn-next {
margin-left: var(--td-comp-margin-s);
}
.t-pagination__btn + .t-pagination__select {
margin-right: 0;
}
.t-pagination__pager {
flex-shrink: 0;
display: inline-flex;
vertical-align: middle;
list-style: none;
padding: 0;
margin: 0;
}
.t-pagination__pager li:not(:last-child) {
margin-right: var(--td-comp-margin-s);
}
.t-pagination__number {
display: inline-block;
border: 1px solid var(--td-component-border);
text-align: center;
border-radius: var(--td-radius-default);
cursor: pointer;
background-color: var(--td-bg-color-container);
box-sizing: border-box;
height: var(--td-comp-size-m);
min-width: var(--td-comp-size-m);
line-height: calc(var(--td-comp-size-m) - 2px);
font-size: var(--td-font-body-medium);
padding-left: var(--td-comp-paddingLR-xs);
padding-right: var(--td-comp-paddingLR-xs);
}
.t-pagination__number:hover {
color: var(--td-brand-color-hover);
border-color: var(--td-brand-color-hover);
transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-pagination__number:active {
background-color: var(--td-brand-color);
color: var(--td-text-color-anti);
border-color: var(--td-brand-color);
}
.t-pagination__number.t-is-current {
background-color: var(--td-brand-color);
color: var(--td-text-color-anti);
border-color: var(--td-brand-color);
}
.t-pagination__number.t-is-current.t-is-disabled,
.t-pagination__number.t-is-current.t-is-disabled:hover,
.t-pagination__number.t-is-current.t-is-disabled:active {
background-color: var(--td-brand-color-focus);
color: var(--td-text-color-anti);
border-color: var(--td-brand-color-focus);
}
.t-pagination__number.t-is-disabled {
cursor: auto;
background-color: var(--td-bg-color-component-disabled);
color: var(--td-text-color-disabled);
}
.t-pagination__number.t-is-disabled:hover,
.t-pagination__number.t-is-disabled:active {
background-color: var(--td-bg-color-component-disabled);
color: var(--td-text-color-disabled);
border-color: var(--td-component-border);
}
.t-pagination__number--more {
border: 0 none;
padding: 0;
}
.t-pagination__number--more:hover {
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-secondarycontainer-hover);
transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-pagination__number--more:active {
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-secondarycontainer-active);
}
.t-pagination__number--more.t-is-disabled,
.t-pagination__number--more.t-is-disabled:hover,
.t-pagination__number--more.t-is-disabled:active {
background: none;
}
.t-pagination__number--more .t-icon-more {
transform: rotate(90deg);
color: var(--td-text-color-disabled);
}
.t-pagination__jump {
display: inline-flex;
align-items: center;
flex-shrink: 0;
margin-left: var(--td-comp-margin-s);
font-size: var(--td-font-body-medium);
gap: var(--td-comp-margin-s);
background-color: var(--td-bg-color-secondarycontainer);
height: var(--td-comp-size-m);
padding-left: var(--td-comp-margin-s);
border-radius: var(--td-radius-default);
}
.t-pagination .t-input-adornment__append {
border: none;
height: calc(var(--td-comp-size-m) - 4px);
color: var(--td-text-color-secondary);
background-color: transparent;
}
.t-pagination .t-input-adornment__append .t-input-adornment__text {
border: none;
}
.t-pagination .t-input-number {
width: 56px;
}
.t-pagination .t-input-number .t-input {
height: calc(var(--td-comp-size-m) - 4px);
border-radius: var(--td-radius-default);
}
.t-pagination .t-input-number .t-input__inner {
text-align: center;
}
.t-pagination.t-size-s {
font: var(--td-font-body-small);
}
.t-pagination.t-size-s .t-pagination__jump {
height: var(--td-comp-size-xs);
}
.t-pagination.t-size-s .t-input-adornment__append {
height: calc(var(--td-comp-size-xs) - 4px);
font: var(--td-font-body-small);
}
.t-pagination.t-size-s .t-input-number {
width: 48px;
}
.t-pagination.t-size-s .t-input-number .t-input {
height: calc(var(--td-comp-size-xs) - 4px);
}
.t-pagination.t-size-s .t-pagination__total {
font: var(--td-font-body-small);
}
.t-pagination.t-size-s .t-pagination__select {
height: var(--td-comp-size-xs);
font-size: var(--td-font-size-body-small);
}
.t-pagination.t-size-s .t-pagination__number {
border: 0 none;
height: var(--td-comp-size-xs);
min-width: var(--td-comp-size-xs);
line-height: var(--td-comp-size-xs);
font-size: var(--td-font-body-small);
padding-left: var(--td-comp-paddingLR-xxs);
padding-right: var(--td-comp-paddingLR-xxs);
}
.t-pagination.t-size-s .t-pagination__number:hover:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) {
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-secondarycontainer-hover);
transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-pagination.t-size-s .t-pagination__number:active:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) {
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-secondarycontainer-active);
}
.t-pagination.t-size-s .t-pagination__number.t-is-disabled {
background: none;
color: var(--td-text-color-disabled);
}
.t-pagination.t-size-s .t-pagination__number.t-is-current.t-is-disabled {
background-color: var(--td-brand-color-focus);
color: var(--td-text-color-anti);
border-color: var(--td-brand-color-focus);
}
.t-pagination.t-size-s .t-pagination__btn {
border: 0 none;
background: none;
width: var(--td-comp-size-xs);
height: var(--td-comp-size-xs);
line-height: var(--td-comp-size-xs);
}
.t-pagination.t-size-s .t-pagination__btn:hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
}
.t-pagination.t-size-s .t-pagination__btn:active {
background-color: var(--td-bg-color-secondarycontainer-active);
}
.t-pagination.t-size-s .t-pagination__btn.t-is-disabled,
.t-pagination.t-size-s .t-pagination__btn.t-is-disabled:hover,
.t-pagination.t-size-s .t-pagination__btn.t-is-disabled:active {
background: none;
color: var(--td-text-color-disabled);
}
/** IE 兼容 **/
.t-pagination-ie {
/** 在 IE11 以下浏览器，input autoWidth 计算无法依赖 observer，因而加上最小宽度，避免分页信息出现 0 的情况 */
}
.t-pagination-ie .t-select .t-input__inner {
min-width: 54px;
}
.default-step-icon {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
text-align: center;
border-radius: var(--td-radius-circle);
font-size: var(--td-font-size-body-large);
}
.t-steps {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: flex;
width: 100%;
}
.t-steps .t-steps-item {
flex: 1;
overflow: hidden;
vertical-align: top;
margin-right: var(--td-comp-margin-s);
position: relative;
display: flex;
}
.t-steps .t-steps-item:last-child {
flex: none;
}
.t-steps .t-steps-item__inner {
width: fit-content;
position: relative;
display: flex;
}
.t-steps .t-steps-item__inner.t-steps-item--clickable {
cursor: pointer;
}
.t-steps .t-steps-item--finish .t-steps-item__icon .t-icon {
color: var(--td-brand-color);
}
.t-steps .t-steps-item--finish .t-steps-item__icon--number {
border-color: var(--td-brand-color);
}
.t-steps .t-steps-item--finish .t-steps-item__title {
color: var(--td-text-color-primary);
font-weight: normal;
}
.t-steps .t-steps-item--finish .t-steps-item__description {
color: var(--td-text-color-secondary);
}
.t-steps .t-steps-item--process .t-steps-item__icon .t-icon {
color: var(--td-brand-color);
}
.t-steps .t-steps-item--process .t-steps-item__icon--number {
border-color: var(--td-brand-color);
background-color: var(--td-brand-color);
color: var(--td-text-color-anti);
font-weight: bold;
}
.t-steps .t-steps-item--process .t-steps-item__title {
color: var(--td-brand-color);
font-weight: bold;
}
.t-steps .t-steps-item--process .t-steps-item__description {
color: var(--td-text-color-secondary);
}
.t-steps .t-steps-item--error .t-steps-item__icon .t-icon {
color: var(--td-error-color);
}
.t-steps .t-steps-item--error .t-steps-item__icon--number {
color: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-steps .t-steps-item--error .t-steps-item__title {
color: var(--td-error-color);
}
.t-steps .t-steps-item--error .t-steps-item__description {
color: var(--td-text-color-secondary);
}
.t-steps .t-steps-item__icon {
vertical-align: top;
font-size: var(--td-font-size-body-medium);
margin-right: var(--td-comp-margin-s);
color: var(--td-text-color-placeholder);
}
.t-steps .t-steps-item__icon--number {
color: var(--td-text-color-placeholder);
border: 1px solid var(--td-text-color-placeholder);
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
text-align: center;
border-radius: var(--td-radius-circle);
font-size: var(--td-font-size-body-large);
}
.t-steps .t-steps-item__icon--finish {
border: 1px solid var(--td-brand-color);
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
text-align: center;
border-radius: var(--td-radius-circle);
font-size: var(--td-font-size-body-large);
}
.t-steps .t-steps-item__icon--error {
border: 1px solid var(--td-error-color);
color: #000;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
text-align: center;
border-radius: var(--td-radius-circle);
font-size: var(--td-font-size-body-large);
}
.t-steps .t-steps-item__icon > .t-icon {
font-size: calc(var(--td-font-size-body-medium) + 10px);
}
.t-steps .t-steps-item__title {
position: relative;
padding-right: var(--td-comp-margin-s);
color: var(--td-text-color-placeholder);
font-size: var(--td-font-size-body-large);
line-height: 24px;
}
.t-steps .t-steps-item__description {
color: var(--td-text-color-placeholder);
font-size: var(--td-font-size-body-medium);
margin-bottom: var(--td-comp-margin-xs);
line-height: 22px;
}
.t-steps--line-separator .t-steps-item:before,
.t-steps--line-separator .t-steps-item:after,
.t-steps--line-separator .t-steps-item__title:after {
border-style: solid;
}
.t-steps--dashed-separator .t-steps-item:before,
.t-steps--dashed-separator .t-steps-item:after,
.t-steps--dashed-separator .t-steps-item__title:after {
border-style: dashed;
}
.t-steps--horizontal.t-steps--default-anchor .t-steps-item__title {
width: fit-content;
margin-bottom: var(--td-comp-margin-xs);
}
.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number {
width: 22px;
height: 22px;
}
.t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon {
font-size: calc(var(--td-font-size-body-medium) + 10px);
}
.t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title:after {
content: "";
display: block;
width: 9999px;
border-left: 0;
border-top: 0;
border-bottom-width: 1px;
border-bottom-color: var(--td-text-color-placeholder);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
flex: 1;
height: 24px;
content: "^";
transform: rotateZ(90deg);
display: inline-flex;
justify-content: center;
align-items: flex-end;
border: 0;
font-size: var(--td-font-size-body-large);
color: var(--td-text-color-placeholder);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
border-bottom-width: 2px;
border-bottom-color: var(--td-brand-color);
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item:not(:last-child) .t-steps-item__title:after {
content: "";
display: block;
width: 9999px;
border-left: 0;
border-top: 0;
border-bottom-width: 1px;
border-bottom-color: var(--td-text-color-placeholder);
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
flex: 1;
height: 24px;
content: "^";
transform: rotateZ(90deg);
display: inline-flex;
justify-content: center;
align-items: flex-end;
border: 0;
font-size: var(--td-font-size-body-large);
color: var(--td-text-color-placeholder);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
transform: rotateZ(-90deg);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after,
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
border-bottom-width: 2px;
border-bottom-color: var(--td-brand-color);
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--process:not(:last-child) .t-steps-item__title:after,
.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
border-bottom-width: 2px;
border-bottom-color: var(--td-brand-color);
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item {
overflow: visible;
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title {
padding-right: 0;
margin-bottom: var(--td-comp-margin-xs);
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon {
border-color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon {
background: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon {
background: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__inner {
display: flex;
flex-direction: column;
align-items: center;
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__icon {
display: block;
width: 8px;
height: 8px;
border: 2px solid var(--td-text-color-placeholder);
border-radius: var(--td-radius-circle);
margin-bottom: var(--td-comp-margin-xs);
position: relative;
box-sizing: border-box;
flex-shrink: 0;
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content {
text-align: center;
width: 140px;
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
flex: 1;
content: "^";
display: inline-flex;
justify-content: center;
align-items: flex-start;
border: 0;
font-size: var(--td-font-size-body-large);
transform: rotateZ(90deg);
color: var(--td-text-color-placeholder);
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child)::after {
content: "";
display: block;
width: calc(100% - 16px);
border-left: 0;
border-top: 0;
border-bottom-width: 1px;
border-bottom-color: var(--td-text-color-placeholder);
position: absolute;
left: calc(140px / 2 + 8px);
top: 2.5px;
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child):not(.t-steps-item--finish)::after {
border-color: var(--td-text-color-placeholder);
}
.t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
border-bottom-color: var(--td-brand-color);
border-bottom-width: 2px;
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
flex: 1;
content: "^";
display: inline-flex;
justify-content: center;
align-items: flex-start;
border: 0;
font-size: var(--td-font-size-body-large);
transform: rotateZ(90deg);
color: var(--td-text-color-placeholder);
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
transform: rotateZ(-90deg);
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after,
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child)::after {
content: "";
display: block;
width: calc(100% - 16px);
border-left: 0;
border-top: 0;
border-bottom-width: 1px;
border-bottom-color: var(--td-text-color-placeholder);
position: absolute;
left: calc(140px / 2 + 8px);
top: 2.5px;
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child):not(.t-steps-item--finish)::after {
border-color: var(--td-text-color-placeholder);
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
border-bottom-color: var(--td-brand-color);
border-bottom-width: 2px;
}
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--process:not(:last-child)::after,
.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after {
color: var(--td-brand-color);
border-bottom-color: var(--td-brand-color);
border-bottom-width: 2px;
}
.t-steps--vertical {
width: fit-content;
flex-direction: column;
}
.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
content: "^";
border: 0;
height: calc(100% - 24px);
position: absolute;
top: 24px;
left: 6px;
display: flex;
align-items: center;
font-size: var(--td-font-size-body-large);
transform: rotateZ(180deg);
color: var(--td-text-color-placeholder);
}
.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--positive .t-steps-item {
padding-bottom: var(--td-comp-margin-xxl);
margin-bottom: 5px;
}
.t-steps--vertical.t-steps--positive .t-steps-item:not(:last-child)::before {
content: "";
display: block;
height: 100%;
border-left: 0;
border-top: 0;
border-right-width: 1px;
border-right-color: var(--td-text-color-placeholder);
position: absolute;
top: 35px;
left: 11px;
}
.t-steps--vertical.t-steps--positive .t-steps-item--finish:not(:last-child)::before {
border-right-width: 2px;
border-right-color: var(--td-brand-color);
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--default-anchor .t-steps-item__content {
margin-left: 0px;
}
.t-steps--vertical.t-steps--default-anchor .t-steps-item__title {
margin-bottom: var(--td-comp-margin-xs);
}
.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
content: "^";
border: 0;
height: calc(100% - 4px);
position: absolute;
top: 8px;
left: 0;
display: flex;
align-items: center;
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-placeholder);
}
.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child)::before {
content: "";
display: block;
height: 100%;
border-bottom: 0;
border-left: 0;
border-right-width: 1px;
border-right-color: var(--td-text-color-placeholder);
position: absolute;
left: 3.5px;
top: 17px;
}
.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item--finish:not(:last-child)::before {
color: var(--td-brand-color);
border-right-color: var(--td-brand-color);
border-right-width: 2px;
}
.t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child).t-steps-item--default::before {
border-color: var(--td-text-color-placeholder);
}
.t-steps--vertical.t-steps--dot-anchor .t-steps-item {
margin-bottom: 0;
}
.t-steps--vertical.t-steps--dot-anchor .t-steps-item .t-steps-item__title {
margin-bottom: var(--td-comp-margin-xs);
}
.t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon {
border-color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon {
background: var(--td-brand-color);
border-color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon {
background: var(--td-error-color);
border-color: var(--td-error-color);
}
.t-steps--vertical.t-steps--dot-anchor .t-steps-item__icon {
display: block;
width: 8px;
height: 8px;
border: 2px solid var(--td-text-color-placeholder);
border-radius: var(--td-radius-circle);
margin-bottom: var(--td-comp-margin-xs);
position: relative;
box-sizing: border-box;
flex-shrink: 0;
top: 8px;
}
.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
content: "^";
border: 0;
height: calc(100% - 24px);
position: absolute;
top: 24px;
left: 6px;
display: flex;
align-items: center;
font-size: var(--td-font-size-body-large);
transform: rotateZ(180deg);
color: var(--td-text-color-placeholder);
}
.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
transform: rotateZ(0);
margin-top: var(--td-comp-margin-xs);
}
.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before,
.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--reverse .t-steps-item {
padding-bottom: var(--td-comp-margin-xxl);
margin-bottom: 5px;
}
.t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child)::before {
content: "";
display: block;
height: 100%;
border-left: 0;
border-bottom: 0;
border-right-width: 1px;
border-right-color: var(--td-text-color-placeholder);
position: absolute;
top: 35px;
left: 11px;
}
.t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:last-child)::before,
.t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:last-child)::before {
border-right-width: 2px;
border-right-color: var(--td-brand-color);
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
content: "^";
border: 0;
height: calc(100% - 4px);
position: absolute;
top: 8px;
left: 0;
display: flex;
align-items: center;
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-placeholder);
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before,
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item {
margin-bottom: 0;
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child)::before {
content: "";
display: block;
height: 100%;
border-bottom: 0;
border-left: 0;
border-right-width: 1px;
border-right-color: var(--td-text-color-placeholder);
position: absolute;
left: 3.5px;
top: 17px;
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:last-child::before {
display: none;
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:last-child)::before,
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::before {
border-right-width: 2px;
border-right-color: var(--td-brand-color);
color: var(--td-brand-color);
}
.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child).t-steps-item--default::before {
border-color: var(--td-text-color-placeholder);
}
.t-sticky-tool {
position: fixed;
opacity: 1;
box-sizing: border-box;
background-color: var(--td-bg-color-container);
border: 0.5px solid var(--td-component-border);
box-shadow: var(--td-shadow-3);
}
.t-sticky-tool-popup-content {
box-shadow: var(--td-shadow-3);
font-size: var(--td-font-size-body-small);
color: var(--td-text-color-secondary);
}
.t-sticky-tool .t-sticky-item {
opacity: 1;
position: relative;
margin: var(--td-comp-margin-xs);
text-align: center;
font-size: var(--td-font-size-body-small);
color: var(--td-text-color-secondary);
transition: background-color 0.2s linear;
}
.t-sticky-tool .t-sticky-item:hover {
cursor: pointer;
background-color: var(--td-bg-color-container-hover);
}
.t-sticky-tool .t-sticky-item--normal {
width: var(--td-comp-size-xxxl);
height: var(--td-comp-size-xxxl);
}
.t-sticky-tool .t-sticky-item--normal .t-icon {
width: 24px;
height: 24px;
margin: var(--td-comp-margin-s) var(--td-comp-margin-l) 0 var(--td-comp-margin-l);
color: var(--td-text-color-primary);
}
.t-sticky-tool .t-sticky-item--compact {
width: var(--td-comp-size-xl);
height: var(--td-comp-size-xl);
}
.t-sticky-tool .t-sticky-item--compact .t-icon {
width: 24px;
height: 24px;
margin: var(--td-comp-margin-s);
color: var(--td-text-color-primary);
}
.t-sticky-tool .t-sticky-item--square {
border-radius: var(--td-radius-default);
}
.t-sticky-tool .t-sticky-item--round {
border-radius: var(--td-radius-circle);
}
.t-sticky-tool .t-sticky-item .t-sticky-item__label {
width: 100%;
height: var(--td-comp-size-xxs);
line-height: var(--td-comp-size-xxs);
margin-top: var(--td-comp-margin-xxs);
text-align: center;
}
.t-sticky-tool--square {
border-radius: var(--td-radius-medium);
}
.t-sticky-tool--round {
border-radius: var(--td-radius-round);
}
.t-back-top {
position: fixed;
z-index: 300;
overflow: hidden;
outline: none;
border-color: transparent;
background-color: transparent;
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
vertical-align: middle;
white-space: nowrap;
border-width: 0.5px;
border-style: solid;
transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear;
touch-action: manipulation;
box-shadow: var(--td-shadow-3);
visibility: hidden;
opacity: 0;
color: var(--td-text-color-primary);
}
.t-back-top__text {
font: var(--td-font-body-small);
text-align: center;
margin-top: var(--td-comp-margin-xxs);
}
.t-back-top__icon {
font-size: var(--td-font-headline-small);
}
.t-back-top.t-size-m .t-back-top__icon {
margin-top: 2px;
}
.t-back-top--show {
visibility: visible;
opacity: 1;
}
.t-back-top--theme-light {
border-color: var(--td-component-border);
background-color: var(--td-bg-color-container);
}
.t-back-top--theme-light:hover {
border-color: var(--td-bg-color-container-hover);
background-color: var(--td-bg-color-container-hover);
}
.t-back-top--theme-light .t-back-top__text {
color: var(--td-text-color-secondary);
}
.t-back-top--theme-light .t-back-top__icon {
color: var(--td-text-color-primary);
}
.t-back-top--theme-primary {
border-color: var(--td-brand-color);
background-color: var(--td-brand-color);
}
.t-back-top--theme-primary:hover {
border-color: var(--td-brand-color-hover);
background-color: var(--td-brand-color-hover);
}
.t-back-top--theme-primary .t-back-top__text {
color: var(--td-text-color-anti);
}
.t-back-top--theme-primary .t-back-top__icon {
color: var(--td-text-color-anti);
}
.t-back-top--theme-dark {
border-color: rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.9);
}
.t-back-top--theme-dark:hover {
border-color: rgba(0, 0, 0, 0.6);
background-color: rgba(0, 0, 0, 0.6);
}
.t-back-top--theme-dark .t-back-top__text {
color: var(--td-text-color-anti);
}
.t-back-top--theme-dark .t-back-top__icon {
color: var(--td-text-color-anti);
}
.t-back-top.t-size-s {
width: var(--td-comp-size-xxl);
height: var(--td-comp-size-xxl);
}
.t-back-top.t-size-s .t-back-top__text {
display: none;
}
.t-back-top.t-size-m {
width: var(--td-comp-size-xxxxl);
height: var(--td-comp-size-xxxxl);
}
.t-back-top.t-size-m .t-back-top__text {
display: block;
}
.t-back-top--circle {
border-radius: var(--td-radius-circle);
}
.t-back-top--square {
border-radius: var(--td-radius-medium);
}
.t-select-option__highlight-item .t-is-highlight {
color: var(--td-brand-color);
}
.t-auto-complete {
width: 100%;
}
.t-auto-complete .t-input__suffix-clear {
display: none;
}
.t-auto-complete:hover .t-input__suffix-clear {
display: inline-block;
}
.t-auto-complete__panel--empty {
height: var(--td-comp-size-m);
line-height: var(--td-comp-size-m);
color: var(--td-text-color-disabled);
text-align: center;
}
.t-cascader .t-fake-arrow {
color: var(--td-text-color-placeholder);
}
.t-cascader .t-fake-arrow--active {
color: var(--td-brand-color);
}
.t-cascader__popup .t-popup__content {
padding: 0;
box-shadow: var(--td-shadow-2);
border-radius: var(--td-radius-medium);
border: 0.5px solid var(--td-component-border);
overflow: hidden;
}
.t-cascader__panel {
display: flex;
height: 100%;
}
.t-cascader__panel.t-cascader--normal {
height: 200px;
}
.t-cascader__panel.t-cascader--multiple {
height: 280px;
}
.t-cascader__panel--empty {
width: 100%;
height: var(--td-comp-size-s);
line-height: var(--td-comp-size-s);
color: var(--td-text-color-disabled);
margin: var(--td-pop-padding-m);
text-align: center;
padding-left: 0;
}
.t-cascader__panel--empty:hover {
background: none;
cursor: default;
}
.t-cascader__menu {
width: 148px;
overflow: auto;
box-sizing: content-box;
padding: var(--td-pop-padding-m);
background: var(--td-bg-color-container);
margin: 0;
}
.t-cascader__menu.t-size-l {
padding: var(--td-pop-padding-l);
}
.t-cascader__menu.t-size-s {
padding: var(--td-pop-padding-s);
}
.t-cascader__menu--segment {
border-right: 1px solid var(--td-component-stroke);
}
.t-cascader__menu--filter {
width: auto;
min-width: 148px;
}
.t-cascader__item {
position: relative;
display: flex;
align-items: center;
height: var(--td-comp-size-s);
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
padding: 0 var(--td-comp-paddingLR-s);
border-radius: var(--td-radius-default);
margin-top: var(--td-comp-margin-xxs);
transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
list-style: none;
--ripple-color: var(--td-bg-color-container-active);
}
.t-cascader__item.t-size-s {
height: var(--td-comp-size-xs);
font: var(--td-font-body-small);
padding: 0px var(--td-comp-paddingLR-s);
}
.t-cascader__item.t-size-l {
height: var(--td-comp-size-m);
font: var(--td-font-body-large);
padding: 0 var(--td-comp-paddingLR-m);
}
.t-cascader__item.t-is-disabled {
color: var(--td-text-color-disabled);
background-color: transparent;
cursor: not-allowed;
}
.t-cascader__item-icon.t-icon {
position: absolute;
height: 100%;
right: 0;
top: 0;
background: transparent;
margin: 0 8px;
font-size: 16px;
color: var(--td-text-color-placeholder);
}
.t-cascader__item-icon.t-loading {
display: flex;
color: var(--td-text-color-brand);
}
.t-cascader__item.t-is-expanded {
background: var(--td-brand-color-light);
color: var(--td-text-color-brand);
}
.t-cascader__item.t-is-expanded .t-icon-chevron-right {
color: var(--td-text-color-brand);
}
.t-cascader__item.t-is-expanded:hover {
cursor: pointer;
}
.t-cascader__item:first-child {
margin-top: 0;
}
.t-cascader__item .t-checkbox {
max-width: 100%;
}
.t-cascader__item .t-checkbox .t-checkbox__input {
flex-shrink: 0;
}
.t-cascader__item .t-checkbox .t-checkbox__label {
display: block;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-cascader__item .t-checkbox .t-checkbox__label .t-cascader__item__label--filter {
color: var(--td-text-color-brand);
}
.t-cascader__item--with-icon .t-checkbox__label,
.t-cascader__item--with-icon .t-cascader__item-label {
margin-right: 16px;
}
.t-cascader__item--leaf .t-checkbox {
width: 100%;
}
.t-cascader__item-label {
display: block;
position: relative;
white-space: nowrap;
padding: 0;
}
.t-cascader__item-label--ellipsis {
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-cascader__item-label--filter {
color: var(--td-text-color-brand);
}
.t-cascader__item:hover:not(.t-is-expanded):not(.t-is-disabled) {
background: var(--td-bg-color-container-hover);
cursor: pointer;
}
.t-cascader__item.t-is-selected {
color: var(--td-brand-color);
background: var(--td-brand-color-light);
}
.t-cascader__item.t-is-selected .t-checkbox__label {
color: var(--td-brand-color);
}
.range-input-disabled.t-is-disabled {
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
}
.range-input-disabled.t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
}
.range-input-disabled.t-is-disabled .t-range-input__inner {
cursor: not-allowed;
color: var(--td-text-color-disabled);
}
.range-input-disabled.t-is-disabled .t-range-input__inner::placeholder {
color: var(--td-text-color-disabled);
}
.range-input-disabled.t-is-disabled > .t-range-input__prefix .t-icon,
.range-input-disabled.t-is-disabled > .t-range-input__suffix .t-icon {
color: var(--td-text-color-disabled);
}
.t-range-input {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
position: relative;
font: var(--td-font-body-medium);
height: var(--td-comp-size-m);
border-width: 1px;
border-style: solid;
border-radius: var(--td-radius-default);
border-color: var(--td-border-level-2-color);
padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
background-color: var(--td-bg-color-specialcomponent);
color: var(--td-text-color-primary);
font-size: var(--td-font-body-medium);
box-sizing: border-box;
transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
display: inline-flex;
flex-direction: column;
gap: 4px;
}
.t-range-input:hover {
border-color: var(--td-brand-color);
}
.t-range-input--borderless:not(.t-is-focused) {
border-color: transparent;
transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
}
.t-range-input--borderless:not(.t-is-focused):hover {
border-color: var(--td-component-border);
cursor: pointer;
}
.t-range-input--borderless:not(.t-is-focused).t-is-disabled {
border: none;
background-color: var(--td-bg-color-component-disabled);
}
.t-range-input.t-is-focused {
z-index: 1;
border-color: var(--td-brand-color);
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}
.t-range-input.t-is-success {
border-color: var(--td-success-color);
}
.t-range-input.t-is-success:focus {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-range-input.t-is-success.t-range-input--focused {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-range-input.t-is-success > .t-range-input__extra {
color: var(--td-success-color);
}
.t-range-input.t-is-success > .t-range-input__tips {
color: var(--td-success-color);
font-size: var(--td-font-size-body-small);
margin-left: calc(-1 * var(--td-comp-paddingLR-xs));
}
.t-range-input.t-is-warning {
border-color: var(--td-warning-color);
}
.t-range-input.t-is-warning:focus {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-range-input.t-is-warning.t-range-input--focused {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-range-input.t-is-warning > .t-range-input__extra {
color: var(--td-warning-color);
}
.t-range-input.t-is-warning > .t-range-input__tips {
color: var(--td-warning-color);
font-size: var(--td-font-size-body-small);
margin-left: calc(-1 * var(--td-comp-paddingLR-xs));
}
.t-range-input.t-is-error {
border-color: var(--td-error-color);
}
.t-range-input.t-is-error:focus {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-range-input.t-is-error.t-range-input--focused {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-range-input.t-is-error > .t-range-input__extra {
color: var(--td-error-color);
}
.t-range-input.t-is-error > .t-range-input__tips {
color: var(--td-error-color);
font-size: var(--td-font-size-body-small);
margin-left: calc(-1 * var(--td-comp-paddingLR-xs));
}
.t-range-input.t-is-disabled {
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
}
.t-range-input.t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
}
.t-range-input.t-is-disabled .t-range-input__inner {
cursor: not-allowed;
color: var(--td-text-color-disabled);
}
.t-range-input.t-is-disabled .t-range-input__inner::placeholder {
color: var(--td-text-color-disabled);
}
.t-range-input.t-is-disabled > .t-range-input__prefix .t-icon,
.t-range-input.t-is-disabled > .t-range-input__suffix .t-icon {
color: var(--td-text-color-disabled);
}
.t-range-input.t-range-input--prefix .t-range-input__prefix {
height: 100%;
text-align: center;
display: flex;
align-items: center;
font-size: var(--td-font-size-body-medium);
}
.t-range-input.t-range-input--suffix .t-range-input__suffix {
height: 100%;
text-align: center;
display: flex;
align-items: center;
font-size: var(--td-font-size-body-medium);
}
.t-range-input.t-size-l {
height: var(--td-comp-size-xl);
font: var(--td-font-body-large);
padding-top: var(--td-comp-paddingTB-xs);
padding-bottom: var(--td-comp-paddingTB-xs);
}
.t-range-input.t-size-l .t-input {
padding: 0 var(--td-comp-margin-s);
}
.t-range-input.t-size-s {
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-margin-xs);
height: var(--td-comp-size-xs);
font: var(--td-font-body-small);
}
.t-range-input__inner {
height: 100%;
display: flex;
align-items: center;
gap: var(--td-comp-margin-s);
}
.t-range-input__inner .t-input__wrap {
height: 100%;
border-radius: var(--td-radius-small);
}
.t-range-input__inner > .t-range-input__prefix {
flex-shrink: 0;
}
.t-range-input__inner .t-input {
padding: 0 var(--td-comp-paddingLR-xs);
height: 100%;
border: 0;
box-shadow: none;
font-size: inherit;
border-radius: var(--td-radius-small);
}
.t-range-input__inner .t-input:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-range-input__inner .t-input__inner {
width: 100%;
height: 100%;
line-height: 1;
}
.t-range-input__inner .t-input.t-is-focused {
background-color: var(--td-bg-color-component);
}
.t-range-input__extra {
font: var(--td-font-body-small);
color: var(--td-text-color-placeholder);
}
.t-range-input__status {
position: absolute;
right: calc(0px - var(--td-comp-margin-xxxl));
top: 0;
}
.t-range-input.t-range-input--suffix .t-input__clear {
opacity: 0;
visibility: hidden;
transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
}
.t-range-input.t-range-input--suffix:hover .t-input__clear {
opacity: 1;
visibility: visible;
}
.t-range-input .t-range-input__suffix-clear {
cursor: pointer;
}
.t-range-input__prefix > .t-icon,
.t-range-input__suffix > .t-icon {
transition: color 0.2s linear;
font-size: 16px;
color: var(--td-text-color-placeholder);
flex-shrink: 0;
}
.t-range-input-popup {
width: 100%;
}
.t-range-input-popup--visible .t-range-input {
border-color: var(--td-brand-color);
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}
.t-range-input-popup--visible .t-range-input .t-icon-time,
.t-range-input-popup--visible .t-range-input .t-icon-calendar {
color: var(--td-brand-color);
}
.t-range-input-popup--visible .t-range-input .t-input.t-is-focused {
background-color: var(--td-bg-color-component);
}
.t-date-picker,
.t-date-range-picker {
display: inline-flex;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-date-picker__header-controller-month-popup > .t-popup__content,
.t-date-picker__header-controller-year-popup > .t-popup__content {
max-height: 160px;
}
.t-date-picker__panel-container > .t-popup__content,
.t-date-range-picker__panel-container > .t-popup__content {
padding: 0;
min-width: 280px;
}
.t-date-picker__panel,
.t-date-range-picker__panel {
display: flex;
flex-direction: column;
}
.t-date-picker__panel--direction-row,
.t-date-range-picker__panel--direction-row {
flex-direction: row;
}
.t-date-picker__panel .t-time-picker__panel,
.t-date-range-picker__panel .t-time-picker__panel {
width: 216px;
}
.t-date-picker__panel .t-time-picker__panel-section-body,
.t-date-range-picker__panel .t-time-picker__panel-section-body {
padding: 0;
}
.t-date-picker__panel .t-time-picker__panel-body,
.t-date-range-picker__panel .t-time-picker__panel-body {
margin: 0;
}
.t-date-picker__panel-content,
.t-date-range-picker__panel-content,
.t-date-range-picker__panel-content-wrapper {
display: flex;
}
.t-date-picker__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--td-comp-margin-m);
width: 100%;
}
.t-date-picker__header-controller {
display: inline-flex;
gap: var(--td-comp-margin-s);
}
.t-date-picker__header-controller .t-date-picker__header-controller-month {
width: 80px;
display: flex;
}
.t-date-picker__header-controller .t-date-picker__header-controller-year {
width: 78px;
display: flex;
}
.t-date-picker__table table {
width: 100%;
border-collapse: collapse;
}
.t-date-picker__table table th {
text-align: center;
color: var(--td-text-color-secondary);
font-weight: 400;
}
.t-date-picker__table table td.t-date-picker__cell {
text-align: center;
font-weight: 500;
}
.t-date-picker__table table th,
.t-date-picker__table table th.t-date-picker__table-header-cell,
.t-date-picker__table table td.t-date-picker__cell {
padding: 0;
border: 0;
line-height: var(--td-line-height-body-medium);
}
.t-date-picker__table table thead::after {
content: "-";
display: block;
line-height: var(--td-comp-margin-xs);
color: transparent;
}
.t-date-picker__table table thead::before {
content: "-";
display: block;
line-height: var(--td-comp-margin-xs);
color: transparent;
}
.t-date-picker__table-week-row {
cursor: pointer;
position: sticky;
}
.t-date-picker__table-week-row .t-date-picker__cell:first-child .t-date-picker__cell-inner {
color: var(--td-text-color-disabled);
}
.t-date-picker__table-week-row .t-date-picker__cell:hover .t-date-picker__cell-inner {
box-shadow: none;
background: none;
}
.t-date-picker__table-week-row::after {
content: "";
position: absolute;
left: var(--td-comp-margin-xxxl);
right: 0;
top: calc(var(--td-comp-margin-xs) - 1px);
z-index: 10;
height: var(--td-comp-size-xs);
border-radius: var(--td-radius-default);
transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;
pointer-events: none;
}
.t-date-picker__table-week-row:hover .t-date-picker__cell:first-child .t-date-picker__cell-inner {
color: var(--td-brand-color);
}
.t-date-picker__table-week-row:hover::after {
box-shadow: inset 0 0 0 1px var(--td-brand-color);
}
.t-date-picker__table-week-row--active::after {
opacity: 1;
z-index: 0;
background-color: var(--td-brand-color);
}
.t-date-picker__table-week-row--active .t-date-picker__cell:first-child .t-date-picker__cell-inner {
color: var(--td-brand-color);
}
.t-date-picker__table-week-row--active .t-date-picker__cell .t-date-picker__cell-inner {
background: transparent;
color: var(--td-text-color-anti);
}
.t-date-picker__table-week-row--range::after {
opacity: 1;
z-index: 0;
background-color: var(--td-brand-color-light);
}
.t-date-picker__table-week-row--range .t-date-picker__cell .t-date-picker__cell-inner {
background: transparent;
}
.t-date-picker__footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--td-pop-padding-xl);
gap: var(--td-comp-margin-s);
}
.t-date-picker__footer--bottom {
border-top: 1px solid var(--td-component-stroke);
}
.t-date-picker__footer--top {
border-bottom: 1px solid var(--td-component-stroke);
}
.t-date-picker__footer--left {
flex-direction: column;
border-right: 1px solid var(--td-component-stroke);
}
.t-date-picker__footer--left .t-date-picker__presets {
flex-direction: column;
}
.t-date-picker__footer--right {
flex-direction: column;
border-left: 1px solid var(--td-component-stroke);
}
.t-date-picker__footer--right .t-date-picker__presets {
flex-direction: column;
}
.t-date-picker__presets {
display: flex;
gap: var(--td-comp-margin-s);
white-space: nowrap;
min-width: var(--td-comp-size-xl);
}
.t-date-picker__presets .t-button {
cursor: pointer;
}
.t-date-picker__presets a {
color: var(--td-brand-color);
}
.t-date-picker__presets a:hover {
color: var(--td-brand-color-hover);
}
.t-date-picker__panel-time,
.t-date-range-picker__panel-time {
display: flex;
flex-direction: column;
gap: calc(var(--td-comp-margin-m) / 2);
padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs));
border-left: 1px solid var(--td-component-stroke);
}
.t-date-picker__panel-time-viewer,
.t-date-range-picker__panel-time-viewer {
display: flex;
height: var(--td-comp-size-m);
line-height: var(--td-line-height-body-medium);
align-items: center;
justify-content: center;
color: var(--td-text-color-primary);
}
.t-date-picker__panel-time .t-time-picker__panel-body,
.t-date-range-picker__panel-time .t-time-picker__panel-body {
margin: 0;
}
.t-date-picker__panel-year,
.t-date-picker__panel-month,
.t-date-picker__panel-quarter,
.t-date-picker__panel-week,
.t-date-picker__panel-date {
display: flex;
flex-direction: column;
padding: var(--td-pop-padding-xl);
gap: var(--td-comp-margin-m);
width: 280px;
box-sizing: border-box;
}
.t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::before,
.t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::before,
.t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after,
.t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after {
opacity: 1;
left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl)));
}
.t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--active::after,
.t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--active::after {
opacity: 1;
left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl)));
z-index: 5;
}
.t-date-picker__panel-year .t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before,
.t-date-picker__panel-month .t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before {
left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl)));
}
.t-date-picker__panel-year .t-date-picker__header-controller-year,
.t-date-picker__panel-month .t-date-picker__header-controller-year,
.t-date-picker__panel-quarter .t-date-picker__header-controller-year {
width: 130px;
display: flex;
}
.t-date-picker__panel-year .t-date-picker__table table tbody,
.t-date-picker__panel-month .t-date-picker__table table tbody,
.t-date-picker__panel-quarter .t-date-picker__table table tbody {
width: 100%;
display: flex;
gap: var(--td-comp-margin-m);
flex-direction: column;
}
.t-date-picker__panel-year .t-date-picker__table table tbody tr,
.t-date-picker__panel-month .t-date-picker__table table tbody tr,
.t-date-picker__panel-quarter .t-date-picker__table table tbody tr {
display: flex;
justify-content: space-between;
}
.t-date-picker__panel-year .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
.t-date-picker__panel-month .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before,
.t-date-picker__panel-quarter .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before {
left: calc(0px - var(--td-comp-size-xxxl));
}
.t-date-picker__panel-year .t-date-picker__cell:nth-child(1),
.t-date-picker__panel-month .t-date-picker__cell:nth-child(1),
.t-date-picker__panel-quarter .t-date-picker__cell:nth-child(1) {
text-align: left;
}
.t-date-picker__panel-year .t-date-picker__cell:nth-child(3),
.t-date-picker__panel-month .t-date-picker__cell:nth-child(3),
.t-date-picker__panel-quarter .t-date-picker__cell:nth-child(3) {
text-align: right;
}
.t-date-picker__panel-year .t-date-picker__cell-inner,
.t-date-picker__panel-month .t-date-picker__cell-inner,
.t-date-picker__panel-quarter .t-date-picker__cell-inner {
width: var(--td-comp-size-xxl);
}
.t-date-picker__cell {
cursor: pointer;
position: relative;
padding: 0;
}
.t-date-picker__cell::before,
.t-date-picker__cell::after {
content: "";
position: absolute;
top: 50%;
right: -5%;
left: -5%;
z-index: 1;
opacity: 0;
border-radius: var(--td-radius-default);
height: var(--td-comp-size-xs);
transform: translateY(-50%);
transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
}
.t-date-picker__cell:hover .t-date-picker__cell-inner {
box-shadow: inset 0 0 0 1px var(--td-brand-color);
}
.t-date-picker__cell-inner {
position: relative;
z-index: 5;
display: inline-flex;
justify-content: center;
align-items: center;
width: var(--td-comp-size-xs);
height: var(--td-comp-size-xs);
margin: calc(var(--td-comp-margin-xs) - 1px);
border-radius: var(--td-radius-default);
transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;
}
.t-date-picker__cell--now .t-date-picker__cell-inner {
color: var(--td-brand-color);
background: var(--td-brand-color-light);
}
.t-date-picker__cell--hover-highlight::after {
opacity: 1;
background-color: var(--td-brand-color-light);
}
.t-date-picker__cell--highlight::before {
opacity: 1;
background-color: var(--td-brand-color-light);
}
.t-date-picker__cell--highlight.t-date-picker__cell--hover-highlight::after {
opacity: 1;
background-color: rgba(0, 0, 0, 0.06);
}
.t-date-picker__cell--additional:hover .t-date-picker__cell-inner {
box-shadow: none;
border-color: var(--td-bg-color-container-hover);
background-color: var(--td-bg-color-container-hover);
}
.t-date-picker__cell--additional .t-date-picker__cell-inner {
color: var(--td-text-color-disabled);
}
.t-date-picker__cell--active .t-date-picker__cell-inner {
color: var(--td-text-color-anti);
background-color: var(--td-brand-color);
}
.t-date-picker__cell--active-start::before {
opacity: 1;
left: calc(calc(var(--td-comp-margin-xs) - 1px) * 2);
border-top-left-radius: var(--td-radius-default);
border-bottom-left-radius: var(--td-radius-default);
}
.t-date-picker__cell--active-start:hover::before {
left: -5%;
}
.t-date-picker__cell--active-end::before {
opacity: 1;
right: calc(calc(var(--td-comp-margin-xs) - 1px) * 2);
border-top-right-radius: var(--td-radius-default);
border-bottom-right-radius: var(--td-radius-default);
}
.t-date-picker__cell--active-end:hover::before {
right: -5%;
}
.t-date-picker__cell--disabled:hover .t-date-picker__cell-inner {
box-shadow: none;
background-color: var(--td-bg-color-component-disabled);
}
.t-date-picker__cell--disabled .t-date-picker__cell-inner {
cursor: not-allowed;
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
}
.t-date-picker__cell--disabled + .t-date-picker__cell--disabled::before {
opacity: 1;
left: calc(0px - var(--td-comp-size-l));
background-color: var(--td-bg-color-component-disabled);
border-radius: var(--td-radius-default);
}
.t-date-picker__input--placeholder input {
color: var(--td-text-color-placeholder);
}
.t-form {
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
font: var(--td-font-body-medium);
}
.t-form:not(.t-form-inline) .t-form__item:last-of-type {
margin: 0;
}
.t-form__item {
margin-bottom: var(--td-comp-margin-xxl);
}
.t-form__item.t-form__item-with-help {
margin-bottom: var(--td-comp-margin-xs);
}
.t-form__item.t-form__item-with-extra {
margin-bottom: var(--td-comp-margin-xxl);
}
.t-form__label {
float: left;
padding-right: var(--td-comp-paddingLR-xl);
vertical-align: middle;
line-height: var(--td-comp-margin-xxxl);
color: var(--td-text-color-primary);
box-sizing: border-box;
white-space: nowrap;
}
.t-form__label--top {
float: none;
min-height: var(--td-comp-margin-xxxl);
}
.t-form__label--left {
text-align: left;
}
.t-form__label--right {
text-align: right;
}
.t-form__label--required:not(.t-form__label--required-right) label::before {
display: inline-block;
margin-right: var(--td-comp-margin-xs);
color: var(--td-error-color);
line-height: var(--td-line-height-body-medium);
content: "*";
}
.t-form__label--required-right label::after {
display: inline-block;
margin-left: var(--td-comp-margin-xs);
color: var(--td-error-color);
line-height: var(--td-line-height-body-medium);
content: "*";
}
.t-form__label--colon label::after {
content: ":";
position: relative;
margin: 0 var(--td-comp-margin-xxs);
}
.t-form__controls {
min-height: var(--td-comp-margin-xxxl);
display: flow-root;
position: relative;
}
.t-form__controls-content {
display: flex;
align-items: center;
min-height: var(--td-comp-margin-xxxl);
}
.t-form__controls .t-form__item {
margin-bottom: 0;
margin-right: var(--td-comp-margin-xxl);
}
.t-form__controls.t-is-success .t-form__status .t-icon {
color: var(--td-success-color);
}
.t-form__controls.t-is-success .t-input__extra {
color: var(--td-success-color);
}
.t-form__controls.t-form--success-border.t-is-success .t-input__extra {
color: var(--td-success-color);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner {
border-color: var(--td-success-color);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input--focused,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select--focused,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button--focused,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader--focused,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input--focused,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner--focused {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input .t-icon,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-range-input .t-fake-arrow,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
color: var(--td-success-color);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
color: var(--td-success-color);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button:last-child {
border-right-color: var(--td-success-color);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader.t-is-active,
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select.t-is-active {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-form__status .t-icon {
color: var(--td-success-color);
}
.t-form__status {
display: flex;
margin: 0 var(--td-comp-margin-s);
}
.t-form__status > .t-icon {
font-size: var(--td-comp-size-xxxs);
}
.t-form__status-without-icon {
width: 25px;
height: 25px;
}
.t-form__status button {
width: var(--td-comp-size-m);
}
.t-form__status button + button {
margin-left: var(--td-comp-margin-s);
}
.t-form-inline {
display: flex;
flex-wrap: wrap;
row-gap: var(--td-comp-margin-l);
}
.t-form-inline .t-form__item {
margin: 0;
min-width: 200px;
display: inline-block;
margin-right: var(--td-comp-margin-xxl);
}
.t-input__extra,
.t-input__help {
margin: 0;
width: 100%;
height: auto;
min-height: var(--td-line-height-body-small);
font: var(--td-font-body-small);
color: var(--td-text-color-placeholder);
}
.t-input__extra {
position: absolute;
bottom: calc(0px - var(--td-line-height-body-small));
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.t-is-warning .t-input__extra {
color: var(--td-warning-color);
}
.t-is-warning .t-form__controls-content .t-input,
.t-is-warning .t-form__controls-content .t-select,
.t-is-warning .t-form__controls-content .t-radio-button,
.t-is-warning .t-form__controls-content .t-cascader,
.t-is-warning .t-form__controls-content .t-range-input,
.t-is-warning .t-form__controls-content .t-textarea__inner {
border-color: var(--td-warning-color);
}
.t-is-warning .t-form__controls-content .t-input--focused,
.t-is-warning .t-form__controls-content .t-select--focused,
.t-is-warning .t-form__controls-content .t-radio-button--focused,
.t-is-warning .t-form__controls-content .t-cascader--focused,
.t-is-warning .t-form__controls-content .t-range-input--focused,
.t-is-warning .t-form__controls-content .t-textarea__inner--focused {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-is-warning .t-form__controls-content .t-input .t-icon,
.t-is-warning .t-form__controls-content .t-select .t-icon,
.t-is-warning .t-form__controls-content .t-radio-button .t-icon,
.t-is-warning .t-form__controls-content .t-cascader .t-icon,
.t-is-warning .t-form__controls-content .t-range-input .t-icon,
.t-is-warning .t-form__controls-content .t-textarea__inner .t-icon,
.t-is-warning .t-form__controls-content .t-input .t-fake-arrow,
.t-is-warning .t-form__controls-content .t-select .t-fake-arrow,
.t-is-warning .t-form__controls-content .t-radio-button .t-fake-arrow,
.t-is-warning .t-form__controls-content .t-cascader .t-fake-arrow,
.t-is-warning .t-form__controls-content .t-range-input .t-fake-arrow,
.t-is-warning .t-form__controls-content .t-textarea__inner .t-fake-arrow {
color: var(--td-warning-color);
}
.t-is-warning .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
color: var(--td-warning-color);
}
.t-is-warning .t-form__controls-content .t-radio-button:last-child {
border-right-color: var(--td-warning-color);
}
.t-is-warning .t-form__controls-content .t-textarea__inner.t-is-focused {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-is-warning .t-form__controls-content .t-cascader.t-is-active,
.t-is-warning .t-form__controls-content .t-select.t-is-active {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-is-warning .t-form__controls-content .t-form__status .t-icon {
color: var(--td-warning-color);
}
.t-is-error .t-input__extra {
color: var(--td-error-color);
}
.t-is-error .t-form__controls-content .t-input,
.t-is-error .t-form__controls-content .t-select,
.t-is-error .t-form__controls-content .t-radio-button,
.t-is-error .t-form__controls-content .t-cascader,
.t-is-error .t-form__controls-content .t-range-input,
.t-is-error .t-form__controls-content .t-textarea__inner {
border-color: var(--td-error-color);
}
.t-is-error .t-form__controls-content .t-input--focused,
.t-is-error .t-form__controls-content .t-select--focused,
.t-is-error .t-form__controls-content .t-radio-button--focused,
.t-is-error .t-form__controls-content .t-cascader--focused,
.t-is-error .t-form__controls-content .t-range-input--focused,
.t-is-error .t-form__controls-content .t-textarea__inner--focused {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-is-error .t-form__controls-content .t-input .t-icon,
.t-is-error .t-form__controls-content .t-select .t-icon,
.t-is-error .t-form__controls-content .t-radio-button .t-icon,
.t-is-error .t-form__controls-content .t-cascader .t-icon,
.t-is-error .t-form__controls-content .t-range-input .t-icon,
.t-is-error .t-form__controls-content .t-textarea__inner .t-icon,
.t-is-error .t-form__controls-content .t-input .t-fake-arrow,
.t-is-error .t-form__controls-content .t-select .t-fake-arrow,
.t-is-error .t-form__controls-content .t-radio-button .t-fake-arrow,
.t-is-error .t-form__controls-content .t-cascader .t-fake-arrow,
.t-is-error .t-form__controls-content .t-range-input .t-fake-arrow,
.t-is-error .t-form__controls-content .t-textarea__inner .t-fake-arrow {
color: var(--td-error-color);
}
.t-is-error .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
color: var(--td-error-color);
}
.t-is-error .t-form__controls-content .t-radio-button:last-child {
border-right-color: var(--td-error-color);
}
.t-is-error .t-form__controls-content .t-textarea__inner.t-is-focused {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-is-error .t-form__controls-content .t-cascader.t-is-active,
.t-is-error .t-form__controls-content .t-select.t-is-active {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-is-error .t-form__controls-content .t-form__status .t-icon {
color: var(--td-error-color);
}
.t-radio-group {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
border-radius: var(--td-radius-default);
flex-wrap: wrap;
}
@-moz-document url-prefix() {
.t-radio-group {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-radio-group::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.t-radio-group::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 7px;
}
.t-radio-group::-webkit-scrollbar-thumb:vertical:hover,
.t-radio-group::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-radio-group .t-radio {
margin-right: var(--td-comp-margin-xxl);
}
.t-radio-group.t-radio-group__outline {
flex-wrap: wrap;
row-gap: var(--td-comp-margin-xs);
}
.t-radio-group.t-radio-group__outline.t-size-s .t-radio-button {
height: var(--td-comp-size-xs);
}
.t-radio-group.t-radio-group__outline.t-size-m .t-radio-button {
height: var(--td-comp-size-m);
}
.t-radio-group.t-radio-group__outline.t-size-l .t-radio-button {
height: var(--td-comp-size-xl);
}
.t-radio-group.t-radio-group__outline .t-radio-button:first-child {
border-radius: var(--td-radius-default) 0 0 var(--td-radius-default);
}
.t-radio-group.t-radio-group__outline .t-radio-button:last-child {
border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0;
}
.t-radio-group.t-radio-group__outline .t-radio-button:only-child {
border-radius: var(--td-radius-default);
}
.t-radio-group.t-radio-group__outline .t-radio-button.t-is-checked {
color: var(--td-brand-color);
}
.t-radio-group.t-radio-group__outline .t-radio-button.t-is-disabled.t-is-checked {
color: var(--td-brand-color-disabled);
border-color: var(--td-brand-color-disabled);
background-color: var(--td-bg-color-specialcomponent);
}
.t-radio-group.t-radio-group--filled {
border-color: var(--td-bg-color-component);
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
border-radius: var(--td-radius-default);
background-color: var(--td-bg-color-component);
position: relative;
}
.t-radio-group.t-radio-group--filled .t-radio-group__bg-block {
position: absolute;
left: 2px;
top: 2px;
width: 0;
height: calc(100% - 4px);
background-color: var(--td-bg-color-container-select);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
border-radius: var(--td-radius-small);
}
.t-radio-group.t-radio-group--filled .t-radio-button {
color: var(--td-text-color-secondary);
border: 0;
background-color: transparent;
}
.t-radio-group.t-radio-group--filled .t-radio-button:hover {
color: var(--td-text-color-primary);
}
.t-radio-group.t-radio-group--filled .t-radio-button::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: calc(100% - 16px);
background-color: var(--td-component-border);
transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
}
.t-radio-group.t-radio-group--filled .t-radio-button:first-child::before {
opacity: 0;
}
.t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked {
position: relative;
color: var(--td-text-color-primary);
z-index: 1;
border: 0;
transition: color 0.2s linear;
}
.t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked::before {
opacity: 0;
}
.t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked + label::before {
opacity: 0;
}
.t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled {
background-color: transparent;
}
.t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled.t-is-checked {
color: var(--td-text-color-disabled);
}
.t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled.t-is-checked ~ .t-radio-group__bg-block {
background-color: var(--td-bg-color-component-disabled);
}
.t-radio-group.t-radio-group--primary-filled .t-radio-group__bg-block {
background-color: var(--td-brand-color);
}
.t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-checked {
color: var(--td-text-color-anti);
}
.t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-disabled.t-is-checked {
color: var(--td-text-color-anti);
}
.t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-disabled.t-is-checked ~ .t-radio-group__bg-block {
background-color: var(--td-brand-color-disabled);
}
.t-radio-group.t-size-s .t-radio-button {
height: calc(var(--td-comp-size-xs) - (var(--td-comp-paddingTB-xxs) * 2));
padding: 0px var(--td-comp-paddingLR-s);
font: var(--td-font-body-small);
}
.t-radio-group.t-size-s .t-radio-button::before {
height: calc(100% - 16px);
}
.t-radio-group.t-size-m .t-radio-button {
height: calc(var(--td-comp-size-m) - (var(--td-comp-paddingTB-xxs) * 2));
padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l);
font: var(--td-font-body-medium);
}
.t-radio-group.t-size-m .t-radio-button::before {
height: calc(100% - 20px);
}
.t-radio-group.t-size-l .t-radio-button {
height: calc(var(--td-comp-size-xl) - (var(--td-comp-paddingTB-xxs) * 2));
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl);
font: var(--td-font-body-large);
}
.t-radio-group.t-size-l .t-radio-button::before {
height: calc(100% - 24px);
}
.t-radio-group .t-radio-button {
cursor: pointer;
position: relative;
border: 1px solid;
border-color: var(--td-border-level-2-color);
border-right: 0;
display: inline-flex;
align-items: center;
transition: color 0.2s cubic-bezier(0, 0, 0.15, 1);
color: var(--td-text-color-primary);
white-space: nowrap;
box-sizing: border-box;
}
.t-radio-group .t-radio-button:first-child {
border-radius: var(--td-radius-small) 0 0 var(--td-radius-small);
}
.t-radio-group .t-radio-button:last-child {
border-right: 1px solid;
border-right-color: var(--td-border-level-2-color);
border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0;
}
.t-radio-group .t-radio-button__former {
opacity: 0;
height: 0;
width: 0;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-radio-group .t-radio-button:hover {
color: var(--td-brand-color);
}
.t-radio-group .t-radio-button.t-is-checked {
border-right: 1px solid;
border-color: var(--td-brand-color);
transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1);
}
.t-radio-group .t-radio-button.t-is-checked + .t-radio-button {
border-left: 0;
}
.t-radio-group .t-radio-button.t-is-disabled {
cursor: not-allowed;
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
}
.t-radio-group .t-radio-button.t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
color: var(--td-text-color-disabled);
}
.t-radio-group .t-radio-button.t-is-disabled:hover::after {
width: 0;
}
.t-radio-group .t-radio-button.t-is-disabled.t-is-checked {
color: var(--td-text-color-disabled);
}
.t-radio-group .t-radio-button.t-is-disabled.t-is-checked::after {
width: 0;
}
.t-radio {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
cursor: pointer;
display: inline-block;
}
.t-radio__former {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
opacity: 0;
position: absolute;
}
.t-radio__input {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
border-radius: var(--td-radius-circle);
border: 1px solid var(--td-border-level-2-color);
background-color: var(--td-bg-color-container);
transition: border 0.2s cubic-bezier(0, 0, 0.15, 1);
}
.t-radio__input::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
transform: scale(0.5);
opacity: 0;
border-radius: var(--td-radius-circle);
background-color: var(--td-brand-color);
transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
}
.t-radio__label {
display: inline-block;
margin-left: var(--td-comp-margin-s);
color: var(--td-text-color-primary);
vertical-align: middle;
font: var(--td-font-body-medium);
white-space: nowrap;
}
.t-radio:hover .t-radio__input {
border-color: var(--td-brand-color);
}
.t-radio.t-is-checked .t-radio__input {
border-color: var(--td-brand-color);
}
.t-radio.t-is-checked .t-radio__input::after {
opacity: 1;
}
.t-radio.t-is-disabled {
cursor: not-allowed;
}
.t-radio.t-is-disabled .t-radio__label {
color: var(--td-text-color-disabled);
}
.t-radio.t-is-disabled .t-radio__input {
background-color: var(--td-bg-color-component-disabled);
}
.t-radio.t-is-disabled:hover .t-radio__input {
border-color: var(--td-border-level-2-color);
}
.t-radio.t-is-disabled.t-is-checked .t-radio__input {
border-color: var(--td-border-level-2-color);
}
.t-radio.t-is-disabled.t-is-checked .t-radio__input::after {
background-color: var(--td-text-color-disabled);
}
.t-radio:focus-visible:focus-visible {
outline: 2px solid var(--td-brand-color);
outline-offset: var(--td-comp-paddingTB-xs);
border-radius: 0;
}
.t-slider__input-container {
display: flex;
align-items: center;
margin-left: var(--td-comp-margin-xxl);
}
.t-slider__input-container.is-vertical {
padding-top: var(--td-comp-paddingTB-l);
margin-left: 0px;
}
.t-slider__input-container .t-slider__center-line {
width: var(--td-size-4);
height: 1px;
background: rgba(0, 0, 0, 0.9);
margin: 0 var(--td-comp-margin-s);
}
.t-slider {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
height: calc(var(--td-comp-paddingTB-xs) * 2 + var(--td-size-2));
width: 100%;
position: relative;
padding: var(--td-comp-paddingTB-xs) 0;
}
.t-slider__container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.t-slider__container.is-vertical {
height: 100%;
flex-direction: column;
}
.t-slider__rail {
position: absolute;
width: 100%;
height: var(--td-size-2);
background-color: var(--td-bg-color-secondarycomponent);
transition: 0.2s linear;
border-radius: var(--td-radius-round);
}
.t-slider__rail:hover {
background-color: var(--td-bg-color-secondarycomponent-hover);
}
.t-slider__track {
position: absolute;
height: var(--td-size-2);
background-color: var(--td-brand-color);
right: auto;
border-radius: var(--td-radius-round);
}
.t-slider__step {
position: absolute;
width: 100%;
height: var(--td-size-2);
cursor: pointer;
}
.t-slider__button {
width: var(--td-comp-size-xxxs);
height: var(--td-comp-size-xxxs);
border: 2px solid var(--td-brand-color);
background-color: #fff;
border-radius: var(--td-radius-circle);
transition: 0.2s;
user-select: none;
box-sizing: border-box;
box-shadow: var(--td-shadow-1);
}
.t-slider__button--dragging {
box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
}
.t-slider__button:hover {
background-color: var(--td-gray-color-1);
}
.t-slider__button-wrapper {
position: absolute;
z-index: 2;
top: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
text-align: center;
user-select: none;
line-height: normal;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
}
.t-slider__stop {
position: absolute;
width: 1px;
height: var(--td-size-2);
background-color: var(--td-bg-color-secondarycomponent);
top: 4px;
}
.t-slider__mark {
position: absolute;
top: 2px;
left: 0;
width: 100%;
}
.t-slider__mark-text {
position: absolute;
display: inline-block;
font: var(--td-font-body-small);
color: var(--td-text-color-primary);
top: calc(var(--td-size-2) + var(--td-comp-paddingTB-xs) + 2px);
transform: translateX(-50%);
cursor: pointer;
white-space: nowrap;
}
.t-slider__mark-text:first-child {
transform: translateX(0%);
}
.t-slider__mark-text:last-child {
transform: translateX(-100%);
}
.t-slider--vertical {
height: 100%;
padding: 0;
display: flex;
justify-content: center;
position: relative;
}
.t-slider--vertical .t-slider__rail {
width: var(--td-size-2);
height: 100%;
}
.t-slider--vertical .t-slider__track {
width: var(--td-size-2);
top: auto;
}
.t-slider--vertical .t-slider__step {
width: var(--td-size-2);
height: 100%;
}
.t-slider--vertical .t-slider__handle {
margin-top: -6px;
margin-left: -5px;
top: auto;
transform: translateY(50%);
}
.t-slider--vertical .t-slider__mark {
top: 0;
left: 12px;
width: 18px;
height: 100%;
}
.t-slider--vertical .t-slider__stop {
width: var(--td-size-2);
height: 1px;
left: 4px;
background-color: var(--td-bg-color-secondarycomponent);
}
.t-slider--vertical .t-slider__mark-text {
transform: translateY(-50%);
margin-top: 0;
margin-left: var(--td-comp-margin-xxs);
}
.t-slider--vertical .t-slider__button-wrapper {
top: auto;
position: absolute;
z-index: 2;
left: 50%;
transform: translate(-50%, 50%);
background-color: transparent;
text-align: center;
user-select: none;
line-height: normal;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
}
.t-is-disabled {
cursor: not-allowed;
}
.t-is-disabled .t-slider__track {
background-color: var(--td-brand-color-disabled);
}
.t-is-disabled .t-slider__rail {
background-color: var(--td-bg-color-component-disabled);
}
.t-is-disabled .t-slider__handle {
border: 2px solid var(--td-brand-color-disabled);
}
.t-is-disabled .t-slider__button {
border-color: var(--td-brand-color-disabled);
outline: none;
}
.t-is-disabled .t-slider__mark-text {
color: var(--td-text-color-disabled);
cursor: not-allowed;
}
.t-is-disabled .t-slider__button-wrapper {
cursor: not-allowed;
}
.t-switch {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
list-style: none;
position: relative;
display: inline-flex;
vertical-align: middle;
align-items: center;
outline: none;
border: 0;
padding: 0;
margin: 0;
height: var(--td-comp-size-xxs);
line-height: var(--td-comp-size-xxs);
border-radius: var(--td-radius-round);
min-width: calc(var(--td-comp-size-xxs) / 0.618);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
background-color: var(--td-bg-color-secondarycomponent);
cursor: pointer;
user-select: none;
}
.t-switch:hover {
background-color: var(--td-bg-color-secondarycomponent-hover);
}
.t-switch__handle {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 4px;
left: 4px;
width: calc(var(--td-comp-size-xxs) - 2 * 4px);
height: calc(var(--td-comp-size-xxs) - 2 * 4px);
border-radius: var(--td-radius-round);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
box-shadow: var(--td-shadow-1);
}
.t-switch__handle .t-icon {
font-size: calc(var(--td-comp-size-xxs) - 4px);
color: transparent;
}
.t-switch__handle::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--td-radius-round);
background-color: #fff;
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before {
left: 0;
right: -6px;
}
.t-switch:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before {
right: 0;
left: -6px;
}
.t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__content {
opacity: 0;
}
.t-switch__content {
box-sizing: border-box;
display: inline-flex;
align-items: center;
color: var(--td-text-color-anti);
padding: 0 var(--td-comp-margin-xs) 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px);
font-size: var(--td-font-size-body-small);
min-width: calc(var(--td-comp-size-xxs) / 0.618);
transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear;
}
.t-switch__content .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-switch.t-is-checked {
background-color: var(--td-brand-color);
}
.t-switch.t-is-checked:hover {
background-color: var(--td-brand-color-hover);
}
.t-switch.t-is-checked .t-switch__handle {
left: calc(100% - 2.5px);
transform: translate(-100%, 0);
width: calc(var(--td-comp-size-xxs) - 2 * 2.5px);
height: calc(var(--td-comp-size-xxs) - 2 * 2.5px);
top: 2.5px;
}
.t-switch.t-is-checked .t-switch__content {
padding: 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xs);
color: var(--td-text-color-anti);
}
.t-switch.t-is-loading {
cursor: not-allowed;
background-color: var(--td-bg-color-component-disabled);
}
.t-switch.t-is-loading .t-loading {
display: inline-flex;
}
.t-switch.t-is-loading .t-switch__handle .t-icon {
color: var(--td-bg-color-component-disabled);
}
.t-switch.t-is-loading.t-is-checked {
background-color: var(--td-brand-color-focus);
}
.t-switch.t-is-loading.t-is-checked .t-switch__handle .t-icon {
color: var(--td-brand-color-focus);
}
.t-switch.t-is-disabled {
cursor: not-allowed;
background-color: var(--td-bg-color-component-disabled);
}
.t-switch.t-is-disabled .t-switch__handle {
box-shadow: none;
}
.t-switch.t-is-disabled.t-is-checked {
background-color: var(--td-brand-color-disabled);
}
.t-switch.t-is-disabled.t-is-checked .t-switch__handle {
box-shadow: none;
}
.t-switch.t-is-disabled.t-is-checked .t-switch__handle .t-icon {
color: var(--td-brand-color-disabled);
}
.t-switch.t-size-l {
min-width: calc(var(--td-comp-size-xs) / 0.618);
height: var(--td-comp-size-xs);
line-height: var(--td-comp-size-xs);
border-radius: var(--td-radius-round);
}
.t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before {
left: 0;
right: -8px;
}
.t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before {
right: 0;
left: -8px;
}
.t-switch.t-size-l .t-switch__handle {
top: 5px;
left: 5px;
width: calc(var(--td-comp-size-xs) - 2 * 5px);
height: calc(var(--td-comp-size-xs) - 2 * 5px);
}
.t-switch.t-size-l .t-switch__handle .t-icon {
font-size: calc(var(--td-comp-size-xs) - 4px);
}
.t-switch.t-size-l .t-switch__content {
padding: 0 var(--td-comp-margin-s) 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px);
min-width: calc(var(--td-comp-size-xs) / 0.618);
font-size: var(--td-font-size-body-large);
}
.t-switch.t-size-l .t-switch__content .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-switch.t-size-l.t-is-checked .t-switch__handle {
left: calc(100% - 3px);
top: 3px;
width: calc(var(--td-comp-size-xs) - 2 * 3px);
height: calc(var(--td-comp-size-xs) - 2 * 3px);
}
.t-switch.t-size-l.t-is-checked .t-switch__content {
padding: 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px) 0 var(--td-comp-margin-s);
}
.t-switch.t-size-s {
min-width: calc(var(--td-comp-size-xxxs) / 0.618);
height: var(--td-comp-size-xxxs);
line-height: var(--td-comp-size-xxxs);
border-radius: var(--td-radius-round);
}
.t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before {
left: 0;
right: -4px;
}
.t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before {
right: 0;
left: -4px;
}
.t-switch.t-size-s .t-switch__handle {
top: 3px;
left: 3px;
width: calc(var(--td-comp-size-xxxs) - 2 * 3px);
height: calc(var(--td-comp-size-xxxs) - 2 * 3px);
}
.t-switch.t-size-s .t-switch__handle .t-icon {
font-size: calc(var(--td-comp-size-xxxs) - 4px);
}
.t-switch.t-size-s .t-switch__content {
padding: 0 var(--td-comp-margin-xxs) 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px);
min-width: calc(var(--td-comp-size-xxxs) / 0.618);
font-size: 9px;
}
.t-switch.t-size-s .t-switch__content .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-switch.t-size-s.t-is-checked .t-switch__handle {
left: calc(100% - 2px);
top: 2px;
width: calc(var(--td-comp-size-xxxs) - 2 * 2px);
height: calc(var(--td-comp-size-xxxs) - 2 * 2px);
}
.t-switch.t-size-s.t-is-checked .t-switch__content {
padding: 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xxs);
}
.t-textarea {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.t-textarea__inner {
display: flex;
width: 100%;
height: var(--td-comp-size-xxxl);
border: 1px solid var(--td-border-level-2-color);
border-radius: var(--td-radius-default);
padding: calc(calc(var(--td-comp-size-m) - var(--td-line-height-body-medium)) / 2) var(--td-comp-paddingLR-s);
background-color: var(--td-bg-color-specialcomponent);
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
resize: vertical;
outline: none;
transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s;
box-sizing: border-box;
}
@-moz-document url-prefix() {
.t-textarea__inner {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-textarea__inner::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-textarea__inner::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-textarea__inner::-webkit-scrollbar-thumb:vertical:hover,
.t-textarea__inner::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-textarea__inner:hover {
border-color: var(--td-brand-color);
}
.t-textarea__inner:focus {
border-color: var(--td-brand-color);
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
}
.t-textarea__inner::placeholder {
color: var(--td-text-color-placeholder);
}
.t-textarea__inner.t-is-success {
border-color: var(--td-success-color);
}
.t-textarea__inner.t-is-success:focus {
box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.t-textarea__inner.t-is-warning {
border-color: var(--td-warning-color);
}
.t-textarea__inner.t-is-warning:focus {
box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.t-textarea__inner.t-is-error {
border-color: var(--td-error-color);
}
.t-textarea__inner.t-is-error:focus {
box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.t-textarea__info_wrapper {
display: flex;
column-gap: var(--td-comp-margin-s);
justify-content: space-between;
}
.t-textarea__info_wrapper_align {
justify-content: end;
}
.t-textarea__limit {
font: var(--td-font-body-small);
color: var(--td-text-color-placeholder);
}
.t-textarea .t-is-disabled {
color: var(--td-text-color-disabled);
background-color: var(--td-bg-color-component-disabled);
cursor: not-allowed;
}
.t-textarea .t-is-disabled:hover {
border-color: var(--td-border-level-2-color);
}
.t-textarea .t-is-disabled::placeholder {
color: var(--td-text-color-disabled);
}
.t-textarea .t-resize-none {
resize: none;
}
.t-textarea__tips {
height: auto;
min-height: var(--td-comp-size-xs);
font: var(--td-font-body-small);
display: inline-block;
}
.t-textarea__tips--normal {
color: var(--td-text-color-placeholder);
}
.t-textarea__tips--success {
color: var(--td-success-color);
}
.t-textarea__tips--warning {
color: var(--td-warning-color);
}
.t-textarea__tips--error {
color: var(--td-error-color);
}
.t-transfer {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
font: var(--td-font-body-medium);
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
background: transparent;
color: var(--td-text-color-primary);
max-height: 100%;
}
.t-transfer__list {
position: relative;
display: inline-block;
min-width: 200px;
height: 200px;
padding-top: var(--td-comp-size-xxl);
border: 0;
word-break: break-word;
vertical-align: middle;
}
.t-transfer__list-source,
.t-transfer__list-target {
border: 1px solid var(--td-border-level-1-color);
border-radius: var(--td-radius-medium);
}
.t-transfer__list-header {
position: absolute;
display: flex;
justify-content: space-between;
top: 0;
height: var(--td-comp-size-xxl);
line-height: var(--td-comp-size-xxl);
width: calc(200px - var(--td-comp-margin-s) * 2);
padding: 0 var(--td-comp-paddingLR-s);
margin: 0 var(--td-comp-margin-s);
box-sizing: border-box;
}
.t-transfer__list-header + :not(.t-transfer__list--with-search) {
border-top: 1px solid var(--td-border-level-1-color);
}
.t-transfer__list-header .t-checkbox {
margin-right: 0;
}
.t-transfer__list-header .t-checkbox__label {
margin: 0;
}
.t-transfer__list-header div {
display: flex;
}
.t-transfer__list-header div > span {
margin-left: var(--td-comp-margin-s);
}
.t-transfer__list-header > span {
color: var(--td-text-color-placeholder);
}
.t-transfer__list-body {
position: relative;
height: 100%;
box-sizing: border-box;
}
.t-transfer__list--with-search {
padding-top: var(--td-comp-size-m);
border-top: 0;
}
.t-transfer__list-content {
height: 100%;
width: 100%;
overflow: auto;
}
.t-transfer__list-content .t-checkbox-group {
width: 100%;
flex-direction: column;
gap: var(--td-comp-margin-xs);
margin: var(--td-comp-margin-s) 0;
}
.t-transfer__list-content .t-checkbox-group .t-checkbox {
margin-right: var(--td-comp-margin-s);
--ripple-color: var(--td-bg-color-container-active);
}
.t-transfer__list-content .t-checkbox-group .t-checkbox + .t-checkbox {
margin-left: var(--td-comp-margin-s);
}
.t-transfer__list-content .t-checkbox-group .t-checkbox__label {
margin: 0;
flex: 1;
}
.t-transfer__list-content .t-checkbox-group .t-checkbox__label > span {
margin-left: var(--td-comp-margin-s);
display: inline-block;
}
.t-transfer__list .t-transfer__list-item {
padding: var(--td-comp-paddingLR-xs) var(--td-comp-paddingLR-s);
display: flex;
cursor: pointer;
margin: 0 var(--td-comp-margin-s);
border-radius: var(--td-radius-default);
transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-transfer__list .t-transfer__list-item:first-child {
margin-top: 0;
}
.t-transfer__list .t-transfer__list-item.t-is-disabled:hover {
background: transparent;
}
.t-transfer__list-item:hover {
background: var(--td-bg-color-container-hover);
transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-transfer__list-item.t-is-checked {
background: var(--td-brand-color-light);
}
.t-transfer__list-wrapper {
position: relative;
height: 100%;
width: 100%;
overflow: auto;
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
}
.t-transfer__list-pagination {
height: var(--td-comp-size-xs);
vertical-align: middle;
padding: var(--td-comp-paddingTB-m);
}
.t-transfer__list-footer {
position: absolute;
left: 0;
bottom: 0;
border-top: 1px solid var(--td-border-level-1-color);
width: 100%;
}
.t-transfer__operations {
display: inline-flex;
flex-direction: column;
margin: auto var(--td-comp-margin-s);
vertical-align: middle;
overflow: hidden;
gap: var(--td-comp-margin-l);
}
.t-transfer__operations .t-icon {
font-size: var(--td-comp-size-xxxs);
}
.t-transfer__operations .t-icon + .t-button__text {
margin-left: 0;
}
.t-transfer__empty {
text-align: center;
position: absolute;
color: var(--td-text-color-placeholder);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.t-transfer__search-wrapper {
position: absolute;
top: 0;
width: 100%;
padding: 0 var(--td-comp-margin-s);
box-sizing: border-box;
}
.t-transfer__search .t-transfer__list {
height: 240px;
}
.t-transfer--with-tree .t-transfer__list {
height: auto;
}
.t-transfer--with-tree .t-transfer__list .t-tree {
padding: 0 var(--td-comp-paddingLR-m);
margin: var(--td-comp-margin-s) 0;
}
.t-transfer__pagination .t-transfer__list {
height: 240px;
padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2);
}
.t-transfer__footer .t-transfer__list {
height: 248px;
padding-bottom: 48px;
}
.t-transfer__pagination.t-transfer__footer .t-transfer__list {
height: 288px;
padding-bottom: calc(calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2) + 48px);
}
.t-transfer__search.t-transfer__footer .t-transfer__list {
height: 288px;
padding-bottom: 48px;
}
.t-transfer__search.t-transfer__pagination .t-transfer__list {
height: 280px;
padding-bottom: 48px;
}
.t-transfer__search.t-transfer__footer.t-transfer__pagination .t-transfer__list {
height: 328px;
padding-bottom: 88px;
}
.t-transfer__wrapper .t-transfer__list {
height: 320px;
width: 206px;
overflow: scroll;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.t-time-picker,
.t-time-range-picker {
width: 240px;
background: transparent;
display: inline-block;
position: relative;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-time-picker.t-is-disabled,
.t-time-range-picker.t-is-disabled {
cursor: not-allowed;
}
.t-time-picker > *:focus,
.t-time-range-picker > *:focus,
.t-time-picker > *:active,
.t-time-range-picker > *:active {
outline: 0;
}
.t-time-picker__group,
.t-time-range-picker__group {
position: relative;
}
.t-time-picker__group.active,
.t-time-range-picker__group.active {
border: 1px solid var(--td-brand-color);
box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
}
.t-time-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear,
.t-time-range-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear {
display: block;
}
.t-time-picker__group-text,
.t-time-range-picker__group-text {
color: var(--td-text-color-primary);
}
.t-time-picker__group input,
.t-time-range-picker__group input {
cursor: pointer;
}
.t-time-range-picker {
width: auto;
}
.t-time-picker__panel {
width: 280px;
background: transparent;
border-radius: var(--td-radius-default);
display: inline-block;
position: relative;
font: var(--td-font-body-medium);
--timePickerPanelOffsetTop: 15;
--timePickerPanelOffsetBottom: 21;
}
.t-time-picker__panel-body {
width: 100%;
height: calc(calc(var(--td-comp-size-xs) + var(--td-size-3)) * 7 + var(--td-size-3));
position: relative;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
}
.t-time-picker__panel-body-active-mask {
position: absolute;
top: 50%;
height: var(--td-comp-size-xs);
width: 100%;
display: flex;
}
.t-time-picker__panel-body-active-mask > div {
flex: 1;
transform: translateY(calc(0px - (calc(var(--td-comp-size-xs) + var(--td-size-3)) / 2)));
height: var(--td-comp-size-xs);
background-color: var(--td-brand-color-light);
margin: var(--td-size-3) var(--td-comp-margin-xs);
border-radius: var(--td-radius-default);
}
.t-time-picker__panel-body-scroll {
flex: 1;
height: 100%;
overflow-y: scroll;
text-align: center;
position: relative;
list-style: none;
padding: 0;
margin: 0;
}
.t-time-picker__panel-body-scroll::-webkit-scrollbar {
width: 0;
}
.t-time-picker__panel-body-scroll::after,
.t-time-picker__panel-body-scroll::before {
display: block;
height: 50%;
content: "";
}
.t-time-picker__panel-body-scroll::before {
height: calc(50% - var(--timePickerPanelOffsetTop, 0) * 1px);
}
.t-time-picker__panel-body-scroll::after {
height: calc(50% - var(--timePickerPanelOffsetBottom, 0) * 1px);
}
.t-time-picker__panel-body-scroll:last-child {
border-right: 0;
}
.t-time-picker__panel-body-scroll-item {
height: var(--td-comp-size-xs);
font: var(--td-font-body-medium);
line-height: var(--td-comp-size-xs);
color: var(--td-text-color-secondary);
margin: var(--td-size-3) var(--td-comp-margin-xs);
border-radius: var(--td-radius-default);
text-align: center;
cursor: pointer;
transition: 0.2s linear;
}
.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):hover {
color: var(--td-text-color-primary);
}
.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):active {
background-color: var(--td-bg-color-container-hover);
}
.t-time-picker__panel-body-scroll-item.t-is-disabled {
color: var(--td-text-color-disabled);
cursor: not-allowed;
}
.t-time-picker__panel-body-scroll-item.t-is-hidden {
display: none;
cursor: not-allowed;
}
.t-time-picker__panel-body-scroll-item.t-is-current {
color: var(--td-brand-color);
}
.t-time-picker__panel-section-body {
padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs));
}
.t-time-picker__panel-section-footer {
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
background-color: transparent;
position: relative;
border-top: 1px solid var(--td-border-level-1-color);
box-sizing: border-box;
padding: var(--td-pop-padding-xl);
}
.t-tree {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
position: relative;
}
.t-tree.t-is-disabled {
color: var(--td-text-color-disabled);
}
.t-tree.t-is-disabled .t-icon {
color: var(--td-text-color-disabled);
}
.t-tree.t-is-disabled .t-tree__item.t-is-active {
background-color: var(--td-bg-color-container-hover);
color: var(--td-text-color-disabled);
}
.t-tree.t-is-disabled .t-tree__item .t-icon {
color: var(--td-text-color-secondary);
}
.t-tree__empty {
color: var(--td-text-color-disabled);
}
.t-tree__branch {
display: block;
}
.t-tree__item {
--level: 0;
--hscale: 2;
will-change: opacity, max-height;
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 0 0 0 calc(var(--td-comp-margin-xxl) * var(--level));
cursor: default;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
}
.t-tree__item .t-icon,
.t-tree__item .t-loading {
display: inline-block;
position: relative;
z-index: 2;
font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.t-tree__item .t-icon {
color: var(--td-text-color-secondary);
}
.t-tree__item .t-checkbox {
align-items: center;
font-size: 0;
}
.t-tree__item .t-checkbox__input {
flex-shrink: 0;
}
.t-tree__item .t-checkbox__label {
overflow: hidden;
text-overflow: ellipsis;
}
.t-tree__item .t-tree__icon--default .t-icon {
transform: rotate(0);
}
.t-tree__item--open .t-icon {
color: var(--td-text-color-brand);
}
.t-tree__item--open .t-tree__icon--default .t-icon {
transform: rotate(90deg);
}
.t-tree__item--clickable {
cursor: pointer;
}
.t-tree__item--locked {
color: var(--td-text-color-disabled);
}
.t-tree__item--matched {
color: inherit;
}
.t-tree__item--draggable {
cursor: pointer;
}
.t-tree__item--draggable:hover {
background-color: var(--td-bg-color-container-hover);
background-clip: content-box;
}
.t-tree__item--draggable::after {
position: absolute;
top: -1px;
right: 0;
left: 0;
display: block;
height: 2px;
border-radius: 1px;
content: "";
padding: inherit;
background-clip: content-box;
}
.t-tree__item--tip-top::after {
background-color: var(--td-brand-color);
}
.t-tree__item--tip-bottom::after {
top: unset;
bottom: -1px;
background-color: var(--td-brand-color);
}
.t-tree__item--tip-highlight {
background-color: var(--td-brand-color-light);
background-clip: content-box;
}
.t-tree__item::before {
content: "";
display: block;
width: 0;
flex: 0 0 auto;
height: calc(var(--td-comp-size-m) + 2px);
}
.t-tree--block-node .t-tree__label {
flex: 1;
}
.t-tree--hoverable .t-tree__label:not(.t-is-active):not(.t-is-checked):hover {
background-color: var(--td-bg-color-container-hover);
}
.t-tree__line {
--level: 0;
--color: var(--td-border-level-1-color);
--space: var(--td-comp-margin-xxl);
--iconSize: 16px;
position: absolute;
left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l));
bottom: var(--td-comp-margin-l);
width: 1px;
height: calc(var(--td-comp-size-m) + 2px);
pointer-events: none;
}
.t-tree__line::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
height: calc(var(--td-comp-size-m) + 2px);
width: var(--td-comp-margin-m);
border-left: 1px solid var(--color);
border-bottom: 1px solid var(--color);
}
.t-tree__line--first::before {
height: var(--td-line-height-body-medium);
}
.t-tree__line--leaf::before {
width: var(--td-comp-margin-m);
}
.t-tree__icon {
position: relative;
flex: none;
display: inline-flex;
align-items: center;
text-align: center;
width: calc(var(--td-font-size-body-medium) + 2px);
font-size: 0;
user-select: none;
cursor: pointer;
}
.t-tree__icon::after {
content: "";
display: block;
position: absolute;
left: -2px;
top: -2px;
width: calc(calc(var(--td-font-size-body-medium) + 2px) + 4px);
height: calc(calc(var(--td-font-size-body-medium) + 2px) + 4px);
border-radius: var(--td-radius-default);
}
.t-tree__icon:not(:empty):hover {
background-color: var(--td-bg-color-container-hover);
}
.t-tree__icon:empty {
cursor: initial;
}
.t-tree__label {
--ripple-color: var(--td-bg-color-container-active);
flex-wrap: nowrap;
flex: 1;
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs);
margin-left: var(--td-comp-margin-xs);
border-radius: var(--td-radius-default);
cursor: pointer;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-tree__label.t-is-checked {
font-weight: 500;
color: var(--td-text-color-primary);
background-color: var(--td-brand-color-light);
}
.t-tree__label::selection {
background-color: transparent;
}
.t-is-active .t-tree__label {
font-weight: 500;
color: var(--td-text-color-primary);
background-color: var(--td-brand-color-light);
}
.t-tree__space {
display: block;
flex: 1 0 auto;
}
.t-tree__operations {
display: flex;
flex: 0 0 auto;
justify-content: flex-end;
align-items: center;
margin-left: auto;
}
.t-tree__operations .t-icon {
cursor: pointer;
}
.t-tree__item.t-is-disabled {
color: var(--td-text-color-disabled);
cursor: default;
}
.t-tree__item.t-is-disabled .t-checkbox {
cursor: default;
}
.t-tree__item--hidden {
display: none;
}
.t-tree--transition .t-tree__label {
transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-tree--transition .t-tree__icon {
transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-tree--transition .t-tree__icon::after {
transition: 0.2s linear;
}
.t-tree--transition .t-tree__icon:not(:empty):hover {
transition: 0.2s linear;
}
.t-tree--transition .t-tree__icon--default .t-icon {
transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
}
.t-tree--transition .t-tree__item--visible {
display: flex;
max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px);
opacity: 1;
transition: opacity 150ms linear 150ms, max-height 150ms linear 0s;
}
.t-tree--transition .t-tree__item--hidden {
display: flex;
max-height: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
animation: initial;
transition: opacity 150ms linear 0s, max-height 150ms linear 150ms;
}
.t-tree--transition .t-tree__item--enter-active {
animation: t-tree-toggle 300ms linear;
}
.t-tree--transition .t-tree__item--leave-active {
animation: t-tree-toggle 300ms reverse linear forwards;
}
.t-tree__vscroll {
overflow-y: auto;
}
.t-tree__lazyload {
overflow-y: auto;
}
.t-tree__vscroll-cursor {
position: absolute;
width: 1px;
height: 1px;
transition: transform 0.2s;
}
.t-tree--scrolling .t-tree__item {
will-change: initial;
}
.t-tree--scrolling .v-enter,
.t-tree--scrolling .v-leave,
.t-tree--scrolling .t-tree__item--visible,
.t-tree--scrolling .t-tree__item--hidden,
.t-tree--scrolling .t-tree__item--enter,
.t-tree--scrolling .t-tree__item--enter-active,
.t-tree--scrolling .t-tree__item--enter-to,
.t-tree--scrolling .t-tree__item--leave,
.t-tree--scrolling .t-tree__item--leave-active .t-tree__item--leave-to {
animation: none;
transition: none;
}
.t-tree--scrolling .t-tree__item--visible {
max-height: initial;
}
.t-tree--scrolling .t-tree__item--enter-to,
.t-tree--scrolling .t-tree__item--enter-active {
max-height: initial;
}
.t-tree--scrolling .t-tree__item--leave-to,
.t-tree--scrolling .t-tree__item--leave-active {
max-height: 0;
}
@keyframes t-tree-toggle {
0% {
opacity: 0;
max-height: 0;
}
50% {
opacity: 0;
max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px);
}
100% {
opacity: 1;
max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px);
}
}
.t-tree-select {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-tree-select--without-input input {
display: none;
}
.t-tree-select--without-input .t-input__suffix-icon {
margin-left: auto;
}
.t-tree-select .t-fake-arrow {
transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
color: var(--td-text-color-placeholder);
}
.t-tree-select .t-fake-arrow--highlight {
color: var(--td-text-color-brand);
}
.t-tree-select .t-fake-arrow--disable {
color: var(--td-text-color-disabled);
}
.t-tree-select--placeholder {
color: var(--td-text-color-placeholder);
}
.t-tree-select.t-single-suffix {
padding-right: 20px;
}
.t-tree-select.t-tag-prefix {
padding-left: 4px;
}
.t-tree-select-popup .t-popup__content {
padding: var(--td-pop-padding-m);
max-height: 300px;
overflow-y: auto;
}
@-moz-document url-prefix() {
.t-tree-select-popup .t-popup__content {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-tree-select-popup .t-popup__content::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 15px;
}
.t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb:vertical:hover,
.t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-color-picker__panel {
padding: 0;
width: 256px;
background: var(--td-bg-color-container);
box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
border-radius: var(--td-radius-medium);
user-select: none;
}
.t-popup__content .t-color-picker__panel {
background: transparent;
box-shadow: unset;
}
.t-color-picker {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-color-picker.t-popup__content {
box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
}
.t-color-picker__icon {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--td-comp-size-xxxs);
background: transparent;
transition: 0.2s linear;
color: var(--td-text-color-secondary);
border-radius: var(--td-radius-default);
cursor: pointer;
}
.t-color-picker__icon:hover {
background: var(--td-bg-color-container-hover);
transition: 0.2s linear;
}
.t-color-picker__icon.t-is-disabled {
color: var(--td-text-color-disabled);
pointer-events: none;
}
.t-color-picker__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--td-pop-padding-xl);
position: relative;
z-index: 2;
}
.t-color-picker__head .t-color-picker__close {
flex-shrink: 0;
}
.t-color-picker__head + .t-color-picker__body {
padding-top: 0;
}
.t-color-picker__body {
padding: var(--td-pop-padding-xl);
padding-bottom: calc(var(--td-pop-padding-xl) - 4px);
}
.t-color-picker__thumb {
position: absolute;
z-index: 1;
outline: none;
border-color: currentcolor;
width: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
height: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
border-radius: var(--td-radius-circle);
box-shadow: var(--td-shadow-1);
background: var(--td-text-color-anti);
color: var(--td-text-color-brand);
padding: 2px;
box-sizing: border-box;
}
.t-color-picker__thumb::before {
content: "";
width: 100%;
height: 100%;
background: currentcolor;
border-radius: var(--td-radius-circle);
display: block;
}
.t-color-picker__saturation {
height: 160px;
border-radius: var(--td-radius-default);
position: relative;
overflow: hidden;
background: transparent;
}
.t-color-picker__saturation::before,
.t-color-picker__saturation::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.t-color-picker__saturation::before {
/* stylelint-disable-next-line color-no-hex */
background: linear-gradient(90deg, #fff, transparent);
}
.t-color-picker__saturation::after {
/* stylelint-disable-next-line color-no-hex */
background: linear-gradient(0deg, #000, transparent);
}
.t-color-picker__saturation .t-color-picker__thumb {
width: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
height: calc(var(--td-comp-size-xxxs) + var(--td-size-1));
border-radius: var(--td-radius-circle);
transform: translate(-50%, -50%);
}
.t-color-picker__slider-wrapper {
border-radius: calc(8px / 2);
padding: 0 calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) / 2);
position: relative;
}
.t-color-picker__slider-wrapper--hue-type {
/* stylelint-disable-next-line color-named */
background: red;
}
.t-color-picker__slider-wrapper--alpha-type {
background: var(--td-text-color-anti);
/* stylelint-disable-next-line color-no-hex */
background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
}
.t-color-picker__slider-padding {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 8px;
border-radius: calc(8px / 2);
}
.t-color-picker__slider {
height: 8px;
position: relative;
border-radius: calc(8px / 2);
cursor: pointer;
color: transparent;
outline: none;
z-index: 1;
}
.t-color-picker__slider .t-color-picker__thumb {
transform: translate(calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%);
top: 50%;
}
.t-color-picker__slider .t-color-picker__rail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
}
.t-color-picker__alpha,
.t-color-picker__format {
margin: var(--td-comp-margin-m) 0 0 0;
}
.t-color-picker__hue {
/* stylelint-disable color-no-hex, color-named */
background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
}
.t-color-picker__alpha .t-color-picker__rail {
background: linear-gradient(to right, transparent, currentcolor);
}
.t-color-picker__sliders-wrapper {
display: flex;
align-items: center;
margin: var(--td-comp-margin-m) 0;
}
.t-color-picker__sliders {
width: 100%;
}
.t-color-picker__sliders-preview {
flex-shrink: 0;
margin-left: var(--td-comp-margin-m);
width: var(--td-comp-size-s);
height: var(--td-comp-size-s);
border-radius: var(--td-radius-default);
overflow: hidden;
background: var(--td-text-color-anti);
/* stylelint-disable-next-line color-no-hex */
background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
}
.t-color-picker__sliders-preview-inner {
display: block;
width: 100%;
height: 100%;
}
.t-color-picker__gradient {
padding: 0;
display: flex;
align-items: center;
margin-bottom: var(--td-comp-margin-m);
}
.t-color-picker__gradient-slider {
flex: 1;
}
.t-color-picker__gradient-degree {
position: relative;
flex-shrink: 0;
margin-left: var(--td-comp-margin-m);
width: var(--td-comp-size-xxl);
}
.t-color-picker__gradient-degree .t-input {
margin: 0;
font: var(--td-font-body-small);
}
.t-color-picker__gradient-degree .t-input-number {
width: 100%;
padding: 0;
}
.t-color-picker__gradient .gradient-thumbs {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style: none;
border-radius: inherit;
cursor: pointer;
}
.t-color-picker__gradient .gradient-thumbs__item {
top: 50%;
left: 0;
transform: translate(-50%, -50%);
z-index: 0;
cursor: pointer;
}
.t-color-picker__gradient .gradient-thumbs__item::before {
display: none;
}
.t-color-picker__gradient .gradient-thumbs__item.t-is-active {
z-index: 1;
outline: 2px solid var(--td-component-border);
}
.t-color-picker__gradient .gradient-thumbs__item-inner {
display: block;
width: 100%;
height: 100%;
border-radius: var(--td-radius-circle);
overflow: hidden;
}
.t-color-picker__gradient .gradient-thumbs__item-inner::before {
content: "";
width: 100%;
height: 100%;
display: block;
background-color: currentcolor;
}
.t-color-picker__format {
display: flex;
align-items: center;
justify-content: space-between;
}
.t-color-picker__format--item:first-child {
flex-shrink: 0;
}
.t-color-picker__format--item:last-child {
flex: 1;
}
.t-color-picker__format--item .t-size-m,
.t-color-picker__format--item .t-input.t-size-m {
font: var(--td-font-body-small);
}
.t-color-picker__format--item .t-input-number .t-input {
margin: 0;
}
.t-color-picker__format--item .input-group {
display: flex;
align-items: center;
justify-content: space-around;
margin-left: var(--td-comp-margin-s);
}
.t-color-picker__format--item .input-group__item {
flex: 1;
width: 0;
margin-left: -1px;
}
.t-color-picker__format--item .input-group__item .t-input {
padding: 0 1px;
}
.t-color-picker__format--item .input-group__item .t-input:focus,
.t-color-picker__format--item .input-group__item .t-input:focus-within,
.t-color-picker__format--item .input-group__item .t-input:hover {
z-index: 1;
}
.t-color-picker__format--item .input-group__item:not(:first-child):not(:last-child) .t-input {
border-radius: 0;
}
.t-color-picker__format--item .input-group__item:first-child:not(:last-child) .t-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.t-color-picker__format--item .input-group__item:last-child:not(:first-child) .t-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.t-color-picker__format--item .input-group .t-input-number {
width: 100%;
padding: 0;
max-width: 100%;
}
.t-color-picker__format-mode-select {
width: 72px;
display: flex;
}
.t-color-picker__format-mode-select .t-select,
.t-color-picker__format-mode-select .t-input {
padding-right: 0;
}
.t-color-picker__format-mode-select .t-input--prefix > .t-input__suffix {
padding-left: 0;
}
.t-color-picker__format-mode-select .t-select__right-icon {
margin-right: var(--td-comp-margin-xs);
}
.t-color-picker__swatches-wrap {
margin-top: var(--td-comp-margin-m);
position: relative;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches + .t-color-picker__swatches {
margin-top: var(--td-comp-margin-m);
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--title {
font: var(--td-font-body-small);
padding: 0;
color: var(--td-text-color-primary);
display: flex;
align-items: center;
justify-content: space-between;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--actions {
margin-left: auto;
display: flex;
align-items: center;
font-size: 0;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--actions .t-color-picker__icon {
width: var(--td-comp-size-xxxs);
height: var(--td-comp-size-xxxs);
margin-left: var(--td-comp-margin-s);
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--items {
width: 100%;
list-style: none;
display: grid;
grid-template-columns: repeat(10, var(--td-comp-size-xxxs));
gap: calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9) calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9);
max-height: calc(4 * calc(var(--td-comp-size-xxxs) + calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9)));
overflow-x: hidden;
overflow-y: auto;
padding: calc(var(--td-pop-padding-xl) - 8px);
position: relative;
left: calc(0px - calc(var(--td-pop-padding-xl) - 8px));
box-sizing: content-box;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--item {
display: flex;
width: var(--td-comp-size-xxxs);
height: var(--td-comp-size-xxxs);
border-radius: var(--td-radius-default);
padding: 0;
overflow: hidden;
cursor: pointer;
align-items: center;
justify-content: center;
position: relative;
transform-origin: center;
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
box-sizing: border-box;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--item:hover {
transform: scale(1.25);
transform-origin: center;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--item__color {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid var(--td-component-border);
border-radius: var(--td-radius-default);
flex-shrink: 0;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--item__inner {
width: 100%;
height: 100%;
display: block;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--item:not(.t-is-active):hover {
padding: 0;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--item.t-is-active .t-color-picker__swatches--item__color,
.t-color-picker__swatches-wrap .t-color-picker__swatches--item.t-is-active .t-color-picker__swatches--color {
border-color: var(--td-text-color-brand);
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--color {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border-radius: var(--td-radius-default);
box-sizing: border-box;
}
.t-color-picker__swatches-wrap .t-color-picker__swatches--inner {
width: 100%;
height: 100%;
display: block;
border-radius: var(--td-radius-default);
box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
}
.t-color-picker__trigger--default {
display: inline-flex;
align-items: center;
}
.t-color-picker__trigger--default > .t-input {
width: fit-content;
}
.t-color-picker__trigger--default .t-input {
padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-paddingLR-xs);
}
.t-color-picker__trigger--default__color {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
}
.t-color-picker__trigger--default__color .color-inner {
border: 1px solid var(--td-scrollbar-color);
display: block;
width: calc(var(--td-comp-size-xs) - 2px);
height: calc(var(--td-comp-size-xs) - 2px);
color: transparent;
position: relative;
border-radius: var(--td-radius-small);
}
.t-color-picker__trigger--default__color .color-inner.t-size-s {
width: calc(var(--td-comp-size-xxs) - 2px);
height: calc(var(--td-comp-size-xxs) - 2px);
}
.t-color-picker__trigger--default__color .color-inner.t-size-l {
width: calc(var(--td-comp-size-s) - 2px);
height: calc(var(--td-comp-size-s) - 2px);
}
.t-color-picker__gradient-slider {
padding: 0 calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) / 2);
border-radius: calc(8px / 2);
}
.t-color-picker__gradient-slider .t-color-picker--bg-alpha {
background: var(--td-text-color-anti);
/* stylelint-disable-next-line color-no-hex */
background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
background-size: 6px 6px;
background-position: 0 0, 3px 3px;
}
.t-color-picker__panel.t-is-disabled .t-color-picker__saturation,
.t-color-picker__panel.t-is-disabled .t-color-picker__slider,
.t-color-picker__panel.t-is-disabled .t-color-picker__swatches--item {
opacity: 0.8;
cursor: not-allowed;
}
.t-color-picker__panel.t-is-disabled .t-color-picker__gradient-slider .gradient-thumbs,
.t-color-picker__panel.t-is-disabled .t-color-picker__gradient-slider .gradient-thumbs__item {
cursor: not-allowed;
}
.t-color-picker__panel.t-is-disabled .t-color-picker__swatches--item:hover {
padding: 0;
}
.t-color-picker__select-options > .t-popup__content {
box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
}
.t-image__wrapper {
position: relative;
background: var(--td-bg-color-secondarycontainer);
z-index: 1;
}
.t-image__wrapper--shape-square {
border-radius: 0;
}
.t-image__wrapper--shape-round {
border-radius: var(--td-radius-medium);
}
.t-image__wrapper--shape-circle {
border-radius: 50%;
}
.t-image__wrapper--gallery {
border-radius: var(--td-radius-medium);
}
.t-image__wrapper--gallery .t-image {
position: relative;
z-index: 5;
}
.t-image__wrapper--need-hover {
cursor: pointer;
}
.t-image {
width: 100%;
height: 100%;
border-radius: inherit;
position: relative;
z-index: inherit;
}
.t-image--fit-fill {
object-fit: fill;
}
.t-image--fit-contain {
object-fit: contain;
}
.t-image--fit-cover {
object-fit: cover;
}
.t-image--fit-scale-down {
object-fit: scale-down;
}
.t-image--fit-none {
object-fit: none;
}
.t-image--position-center {
object-position: center;
}
.t-image--position-bottom {
object-position: bottom;
}
.t-image--position-top {
object-position: top;
}
.t-image--position-left {
object-position: left;
}
.t-image--position-right {
object-position: right;
}
.t-image__gallery-shadow {
position: absolute;
left: 0;
right: -24px;
top: 24px;
bottom: 24px;
background: rgba(238, 238, 238, 0.26);
border-radius: var(--td-radius-medium);
z-index: calc(5 - 2);
}
.t-image__gallery-shadow::before,
.t-image__gallery-shadow::after {
content: "";
position: absolute;
left: 0;
border-radius: var(--td-radius-medium);
}
.t-image__gallery-shadow::after {
top: -16px;
right: 16px;
bottom: -16px;
background: rgba(238, 238, 238, 0.8);
z-index: calc(5 - 1);
}
.t-image__gallery-shadow::before {
top: -8px;
right: 8px;
bottom: -8px;
background: rgba(238, 238, 238, 0.5);
z-index: calc(5 - 3);
}
.t-image__placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 0;
}
.t-image__overlay-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: calc(5 + 1);
opacity: 1;
visibility: visible;
transition: visibility 0s, opacity 0.2s linear;
}
.t-image__overlay-content--hidden {
visibility: hidden;
opacity: 0;
}
.t-image__loading,
.t-image__error {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: calc(0 + 1);
}
.t-image__loading {
color: var(--td-text-color-secondary);
}
.t-image__error {
color: var(--td-text-color-disabled);
}
.t-avatar {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: inline-flex;
background: var(--td-brand-color-focus);
color: var(--td-text-color-brand);
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
justify-content: center;
align-items: center;
box-sizing: content-box;
width: var(--td-comp-size-m);
height: var(--td-comp-size-m);
font-size: var(--td-font-size-body-large);
line-height: var(--td-comp-size-m);
}
.t-avatar.t-avatar__icon {
font-size: var(--td-comp-size-xxs);
}
.t-avatar--circle {
border-radius: var(--td-radius-circle);
}
.t-avatar--round {
border-radius: var(--td-radius-default);
}
.t-avatar.t-size-s {
width: var(--td-comp-size-xs);
height: var(--td-comp-size-xs);
font-size: var(--td-font-size-body-medium);
line-height: var(--td-comp-size-xs);
}
.t-avatar.t-size-s.t-avatar__icon {
font-size: var(--td-comp-size-xxxs);
}
.t-avatar.t-size-l {
width: var(--td-comp-size-xl);
height: var(--td-comp-size-xl);
font-size: var(--td-font-size-title-large);
line-height: var(--td-comp-size-xl);
}
.t-avatar.t-size-l.t-avatar__icon {
font-size: var(--td-comp-size-xs);
}
.t-avatar > .t-image__wrapper {
max-width: 100%;
max-height: 100%;
}
.t-avatar-group {
display: inline-flex;
align-items: center;
}
.t-avatar-group .t-avatar {
border: 2px solid var(--td-bg-color-container);
}
.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child) {
margin-right: calc(0px - var(--td-size-3));
}
.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-s {
margin-right: calc(0px - var(--td-size-2));
}
.t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-l {
margin-right: calc(0px - var(--td-size-4));
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(1) {
z-index: 49;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(2) {
z-index: 48;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(3) {
z-index: 47;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(4) {
z-index: 46;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(5) {
z-index: 45;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(6) {
z-index: 44;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(7) {
z-index: 43;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(8) {
z-index: 42;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(9) {
z-index: 41;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(10) {
z-index: 40;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(11) {
z-index: 39;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(12) {
z-index: 38;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(13) {
z-index: 37;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(14) {
z-index: 36;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(15) {
z-index: 35;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(16) {
z-index: 34;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(17) {
z-index: 33;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(18) {
z-index: 32;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(19) {
z-index: 31;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(20) {
z-index: 30;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(21) {
z-index: 29;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(22) {
z-index: 28;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(23) {
z-index: 27;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(24) {
z-index: 26;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(25) {
z-index: 25;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(26) {
z-index: 24;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(27) {
z-index: 23;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(28) {
z-index: 22;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(29) {
z-index: 21;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(30) {
z-index: 20;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(31) {
z-index: 19;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(32) {
z-index: 18;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(33) {
z-index: 17;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(34) {
z-index: 16;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(35) {
z-index: 15;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(36) {
z-index: 14;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(37) {
z-index: 13;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(38) {
z-index: 12;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(39) {
z-index: 11;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(40) {
z-index: 10;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(41) {
z-index: 9;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(42) {
z-index: 8;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(43) {
z-index: 7;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(44) {
z-index: 6;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(45) {
z-index: 5;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(46) {
z-index: 4;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(47) {
z-index: 3;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(48) {
z-index: 2;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(49) {
z-index: 1;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(50) {
z-index: 0;
}
.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child) {
margin-left: calc(0px - var(--td-size-3));
}
.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-s {
margin-left: calc(0px - var(--td-size-2));
}
.t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-l {
margin-left: calc(0px - var(--td-size-4));
}
.t-badge {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
}
.t-badge--dot,
.t-badge--circle,
.t-badge--round {
position: absolute;
top: 0;
right: 0;
color: var(--td-text-color-anti);
text-align: center;
font: var(--td-font-body-small);
transform: translate(50%, -50%);
transform-origin: 100% 0;
box-sizing: content-box;
}
.t-badge--static {
position: static;
display: inline-block;
transform: none;
}
.t-badge--dot {
right: 1px;
margin-top: 1px;
width: 6px;
height: 6px;
border-radius: var(--td-radius-circle);
background-color: var(--td-error-color);
}
.t-badge--circle,
.t-badge--round {
padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2);
padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2);
min-width: 8px;
height: var(--td-comp-size-xxs);
background-color: var(--td-error-color);
line-height: var(--td-comp-size-xxs);
}
.t-badge--circle.t-size-s,
.t-badge--round.t-size-s {
padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2);
padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2);
min-width: 8px;
height: var(--td-comp-size-xxxs);
line-height: var(--td-comp-size-xxxs);
}
.t-badge--circle {
border-radius: calc(var(--td-comp-size-xxs) / 2);
}
.t-badge--round {
border-radius: var(--td-radius-default);
}
.t-calendar {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--td-border-level-1-color);
background-color: var(--td-bg-color-container);
border-radius: var(--td-radius-large);
}
.t-calendar .t-is-disabled.t-calendar__table-body-cell:hover {
cursor: not-allowed;
}
.t-calendar .t-is-disabled .t-calendar__table-body-cell-display {
color: var(--td-text-color-disabled);
}
.t-calendar .t-is-disabled .t-calendar__table-body-cell-display:hover {
box-shadow: none;
}
.t-calendar--full {
min-width: 560px;
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
}
.t-calendar--full .t-calendar__control {
padding: 0;
}
.t-calendar--full .t-calendar__title {
font: var(--td-font-title-large);
flex: 1;
}
.t-calendar--full .t-calendar__panel {
position: relative;
margin-top: var(--td-comp-margin-xxxl);
}
.t-calendar--full .t-calendar__panel-title {
font: var(--td-font-title-large);
color: var(--td-text-color-primary);
position: absolute;
}
.t-calendar--full .t-calendar__table-head-cell,
.t-calendar--full .t-calendar__table-body-cell {
margin-right: var(--td-comp-margin-s);
position: relative;
}
.t-calendar--full .t-calendar__table-body-cell {
border-top: 2px solid var(--td-border-level-1-color);
padding: 0;
height: 104px;
line-height: var(--td-line-height-body-medium);
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
margin-left: 0;
transition-duration: 0.2s;
transition-property: border-top, background;
transition-timing-function: linear;
}
.t-calendar--full .t-calendar__table-body-cell-content {
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xs);
width: 100%;
box-sizing: border-box;
}
.t-calendar--full .t-calendar__table-body-cell.t-is-checked {
background-color: var(--td-brand-color-light);
}
.t-calendar--full .t-calendar__table-body-cell.t-is-checked:hover {
background-color: var(--td-brand-color-light);
}
.t-calendar--full .t-calendar__table-body-cell--now {
border-top: 2px solid var(--td-brand-color);
}
.t-calendar--full .t-calendar__table-body-cell--now .t-calendar__table-body-cell-display {
color: var(--td-text-color-primary);
}
.t-calendar--full .t-calendar__footer {
height: 90px;
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
border-top: 1px solid var(--td-border-level-1-color);
}
.t-calendar--card {
width: 280px;
border-radius: var(--td-radius-medium);
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
}
.t-calendar--card .t-calendar__control {
padding: 0;
}
.t-calendar--card .t-calendar__control-section {
width: 100%;
justify-content: flex-start;
}
.t-calendar--card .t-calendar__control-section-cell:last-child {
flex: 1;
text-align: right;
display: block;
}
.t-calendar--card .t-calendar__panel.t-calendar__panel--month {
height: 200px;
margin-top: var(--td-comp-margin-m);
}
.t-calendar--card .t-calendar__panel.t-calendar__panel--year {
height: 168px;
margin-top: var(--td-comp-margin-m);
}
.t-calendar--card .t-calendar__panel.t-calendar__panel--year .t-calendar__table-body-cell-display {
min-width: var(--td-comp-size-xxl);
}
.t-calendar--card .t-calendar__table {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-self: start;
align-items: flex-start;
}
.t-calendar--card .t-calendar__table-head-row,
.t-calendar--card .t-calendar__table-body-row {
flex: 1;
background: var(--td-bg-color-container);
}
.t-calendar--card .t-calendar__table-head-cell,
.t-calendar--card .t-calendar__table-body-cell {
width: 100%;
height: 100%;
justify-content: center;
font: var(--td-font-body-medium);
box-sizing: border-box;
}
.t-calendar--card .t-calendar__table-head-cell-display,
.t-calendar--card .t-calendar__table-body-cell-display {
width: var(--td-comp-size-xs);
line-height: var(--td-comp-size-xs);
}
.t-calendar--card .t-calendar__table-body {
display: flex;
flex-direction: column;
justify-self: center;
align-items: center;
flex: 1;
}
.t-calendar--card .t-calendar__table-body-cell {
justify-content: center;
align-items: center;
}
.t-calendar--card .t-calendar__table-body-cell:hover {
background-color: var(--td-bg-color-container);
}
.t-calendar--card .t-calendar__table-body-cell-display {
font: var(--td-font-body-medium);
padding-top: calc(var(--td-comp-paddingTB-xxs) / 2);
padding-bottom: calc(var(--td-comp-paddingTB-xxs) / 2);
text-align: center;
border-radius: var(--td-radius-default);
transition: all 0.2s linear;
}
.t-calendar--card .t-calendar__table-body-cell-display:hover {
box-shadow: inset 0 0 0 1px var(--td-brand-color);
transition: box-shadow 0.2s linear;
}
.t-calendar--card .t-calendar__table-body-cell--now .t-calendar__table-body-cell-display {
color: var(--td-brand-color);
background-color: var(--td-brand-color-light);
position: relative;
}
.t-calendar--card .t-is-checked .t-calendar__table-body-cell-display {
background: var(--td-brand-color);
border-radius: var(--td-radius-default);
color: var(--td-text-color-anti);
}
.t-calendar--card .t-calendar__footer {
height: var(--td-comp-size-xxl);
padding: 0 var(--td-comp-paddingLR-m);
border-top: 1px solid var(--td-border-level-1-color);
}
.t-calendar__control {
display: flex;
justify-content: flex-end;
align-items: center;
}
.t-calendar__control-section {
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.t-calendar__control-section:last-child {
margin-right: 0;
}
.t-calendar__control-section-cell {
height: 100%;
margin-right: var(--td-comp-margin-s);
display: flex;
}
.t-calendar__control-section-cell .t-radio-group {
vertical-align: bottom;
}
.t-calendar__control-section-cell .t-select {
display: inline;
}
.t-calendar__control-section-cell:last-child {
margin-right: 0;
}
.t-calendar__panel {
box-sizing: border-box;
width: 100%;
}
.t-calendar__table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
height: 100%;
}
.t-calendar__table-head,
.t-calendar__table-body {
width: 100%;
}
.t-calendar__table-head-row,
.t-calendar__table-body-row {
width: 100%;
display: flex;
}
.t-calendar__table-head-cell,
.t-calendar__table-body-cell {
flex: 1;
display: flex;
justify-content: flex-end;
font: var(--td-font-title-small);
color: var(--td-text-color-primary);
cursor: default;
padding: 0;
}
.t-calendar__table-head-cell:last-child,
.t-calendar__table-body-cell:last-child {
margin-right: 0;
}
.t-calendar__table-head {
margin-bottom: var(--td-comp-margin-s);
display: block;
}
.t-calendar__table-head-row {
padding-bottom: 0px;
background: var(--td-bg-color-container);
}
.t-calendar__table-head-cell {
height: 100%;
font: var(--td-font-title-small);
color: var(--td-text-color-secondary);
}
.t-calendar__table-body-cell {
cursor: pointer;
}
.t-calendar__table-body-cell:hover {
background-color: var(--td-bg-color-container-hover);
transition: background-color 0.2s linear;
}
.t-calendar__table-body-cell-display {
font: var(--td-font-title-small);
color: var(--td-text-color-primary);
}
.t-card {
font: var(--td-font-body-medium);
margin: 0;
padding: 0;
list-style: none;
position: relative;
box-sizing: border-box;
border-radius: var(--td-radius-medium);
background-color: var(--td-bg-color-container);
color: var(--td-text-color-primary);
transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-card--bordered {
border: 1px solid var(--td-component-border);
}
.t-card--shadow-hover:hover,
.t-card--shadow {
box-shadow: var(--td-shadow-1);
}
.t-card__cover {
display: flow-root;
}
.t-card__cover img {
display: flow-root;
width: 100%;
max-height: 100%;
border-radius: var(--td-radius-default) var(--td-radius-default) 0 0;
}
.t-card__body {
display: flow-root;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
}
.t-card__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
position: relative;
}
.t-card__header-wrapper {
flex: 1;
display: flex;
align-items: center;
}
.t-card__header + .t-card__cover img {
border-radius: 0;
}
.t-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
}
.t-card__footer-wrapper {
flex: 1;
}
.t-size-s .t-card__body {
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
}
.t-size-s .t-card__header {
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
}
.t-size-s .t-card__footer {
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
}
.t-card__avatar {
margin-right: var(--td-comp-margin-l);
width: var(--td-comp-size-xxxl);
height: var(--td-comp-size-xxxl);
}
.t-card__title {
font: var(--td-font-title-medium);
color: var(--td-text-color-primary);
margin-right: var(--td-comp-margin-l);
word-break: break-all;
}
.t-card__subtitle {
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
word-break: break-all;
}
.t-card__description {
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
margin-top: var(--td-comp-margin-xs);
word-break: break-all;
}
.t-card__actions {
float: right;
color: var(--td-brand-color);
}
.t-card__title--bordered {
border-bottom: 1px solid var(--td-component-border);
}
.t-comment {
font: var(--td-font-body-medium);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
color: var(--td-text-color-primary);
}
.t-comment__inner {
display: flex;
}
.t-comment__avatar {
flex-shrink: 0;
margin-right: var(--td-comp-margin-xxl);
cursor: pointer;
display: flex;
}
.t-comment__avatar-image {
width: var(--td-comp-size-xxxl);
height: var(--td-comp-size-xxxl);
border-radius: var(--td-radius-circle);
}
.t-comment__content {
flex: auto;
font: var(--td-font-body-medium);
}
.t-comment__author {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
margin-bottom: var(--td-comp-margin-s);
}
.t-comment__name {
display: inline-flex;
align-items: center;
font: var(--td-font-title-medium);
padding-right: var(--td-comp-paddingLR-s);
cursor: pointer;
}
.t-comment__time {
font: var(--td-font-body-small);
padding-right: var(--td-comp-paddingLR-s);
color: var(--td-text-color-placeholder);
}
.t-comment__detail {
word-break: break-all;
font: var(--td-font-body-medium);
}
.t-comment__quote {
margin-top: var(--td-comp-margin-l);
border-left: 4px solid var(--td-component-stroke);
padding-left: var(--td-comp-margin-l);
}
.t-comment__quote .t-comment__name,
.t-comment__quote .t-comment__detail {
color: var(--td-text-color-secondary);
}
.t-comment__actions {
margin-top: var(--td-comp-margin-s);
display: flex;
justify-content: flex-end;
list-style: none;
padding: 0;
gap: var(--td-comp-margin-s);
}
.t-comment__actions .t-button--variant-text {
color: var(--td-text-color-placeholder);
}
.t-comment__actions .t-button--variant-text .t-button__text {
gap: var(--td-comp-margin-s);
}
.t-comment__reply {
margin-top: var(--td-comp-margin-l);
margin-left: calc(var(--td-comp-size-xxxl) + var(--td-comp-margin-xxl));
background-color: var(--td-bg-color-secondarycontainer);
border-radius: var(--td-radius-medium);
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
}
.t-comment__reply .t-button--variant-text {
color: var(--td-text-color-placeholder);
}
.t-comment__reply .t-button--variant-text:hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.t-comment__reply .t-button--variant-text .t-button__text {
gap: var(--td-comp-margin-s);
}
.t-empty {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
list-style: none;
padding: 0;
text-align: center;
}
.t-empty__image {
font-size: 48px;
display: flex;
justify-content: center;
}
.t-empty__title {
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
margin-top: var(--td-comp-margin-s);
margin-bottom: 0;
}
.t-empty__description {
font: var(--td-font-body-medium);
color: var(--td-text-color-placeholder);
margin-top: var(--td-comp-margin-xs);
margin-bottom: 0;
}
.t-empty__action {
margin-top: var(--td-comp-margin-xxl);
margin-bottom: 0;
}
.t-empty.t-size-s .t-empty__image {
font-size: 20px;
}
.t-empty.t-size-s .t-empty__title {
font: var(--td-font-body-small);
margin-top: var(--td-comp-margin-xxs);
}
.t-empty.t-size-s .t-empty__description {
font: var(--td-font-body-small);
margin-top: var(--td-comp-margin-xxs);
}
.t-empty.t-size-l .t-empty__image {
font-size: 64px;
}
@keyframes tDialogZoomIn {
0% {
opacity: 0;
transform: scale(0.01);
}
100% {
opacity: 1;
}
}
@keyframes tDialogZoomOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale(0.01);
}
}
@keyframes tDialogMaskIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes tDialogMaskOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.t-dialog-zoom .animation-enter {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
animation-play-state: paused;
}
.t-dialog-zoom .animation-exit {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
animation-play-state: paused;
}
.t-dialog-zoom .animation-active {
animation-play-state: running;
animation-fill-mode: both;
}
.t-dialog-zoom-enter,
.t-dialog-zoom-enter-from,
.t-dialog-zoom-appear {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
animation-play-state: paused;
}
.t-dialog-zoom-exit {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
animation-play-state: paused;
}
.t-dialog-zoom-enter-active,
.t-dialog-zoom-appear-active {
animation-name: tDialogZoomIn;
animation-play-state: running;
animation-fill-mode: both;
}
.t-dialog-zoom-exit-active {
animation-name: tDialogZoomOut;
animation-play-state: running;
animation-fill-mode: both;
}
.t-dialog-zoom__vue-enter-active .t-dialog {
animation-name: tDialogZoomIn;
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
animation-play-state: paused;
}
.t-dialog-zoom__vue-enter-active .t-dialog__mask {
animation-name: tDialogMaskIn;
animation-duration: 0.2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: both;
}
.t-dialog-zoom__vue-leave-active .t-dialog {
animation-name: tDialogZoomOut;
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
animation-play-state: paused;
}
.t-dialog-zoom__vue-leave-active .t-dialog__mask {
animation-name: tDialogMaskOut;
animation-duration: 0.2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: both;
}
.t-dialog-zoom__vue-enter-to .t-dialog {
animation-play-state: running;
animation-fill-mode: both;
}
.t-dialog-zoom__vue-leave-to .t-dialog {
animation-play-state: running;
animation-fill-mode: both;
}
.t-dialog-fade-enter,
.t-dialog-fade-appear {
opacity: 0;
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
animation-play-state: paused;
}
.t-dialog-fade-exit {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
animation-play-state: paused;
}
.t-dialog-fade-enter.t-dialog-fade-enter-active,
.t-dialog-fade-appear.t-dialog-fade-appear-active {
animation-name: tDialogFadeIn;
animation-play-state: running;
}
.t-dialog-fade-exit.t-dialog-fade-exit-active {
animation-name: tDialogFadeOut;
animation-play-state: running;
}
@keyframes tDialogFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes tDialogFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.t-dialog {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
width: 480px;
background-color: var(--td-bg-color-container);
position: relative;
border: 1px solid var(--td-border-level-1-color);
border-radius: var(--td-radius-large);
}
.t-dialog .t-icon.t-is-info {
color: var(--td-brand-color);
}
.t-dialog .t-icon.t-is-success {
color: var(--td-success-color);
}
.t-dialog .t-icon.t-is-warning {
color: var(--td-warning-color);
}
.t-dialog .t-icon.t-is-error {
color: var(--td-error-color);
}
.t-dialog--lock {
overflow: hidden;
}
.t-dialog__header {
color: var(--td-text-color-primary);
font: var(--td-font-title-medium);
font-weight: 600;
display: flex;
align-items: center;
word-break: break-word;
gap: var(--td-comp-margin-s);
box-sizing: border-box;
}
.t-dialog__header .t-dialog__header-content {
display: flex;
align-items: flex-start;
width: 100%;
}
.t-dialog__header .t-icon:not(.t-icon-close) {
font-size: calc(var(--td-font-size-body-large) + 8px);
display: inline-flex;
align-items: center;
margin-right: var(--td-comp-margin-s);
flex-shrink: 0;
}
.t-dialog__header--fullscreen {
background-color: var(--td-bg-color-secondarycontainer);
min-height: var(--td-comp-size-xxxl);
justify-content: flex-end;
display: flex;
align-items: center;
flex-direction: row;
padding: 0 var(--td-comp-paddingLR-xxl);
}
.t-dialog__header--fullscreen .t-dialog__header-content {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.t-dialog__body {
color: var(--td-text-color-secondary);
font: var(--td-font-body-medium);
overflow: auto;
padding: var(--td-comp-paddingTB-l) 0;
word-break: break-word;
}
@-moz-document url-prefix() {
.t-dialog__body {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-dialog__body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-dialog__body::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-dialog__body::-webkit-scrollbar-thumb:vertical:hover,
.t-dialog__body::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-dialog__body__icon,
.t-dialog__body--icon {
padding: var(--td-comp-paddingTB-l) 0;
}
.t-dialog__body--fullscreen {
box-sizing: border-box;
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl));
overflow: auto;
}
@-moz-document url-prefix() {
.t-dialog__body--fullscreen {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-dialog__body--fullscreen::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-dialog__body--fullscreen::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover,
.t-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-dialog__body--fullscreen--without-footer {
box-sizing: border-box;
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
height: calc(100% - var(--td-comp-size-xxxl));
overflow: auto;
}
.t-dialog__footer {
width: 100%;
text-align: right;
padding: var(--td-comp-paddingTB-l) 0 0;
}
.t-dialog__footer .t-button + .t-button {
margin-left: var(--td-comp-margin-s);
}
.t-dialog__footer--fullscreen {
min-height: var(--td-comp-size-xxxxl);
padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl);
box-sizing: border-box;
}
.t-dialog--default {
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
}
.t-dialog__close {
font-size: calc(var(--td-font-size-body-large) + 4px);
color: var(--td-text-color-secondary);
display: flex;
width: calc(var(--td-font-size-body-large) + 4px);
height: calc(var(--td-font-size-body-large) + 4px);
align-items: center;
border-radius: var(--td-radius-default);
transition: all 0.2s linear;
padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
}
.t-dialog__close:hover {
cursor: pointer;
background: var(--td-bg-color-container-hover);
}
.t-dialog__close:active {
background: var(--td-bg-color-container-active);
}
.t-dialog__close--fullscreen {
display: flex;
background: transparent;
}
.t-dialog__close--fullscreen:hover {
cursor: pointer;
background: var(--td-bg-color-secondarycontainer-hover);
}
.t-dialog__close--fullscreen:active {
background: var(--td-bg-color-secondarycontainer-active);
}
.t-dialog.t-dialog--draggable:hover {
cursor: move;
}
.t-dialog.t-dialog--draggable .t-dialog__header:hover,
.t-dialog.t-dialog--draggable .t-dialog__body:hover,
.t-dialog.t-dialog--draggable .t-dialog__footer:hover {
cursor: auto;
}
.t-dialog__fullscreen {
width: 100%;
border-radius: 0;
}
.t-dialog__ctx {
pointer-events: auto;
outline: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.t-dialog__ctx.t-dialog__ctx--modeless {
pointer-events: none;
}
.t-dialog__ctx.t-dialog__ctx--fixed {
position: fixed;
z-index: 2500;
}
.t-dialog__ctx.t-dialog__ctx--absolute {
position: absolute;
}
.t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__mask {
position: absolute;
}
.t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__wrap {
position: absolute;
}
.t-dialog__ctx.t-is-visible {
visibility: visible;
}
.t-dialog__ctx.t-is-hidden {
visibility: hidden;
}
.t-dialog__ctx.t-is-display {
display: block;
}
.t-dialog__ctx.t-not-display {
display: none;
}
.t-dialog__ctx .t-dialog__mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: var(--td-mask-active);
pointer-events: auto;
}
.t-dialog__ctx .t-dialog__wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: auto;
}
@-moz-document url-prefix() {
.t-dialog__ctx .t-dialog__wrap {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 15px;
}
.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover,
.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-dialog__ctx .t-dialog__position {
display: flex;
justify-content: center;
min-height: 100%;
width: 100%;
position: relative;
padding: 48px 0;
box-sizing: border-box;
}
.t-dialog__ctx .t-dialog__position.t-dialog--top {
align-items: flex-start;
padding-top: 20vh;
}
.t-dialog__ctx .t-dialog__position.t-dialog--center {
align-items: center;
}
.t-dialog__ctx .t-dialog__position_fullscreen {
display: flex;
justify-content: center;
min-height: 100%;
width: 100%;
position: relative;
box-sizing: border-box;
}
.t-dialog__ctx .t-is-hidden {
background: none;
}
.t-dialog__ctx .t-dialog {
pointer-events: auto;
z-index: 2500;
}
.t-dialog__ctx.t-dialog__ctx--modeless .t-dialog {
box-shadow: var(--td-shadow-3);
}
.t-image-viewer__img-error {
height: 440px;
width: 440px;
background-color: var(--td-bg-color-component-disabled);
border-radius: 4px;
color: #000000;
cursor: inherit;
}
.t-image-viewer__img-error .t-image-viewer__img-error-content {
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
font: var(--td-font-body-medium);
}
.t-image-viewer__img-error .t-image-viewer__img-error-content .t-image-viewer__img-error-text {
margin-top: var(--td-comp-margin-s);
}
@keyframes modal-image-show {
0% {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes modal-image-hide {
0% {
transform: scale(1);
}
to {
transform: scale(0);
}
}
@keyframes modal-mask-show {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modal-mask-hide {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
.t-image-viewer-preview-image {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3000;
overflow: hidden;
animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show;
}
.t-image-viewer-preview-image.t-is-hide {
animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards;
}
.t-image-viewer-preview-image.t-is-hide .t-image-viewer__modal-pic .t-image-viewer__modal-box {
animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards;
}
.t-image-viewer-preview-image .t-image-viewer__modal-index {
text-align: center;
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-anti);
position: absolute;
top: 92px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.4);
border-radius: var(--td-radius-default);
padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
z-index: 1;
}
.t-image-viewer-preview-image .t-image-viewer__modal-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--td-mask-active);
height: 100%;
width: 100%;
transition: all 0.2s ease;
opacity: 1;
}
.t-image-viewer-preview-image .t-image-viewer__modal-pic {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show;
}
.t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image {
display: block;
max-width: min(90vw, 1000px);
max-height: min(90vh, 800px);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
transform: rotate(0deg);
object-fit: contain;
}
.t-image-viewer-preview-image .t-image-viewer__modal-header {
width: 100%;
position: absolute;
top: 0;
z-index: 1;
height: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--td-bg-color-container);
padding: 0 0 12px 0;
}
.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show {
padding: 12px 0;
}
@keyframes preview-icon-range {
0% {
transform: translate(-50%, 50%) rotateZ(0);
}
to {
transform: translate(-50%, 50%) rotateZ(-180deg);
}
}
@keyframes preview-icon-unrange {
0% {
transform: translate(-50%, 50%) rotateZ(-180deg);
}
to {
transform: translate(-50%, 50%) rotateZ(0);
}
}
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt {
width: var(--td-comp-size-xxs);
height: var(--td-comp-size-xxs);
display: inline-flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
background-color: var(--td-bg-color-container);
color: var(--td-text-color-primary);
border-radius: 50%;
box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange;
}
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt:hover {
background-color: inherit;
}
@keyframes preview-image-show {
0% {
height: 0;
}
to {
height: 40px;
}
}
@keyframes preview-image-hide {
0% {
height: 40px;
}
to {
height: 0;
}
}
.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-prev {
animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show;
}
.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-pre-bt {
animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range;
}
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev {
width: calc(40px / 9 * 16 * 7 + 4px * 6);
animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide;
display: flex;
position: relative;
overflow: hidden;
}
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before,
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after {
content: "";
position: absolute;
height: 100%;
z-index: 1;
width: calc(40px / 9 * 16);
pointer-events: none;
}
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before {
left: 0;
background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0));
}
.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container));
}
.t-image-viewer-preview-image .t-image-viewer__header-trans {
height: 100%;
transition: transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-left: calc(40px / 9 * 16 * 3 + 4px * 3);
}
.t-image-viewer-preview-image .t-image-viewer__header-box {
box-sizing: border-box;
width: calc(40px / 9 * 16);
height: 40px;
position: relative;
transition: 0.2s;
overflow: hidden;
border-radius: var(--td-radius-default);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
background-color: var(--td-bg-color-secondarycontainer);
}
.t-image-viewer-preview-image .t-image-viewer__header-box .t-image-viewer__header-img {
width: auto;
height: 100%;
}
.t-image-viewer-preview-image .t-image-viewer__header-box:hover,
.t-image-viewer-preview-image .t-image-viewer__header-box.t-is-active {
border-color: var(--td-brand-color);
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon {
cursor: pointer;
color: var(--td-text-color-primary);
border-radius: var(--td-radius-default);
transition: 0.2s;
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt {
top: 100px;
right: 40px;
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt,
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt {
top: 50%;
transform: translateY(-50%);
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt {
left: 40px;
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt {
right: 40px;
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt,
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt,
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt {
position: fixed;
z-index: 10;
color: var(--td-text-color-anti);
background-color: rgba(0, 0, 0, 0.4);
border-radius: 50%;
width: var(--td-comp-size-xl);
height: var(--td-comp-size-xl);
display: flex;
justify-content: center;
align-items: center;
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon .t-image-viewer__modal-icon-label {
margin-left: 2px;
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled {
color: rgba(255, 255, 255, 0.22);
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.t-image-viewer-preview-image .t-image-viewer__modal-icon:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.t-image-viewer__mask {
width: 100vh;
height: 100vh;
left: 0;
top: 0;
z-index: 99;
position: fixed;
background-color: transparent;
}
.t-image-viewer__utils {
width: 100%;
position: absolute;
bottom: 32px;
z-index: 1;
height: auto;
display: flex;
align-items: center;
justify-content: center;
color: var(--td-text-color-primary);
user-select: none;
}
.t-image-viewer__utils .t-image-viewer__utils-content {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
line-height: 100%;
background: var(--td-bg-color-container);
border-radius: var(--td-radius-medium);
padding: 0 var(--td-comp-paddingLR-xs);
}
.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon {
cursor: pointer;
margin: 0 var(--td-comp-margin-xs);
width: var(--td-comp-size-m);
height: var(--td-comp-size-m);
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--td-radius-default);
transition: 0.2s;
}
.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale {
width: var(--td-comp-size-xl);
text-align: center;
cursor: inherit;
}
.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale:hover {
background-color: var(--td-bg-color-container);
}
.t-image-viewer-mini__footer .t-image-viewer__utils {
position: inherit;
}
.t-image-viewer-mini__content {
max-width: min(90vw, 1000px);
max-height: min(90vh, 800px);
}
@keyframes modal-image-show {
0% {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image {
display: block;
max-width: min(80vw, 800px);
max-height: min(80vh, 600px);
transition: all 0.2s ease;
transform: rotate(0deg);
object-fit: contain;
}
.t-image-viewer__dialog.t-dialog__ctx--fixed {
z-index: 3000;
}
.t-image-viewer__dialog .t-dialog__header {
padding: 0 var(--td-comp-paddingLR-s);
pointer-events: none;
}
.t-image-viewer__dialog .t-dialog__header .t-image-viewer__dialog-title {
pointer-events: all;
}
.t-image-viewer__dialog .t-dialog__header .t-dialog__close {
pointer-events: auto;
}
.t-image-viewer__dialog .t-dialog {
border-color: var(--td-component-border);
overflow: hidden;
padding: 0;
box-shadow: var(--td-shadow-3);
}
.t-image-viewer__dialog .t-dialog__header {
height: 40px;
width: 100%;
font-size: var(--td-font-size-body-medium);
background-color: var(--td-bg-color-secondarycontainer);
}
.t-image-viewer__dialog .t-dialog__header-content {
margin-left: 32px;
justify-content: center;
}
.t-image-viewer__dialog .t-dialog__close:hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.t-list {
font: var(--td-font-body-medium);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
color: var(--td-text-color-primary);
background: var(--td-bg-color-container);
}
@-moz-document url-prefix() {
.t-list {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-list::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-list::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-list::-webkit-scrollbar-thumb:vertical:hover,
.t-list::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-list__inner {
list-style: none;
padding: 0;
margin: 0;
}
.t-list-item {
font: var(--td-font-body-medium);
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.t-list-item::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
}
.t-list-item-main {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex: 1;
}
.t-list-item__meta {
display: flex;
}
.t-list-item__meta-avatar {
width: var(--td-comp-size-xxxl);
height: var(--td-comp-size-xxxl);
border-radius: calc(var(--td-comp-size-xxxl) / 2);
overflow: hidden;
background: var(--td-bg-color-page);
margin-right: var(--td-comp-margin-l);
flex-shrink: 0;
}
.t-list-item__meta-avatar img {
max-width: 100%;
width: 100%;
height: 100%;
}
.t-list-item__meta-title {
padding: 0;
font: var(--td-font-title-medium);
margin: 0 0 var(--td-comp-margin-s);
color: var(--td-text-color-primary);
}
.t-list-item__meta-description {
margin-right: var(--td-comp-margin-xxl);
color: var(--td-text-color-primary);
}
.t-list-item__action {
list-style: none;
padding: 0;
flex-shrink: 0;
}
.t-list-item__action > li {
display: inline-block;
}
.t-list-item__action > li:not(:last-child) {
margin-right: var(--td-comp-margin-l);
}
.t-list-item__action > li .t-icon {
color: var(--td-text-color-secondary);
font-size: var(--td-comp-size-xxxs);
}
.t-list-item__action > li .t-icon:hover {
color: var(--td-text-color-link);
cursor: pointer;
}
.t-list-item__action > li > a {
text-decoration: none;
color: var(--td-brand-color);
}
.t-list--split .t-list-item::after {
background: var(--td-border-level-1-color);
}
.t-list--stripe .t-list-item:nth-child(even) {
background: var(--td-bg-color-secondarycontainer);
}
.t-list--vertical-action .t-list-item {
flex-direction: column;
}
.t-list.t-size-s .t-list-item {
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m);
}
.t-list.t-size-l .t-list-item {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
}
.t-list__header,
.t-list__footer {
background: var(--td-bg-color-container);
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
}
.t-list__load {
background: var(--td-bg-color-container);
text-align: center;
line-height: var(--td-line-height-body-medium);
}
.t-list__load > div {
display: flex;
align-items: center;
justify-content: center;
}
.t-list__load:not(:empty) {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
}
.t-list__load .t-loading {
font-size: var(--td-comp-size-xxxs);
margin-right: var(--td-comp-margin-s);
}
.t-list__load .t-loading.t-is-load-more {
cursor: pointer;
}
.t-progress {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-progress__inner {
position: relative;
height: 100%;
background: var(--td-brand-color);
border-radius: var(--td-radius-round);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-progress__info {
margin-left: var(--td-comp-margin-s);
color: var(--td-text-color-primary);
white-space: nowrap;
display: inline-flex;
}
.t-progress__icon {
font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.t-progress__bar {
width: 100%;
height: var(--td-size-3);
overflow: hidden;
background: var(--td-bg-color-component);
border-radius: var(--td-radius-round);
}
.t-progress--thin {
display: flex;
justify-content: space-between;
align-items: center;
}
.t-progress--plump {
height: var(--td-comp-size-xxs);
border-radius: calc(var(--td-comp-size-xxs) / 2);
display: flex;
align-items: center;
}
.t-progress--plump .t-progress__info {
font-size: var(--td-font-size-body-small);
}
.t-progress--over-ten .t-progress__info {
position: absolute;
top: 50%;
z-index: 10;
right: var(--td-comp-margin-s);
color: var(--td-text-color-anti);
transform: translateY(-50%);
}
.t-progress--under-ten .t-progress__info,
.t-progress--under-ten .t-progress__inner {
display: inline-block;
}
.t-progress--under-ten .t-progress__info {
vertical-align: top;
}
.t-progress--circle {
position: relative;
}
.t-progress--circle .t-progress__info {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 100%;
margin: 0;
font-size: inherit;
font-weight: 600;
line-height: 1;
text-align: center;
transform: translate(-50%, -50%);
}
.t-progress--circle .t-progress__circle-outer {
stroke: var(--td-bg-color-component);
}
.t-progress--circle .t-progress__circle-inner {
stroke: var(--td-brand-color);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-progress--circle .t-progress__icon {
font-size: 2.4em;
}
.t-progress--status--active .t-progress__inner::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite;
background: var(--td-text-color-anti);
opacity: 0.2;
}
.t-progress--status--success .t-progress__inner {
background: var(--td-success-color);
}
.t-progress--status--success .t-progress__circle-inner {
stroke: var(--td-success-color);
}
.t-progress--status--success .t-progress__icon {
color: var(--td-success-color);
}
.t-progress--status--warning .t-progress__inner {
background: var(--td-warning-color);
}
.t-progress--status--warning .t-progress__circle-inner {
stroke: var(--td-warning-color);
}
.t-progress--status--warning .t-progress__icon {
color: var(--td-warning-color);
}
.t-progress--status--error .t-progress__inner {
background: var(--td-error-color);
}
.t-progress--status--error .t-progress__circle-inner {
stroke: var(--td-error-color);
}
.t-progress--status--error .t-progress__icon {
color: var(--td-error-color);
}
@keyframes progress-active-animation {
0% {
width: 0;
opacity: 0.1;
}
35% {
width: 50%;
opacity: 0.4;
}
100% {
width: 100%;
opacity: 0;
}
}
:root,
:root[theme-mode="light"] {
--skeleton-animation-gradient: rgba(0, 0, 0, 0.04);
}
:root[theme-mode="dark"] {
--skeleton-animation-gradient: rgba(255, 255, 255, 0.06);
}
.t-skeleton {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-skeleton__row {
display: flex;
margin-bottom: var(--td-comp-margin-l);
align-items: center;
}
.t-skeleton__row:only-child,
.t-skeleton__row:last-child {
margin-bottom: 0;
}
.t-skeleton__col {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--td-bg-color-secondarycontainer);
color: var(--td-text-color-disabled);
margin-right: var(--td-comp-margin-l);
}
.t-skeleton__col:first-child:last-child,
.t-skeleton__col:last-child {
margin-right: 0;
}
.t-skeleton--type-text {
width: 100%;
height: var(--td-font-size-body-large);
border-radius: var(--td-radius-default);
}
.t-skeleton--type-rect {
width: 120px;
height: 88px;
border-radius: var(--td-radius-default);
}
.t-skeleton--type-circle {
width: 32px;
height: 32px;
border-radius: var(--td-radius-circle);
flex-shrink: 0;
}
.t-skeleton--animation-gradient {
position: relative;
overflow-x: hidden;
}
.t-skeleton--animation-gradient::after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-animation-gradient), rgba(255, 255, 255, 0));
animation: t-skeleton--gradient 1.5s linear 2s infinite;
}
.t-skeleton--animation-flashed {
animation: t-skeleton--flashed 2s linear 2s infinite;
}
@keyframes t-skeleton--gradient {
0% {
transform: translateX(-100%) skewX(-15deg);
}
100% {
transform: translateX(100%) skewX(-15deg);
}
}
@keyframes t-skeleton--flashed {
0% {
opacity: 1;
}
50% {
background-color: rgba(230, 230, 230, 0.3);
opacity: 0.3;
}
100% {
opacity: 1;
}
}
.t-statistic {
display: inline-block;
font-size: var(--td-font-size-body-medium);
line-height: var(--td-line-height-body-medium);
color: var(--td-text-color-secondary);
}
.t-statistic-title {
font-size: var(--td-font-body-medium);
margin-bottom: var(--td-comp-margin-s);
}
.t-statistic-content {
display: inline-block;
color: var(--td-text-color-primary);
text-align: left;
white-space: nowrap;
}
.t-statistic-content-value {
font-size: var(--td-font-size-headline-medium);
line-height: var(--td-line-height-headline-medium);
font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.t-statistic-content-unit {
font-size: var(--td-font-size-body-medium);
margin-left: var(--td-comp-margin-xs);
font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.t-statistic-content-suffix {
display: inline-flex;
align-items: center;
font-size: var(--td-font-size-title-large);
margin-left: var(--td-comp-margin-s);
}
.t-statistic-content-prefix {
display: inline-flex;
align-items: center;
font-size: var(--td-font-size-title-large);
margin-right: var(--td-comp-margin-s);
}
.t-statistic-content-prefix .t-icon {
font-size: var(--td-font-size-title-large);
}
.t-statistic-extra {
margin-top: 8px;
}
.t-statistic-extra .t-space .t-space-item {
display: flex;
}
/* Swiper */
.t-swiper {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: relative;
height: fit-content;
}
.t-swiper__wrap {
display: block;
position: relative;
height: 100%;
}
.t-swiper__content {
position: relative;
z-index: 1;
overflow: hidden;
}
.t-swiper__container {
position: relative;
display: flex;
flex-direction: row;
height: 100%;
z-index: 1;
}
.t-swiper__container__item {
flex: 0 0 auto;
width: 100%;
height: 100%;
display: inline-block;
}
.t-swiper__arrow {
display: flex;
align-items: center;
}
.t-swiper__arrow svg.t-icon {
width: 20px;
height: 20px;
}
.t-swiper__arrow svg.t-icon::before {
font-size: 24px;
}
.t-swiper__arrow--default .t-swiper__arrow-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-font-white-2);
transition: 0.2s linear;
cursor: pointer;
left: 16px;
}
.t-swiper__arrow--default .t-swiper__arrow-left:hover {
color: var(--td-bg-color-container);
background-color: var(--td-font-white-4);
border-radius: var(--td-radius-default);
transition: 0.2s linear;
}
.t-swiper__arrow--default .t-swiper__arrow-left:active {
background-color: var(--td-font-white-3);
transition: 0.2s linear;
}
.t-swiper__arrow--default .t-swiper__arrow-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-font-white-2);
transition: 0.2s linear;
cursor: pointer;
right: 16px;
}
.t-swiper__arrow--default .t-swiper__arrow-right:hover {
color: var(--td-bg-color-container);
background-color: var(--td-font-white-4);
border-radius: var(--td-radius-default);
transition: 0.2s linear;
}
.t-swiper__arrow--default .t-swiper__arrow-right:active {
background-color: var(--td-font-white-3);
transition: 0.2s linear;
}
.t-swiper-card .t-swiper__container {
display: block;
}
.t-swiper-card .t-swiper__container .t-is-active {
z-index: 2;
}
.t-swiper-card .t-swiper__card {
position: absolute;
top: 0;
left: 0;
width: 41.5%;
height: 100%;
z-index: 0;
}
.t-swiper-fade .t-swiper__container {
display: block;
}
.t-swiper-fade .t-swiper__fade {
position: absolute;
top: 0;
left: 0;
}
.t-swiper__navigation {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: row;
bottom: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.t-swiper__navigation > li {
flex: 1 0 auto;
list-style-type: none;
display: flex;
}
.t-swiper__navigation .t-swiper__arrow svg.t-icon {
width: 16px;
height: 16px;
}
.t-swiper__navigation-bars .t-swiper__navigation-item {
cursor: pointer;
margin: 0 0 0 6px;
padding: 18px 0;
width: 14px;
height: auto;
}
.t-swiper__navigation-bars .t-swiper__navigation-item span {
width: 100%;
height: 3px;
}
.t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
margin-left: 0;
}
.t-swiper__navigation-bars .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
width: 24px;
}
.t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item {
cursor: pointer;
margin: 0 0 0 6px;
padding: 18px 0;
width: 14px;
height: auto;
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item span {
border-radius: calc(3px / 2);
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item span {
width: 100%;
height: 3px;
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item:nth-child(1) {
margin-left: 0;
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active {
width: 24px;
}
.t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper__navigation-dots .t-swiper__navigation-item {
cursor: pointer;
margin: 0 0 0 6px;
padding: 18px 0;
width: var(--td-size-2);
height: auto;
}
.t-swiper__navigation-dots .t-swiper__navigation-item span {
border-radius: 50%;
}
.t-swiper__navigation-dots .t-swiper__navigation-item span {
width: 100%;
height: var(--td-size-2);
}
.t-swiper__navigation-dots .t-swiper__navigation-item:nth-child(1) {
margin-left: 0;
}
.t-swiper__navigation-dots .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper__navigation-dots .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper__navigation-dots .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper__navigation-dots .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper__navigation--fraction {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: auto;
right: auto;
bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
height: var(--td-line-height-body-medium);
line-height: var(--td-line-height-body-medium);
}
.t-swiper__navigation--fraction .t-swiper__arrow-left {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
color: var(--td-text-color-primary);
}
.t-swiper__navigation--fraction .t-swiper__arrow-left:active {
color: var(--td-brand-color-active);
}
.t-swiper__navigation--fraction .t-swiper__arrow-right {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
color: var(--td-text-color-primary);
}
.t-swiper__navigation--fraction .t-swiper__arrow-right:active {
color: var(--td-brand-color-active);
}
.t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
display: inline-block;
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-secondary);
margin: 0;
}
.t-swiper--vertical .t-swiper__container {
flex-direction: column;
}
.t-swiper--vertical .t-swiper__navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: auto;
right: 0;
bottom: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
cursor: pointer;
margin: 6px 0 0 0;
padding: 0 18px;
width: auto;
height: 14px;
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
width: 3px;
height: 100%;
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
margin-top: 0;
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
height: 24px;
}
.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item {
cursor: pointer;
margin: 6px 0 0 0;
padding: 0 18px;
width: auto;
height: 14px;
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span {
border-radius: calc(3px / 2);
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span {
width: 3px;
height: 100%;
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item:nth-child(1) {
margin-top: 0;
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active {
height: 24px;
}
.t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item {
cursor: pointer;
margin: 6px 0 0 0;
padding: 0 18px;
width: auto;
max-height: var(--td-size-2);
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span {
border-radius: 50%;
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span {
width: var(--td-size-2);
height: 100%;
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item:nth-child(1) {
margin-top: 0;
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper--outside .t-swiper__navigation {
bottom: -36px;
}
.t-swiper--outside .t-swiper__navigation--fraction {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: auto;
right: auto;
bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
height: var(--td-line-height-body-medium);
line-height: var(--td-line-height-body-medium);
}
.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
color: var(--td-text-color-primary);
}
.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
color: var(--td-brand-color-active);
}
.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
color: var(--td-text-color-primary);
}
.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
color: var(--td-brand-color-active);
}
.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
display: inline-block;
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-secondary);
margin: 0;
}
.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
background-color: var(--td-text-color-disabled);
}
.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-text-color-primary);
}
.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-brand-color-active);
}
.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
background-color: var(--td-brand-color-active);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation {
bottom: auto;
right: -36px;
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: auto;
right: auto;
bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
height: var(--td-line-height-body-medium);
line-height: var(--td-line-height-body-medium);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
color: var(--td-text-color-primary);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
color: var(--td-brand-color-active);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
color: var(--td-text-color-primary);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
color: var(--td-brand-color-active);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
display: inline-block;
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-secondary);
margin: 0;
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
background-color: var(--td-text-color-disabled);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-text-color-primary);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-brand-color-active);
}
.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-is-active span {
background-color: var(--td-brand-color-active);
}
.t-swiper--inside .t-swiper__navigation {
bottom: 0;
}
.t-swiper--inside .t-swiper__navigation--fraction {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: auto;
right: auto;
bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px));
height: var(--td-line-height-body-medium);
line-height: var(--td-line-height-body-medium);
}
.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
color: var(--td-text-color-primary);
}
.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
color: var(--td-brand-color-active);
}
.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-medium);
height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
color: var(--td-text-color-primary);
}
.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
color: var(--td-brand-color-active);
}
.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
display: inline-block;
font-size: var(--td-font-size-body-medium);
color: var(--td-text-color-secondary);
margin: 0;
}
.t-swiper--large .t-swiper__arrow i.t-icon::before {
font-size: 32px;
}
.t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-left {
width: 32px;
height: 32px;
left: 24px;
}
.t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-right {
width: 32px;
height: 32px;
right: 24px;
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item {
cursor: pointer;
margin: 0 0 0 8px;
padding: 24px 0;
width: 21px;
height: auto;
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span {
width: 100%;
height: 4px;
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
margin-left: 0;
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
width: 36px;
}
.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper--large .t-swiper__navigation--fraction {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: auto;
right: auto;
bottom: calc(0px - calc(var(--td-line-height-body-large) + 12px));
height: var(--td-line-height-body-large);
line-height: var(--td-line-height-body-large);
}
.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-large);
height: var(--td-line-height-body-large);
cursor: pointer;
}
.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
color: var(--td-text-color-primary);
}
.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
color: var(--td-brand-color-active);
}
.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-large);
height: var(--td-line-height-body-large);
cursor: pointer;
}
.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
color: var(--td-text-color-primary);
}
.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
color: var(--td-brand-color-active);
}
.t-swiper--large .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
display: inline-block;
font-size: var(--td-font-size-body-large);
color: var(--td-text-color-secondary);
margin: 0;
}
.t-swiper--large.t-swiper--outside .t-swiper__navigation {
bottom: -48px;
}
.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
background-color: var(--td-text-color-disabled);
}
.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-text-color-primary);
}
.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-brand-color-active);
}
.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
background-color: var(--td-brand-color-active);
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
cursor: pointer;
margin: 8px 0 0 0;
padding: 0 24px;
width: auto;
height: 21px;
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
width: 4px;
height: 100%;
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
margin-top: 0;
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
height: 36px;
}
.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation {
right: -48px;
}
.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
background-color: var(--td-text-color-disabled);
}
.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-text-color-primary);
}
.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-brand-color-active);
}
.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
background-color: var(--td-brand-color-active);
}
.t-swiper--small .t-swiper__arrow i.t-icon::before {
font-size: 16px;
}
.t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-left {
width: 16px;
height: 16px;
left: 8px;
}
.t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-right {
width: 16px;
height: 16px;
right: 8px;
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item {
cursor: pointer;
margin: 0 0 0 4px;
padding: 12px 0;
width: 9px;
height: auto;
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span {
width: 100%;
height: 2px;
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
margin-left: 0;
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
width: 15px;
}
.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper--small .t-swiper__navigation--fraction {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: auto;
right: auto;
bottom: calc(0px - calc(var(--td-line-height-body-small) + 12px));
height: var(--td-line-height-body-small);
line-height: var(--td-line-height-body-small);
}
.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-small);
height: var(--td-line-height-body-small);
cursor: pointer;
}
.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
color: var(--td-text-color-primary);
}
.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
color: var(--td-brand-color-active);
}
.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right {
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background-color: transparent;
color: var(--td-text-color-secondary);
width: var(--td-line-height-body-small);
height: var(--td-line-height-body-small);
cursor: pointer;
}
.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
color: var(--td-text-color-primary);
}
.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
color: var(--td-brand-color-active);
}
.t-swiper--small .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
display: inline-block;
font-size: var(--td-font-size-body-small);
color: var(--td-text-color-secondary);
margin: 0;
}
.t-swiper--small.t-swiper--outside .t-swiper__navigation {
bottom: -24px;
}
.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
background-color: var(--td-text-color-disabled);
}
.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-text-color-primary);
}
.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-brand-color-active);
}
.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
background-color: var(--td-brand-color-active);
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
cursor: pointer;
margin: 4px 0 0 0;
padding: 0 12px;
width: auto;
height: 9px;
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
width: 2px;
height: 100%;
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
margin-top: 0;
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
background: var(--td-font-white-4);
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-font-white-2);
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-bg-color-container);
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
height: 15px;
}
.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
background-color: var(--td-bg-color-container);
}
.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation {
right: -24px;
}
.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
background-color: var(--td-text-color-disabled);
}
.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
background-color: var(--td-text-color-primary);
}
.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
background-color: var(--td-brand-color-active);
}
.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
background-color: var(--td-brand-color-active);
}
/** 吸顶表头 Affix 组件，zIndex: 1000。宽度拖拽辅助线层级需高于表头 */
@-moz-document url-prefix() {
.scrollbar {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.scrollbar::-webkit-scrollbar-thumb:vertical:hover,
.scrollbar::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.scrollbar.t-table__affixed-footer-elm::-webkit-scrollbar-track,
.scrollbar.t-table__scrollbar--obvious::-webkit-scrollbar-track {
background: var(--td-scroll-track-color);
}
.t-table__affixed-footer-wrap > .scrollbar.t-table__affixed-footer-elm::-webkit-scrollbar-thumb,
.t-table--width-overflow.t-table--footer-affixed .t-table__content::-webkit-scrollbar-thumb,
.t-table--width-overflow.t-table--horizontal-bar-affixed .t-table__content::-webkit-scrollbar-thumb {
background: transparent;
}
.t-table.t-table--overflow-visible {
overflow: initial;
}
.t-table {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-container);
position: relative;
/** loading need to be top of fixed columns */
}
.t-table .t-popup:not(.t-tooltip)[data-popper-placement^="top"] .t-popup__arrow {
bottom: calc(-8px / 2);
}
.t-table:focus-visible {
outline: none;
}
.t-table .t-loading--full {
z-index: 72;
}
.t-table.t-vertical-align-top th:not(.t-table__cell-check),
.t-table.t-vertical-align-top td:not(.t-table__cell-check) {
vertical-align: top;
}
.t-table.t-vertical-align-middle th:not(.t-table__cell-check),
.t-table.t-vertical-align-middle td:not(.t-table__cell-check) {
vertical-align: middle;
}
.t-table.t-vertical-align-bottom th:not(.t-table__cell-check),
.t-table.t-vertical-align-bottom td:not(.t-table__cell-check) {
vertical-align: bottom;
}
.t-table .t-table__resize-line {
display: none;
position: absolute;
left: 10px;
width: 0;
border-left: 1px solid var(--td-component-border);
z-index: 1001;
}
.t-table__column-controller-trigger.t-align-top-right,
.t-table__column-controller-trigger.t-align-bottom-right {
text-align: right;
}
.t-table__column-controller-trigger {
padding: var(--td-comp-paddingTB-l) 0;
}
.t-table__column-controller-item:not(:last-child) {
margin-bottom: var(--td-comp-margin-l);
}
.t-table__content {
position: relative;
}
@-moz-document url-prefix() {
.t-table__content {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-table__content::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-table__content::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-table__content::-webkit-scrollbar-thumb:vertical:hover,
.t-table__content::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
@-moz-document url-prefix() {
.t-table__content {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-table__content::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-table__content::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-table__content::-webkit-scrollbar-thumb:vertical:hover,
.t-table__content::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-table__pagination {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
box-sizing: border-box;
}
.t-table .t-icon {
font-size: var(--td-font-size-body-large);
}
.t-table table {
width: 100%;
border-spacing: 0;
}
.t-table .t-text-ellipsis {
line-height: var(--td-line-height-body-medium);
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-table th,
.t-table td {
position: relative;
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
border-bottom: 1px solid var(--td-component-border);
line-height: var(--td-line-height-body-medium);
font-weight: normal;
overflow-wrap: break-word;
background-color: inherit;
box-sizing: border-box;
text-align: left;
}
.t-table th.t-table__th-drag {
padding: 0;
height: 0;
text-align: center;
}
.t-table thead td,
.t-table th {
color: var(--td-text-color-placeholder);
}
.t-table td[key="row-select"] {
padding: 13px 0 11px var(--td-comp-paddingLR-l);
}
.t-table td.t-align-left,
.t-table th.t-align-left {
text-align: left;
}
.t-table td.t-align-right,
.t-table th.t-align-right {
text-align: right;
}
.t-table td.t-align-center,
.t-table th.t-align-center {
text-align: center;
}
.t-table tr {
background-color: var(--td-bg-color-container);
}
.t-table.t-size-s th,
.t-table.t-size-s td {
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
}
.t-table.t-size-l th,
.t-table.t-size-l td {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
}
.t-table .t-table__expandable-icon-cell,
.t-table .t-table__selection-cell {
padding: 0;
height: 0;
}
.t-table td.t-table__handle-draggable {
text-align: center;
height: 0;
padding: 0;
}
.t-table .t-table__cell--selectable > .t-checkbox {
vertical-align: middle;
}
.t-table .t-table__cell--selectable + td,
.t-table .t-table__cell--selectable + th {
padding-left: 0;
}
.t-table--bordered td,
.t-table--bordered th {
border-left: 1px solid var(--td-component-border);
}
.t-table--bordered td.t-table__cell--fixed-left-last::before,
.t-table--bordered th.t-table__cell--fixed-left-last::before {
border-right: 1px solid var(--td-component-border);
}
.t-table--bordered th:first-child,
.t-table--bordered td.t-table__td-first-col {
border-left-width: 0;
}
.t-table--bordered:not(.t-table--rowspan-colspan) td:first-child {
border-left-width: 0;
}
.t-table--bordered .t-table__content {
border-left: 1px solid var(--td-component-border);
}
.t-table--bordered .t-table__content::-webkit-scrollbar-corner {
background-color: transparent;
}
.t-table--bordered .t-table__content {
border: 1px solid var(--td-component-border);
border-radius: var(--td-radius-default);
}
.t-table--bordered .t-table--loading {
border-bottom: 1px solid var(--td-component-border);
}
.t-table--bordered .t-table__pagination {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
}
.t-table--bordered .t-table__bottom-content + .t-table__pagination {
padding: 0;
}
.t-table--bordered.t-table__header--fixed .t-table__content {
border-bottom: 1px solid var(--td-component-border);
}
.t-table--bordered .t-table__td-last-row {
border-bottom: none;
}
.t-table--striped:not(.t-table--bordered) th,
.t-table--striped:not(.t-table--bordered) td {
border-bottom: none;
}
.t-table--striped.t-table--header-fixed > .t-table__content > table > tbody tr:nth-of-type(even) {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-table--striped:not(.t-table--header-fixed) > .t-table__content > table > tbody > tr:nth-of-type(odd):not(.t-table__expanded-row) {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-table--striped.t-table--hoverable.t-table__header--fixed tbody tr:nth-of-type(even):hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.t-table--striped.t-table--hoverable:not(.t-table__header--fixed) > .t-table__content > table > tbody tr:nth-of-type(odd):hover {
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.t-table--striped.t-table--hoverable > .t-table__content > table > tbody tr {
transition: background-color 0.2s linear;
}
.t-table--striped.t-table--hoverable > .t-table__content > table > tbody tr:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-table--hoverable tbody tr {
transition: background-color 0.2s linear;
}
.t-table--hoverable tbody tr:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-table.t-table--align-top tbody td {
vertical-align: top;
}
.t-table .t-table__cell--highlight {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-table__header--fixed table {
table-layout: fixed;
}
.t-table__header--fixed th,
.t-table__header--fixed td {
overflow-wrap: break-word;
}
.t-table__header--fixed.t-table__header,
.t-table__header--fixed .t-table__header {
width: fit-content;
position: relative;
z-index: 5;
}
@-moz-document url-prefix() {
.t-table__header--fixed .t-table__header {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-table__header--fixed .t-table__header::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:vertical:hover,
.t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
@-moz-document url-prefix() {
.t-table__header--fixed .t-table__header {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-table__header--fixed .t-table__header::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:vertical:hover,
.t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-table__header--fixed .t-table__body {
overflow-y: auto;
width: fit-content;
}
@-moz-document url-prefix() {
.t-table__header--fixed .t-table__body {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-table__header--fixed .t-table__body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:vertical:hover,
.t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
@-moz-document url-prefix() {
.t-table__header--fixed .t-table__body {
scrollbar-color: var(--td-scrollbar-color) transparent;
scrollbar-width: thin;
}
}
.t-table__header--fixed .t-table__body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb {
border: 0px solid transparent;
background-clip: content-box;
background-color: var(--td-scrollbar-color);
border-radius: 11px;
}
.t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:vertical:hover,
.t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:horizontal:hover {
background-color: var(--td-scrollbar-hover-color);
}
.t-table:not(.t-table--bordered) .t-table__cell--selectable + td,
.t-table:not(.t-table--bordered) .t-table__cell--selectable + th {
padding-left: 0;
}
.t-table__cell--fixed.t-table__header--fixed .t-table__header {
overflow: hidden;
width: 100%;
}
.t-table__cell--fixed.t-table__header--fixed .t-table__header .t-table__cell--fixed-left:last-child::after,
.t-table__cell--fixed.t-table__header--fixed .t-table__header .t-table__cell--fixed-right:last-child::after {
content: "";
position: absolute;
right: -6px;
width: 6px;
height: 100%;
top: 0;
background-color: var(--td-bg-color-secondarycontainer);
}
.t-table__cell--fixed.t-table__header--fixed .t-table__body {
overflow: auto scroll;
}
.t-table__cell--fixed .t-table__content {
overflow: auto hidden;
}
.t-table__cell--fixed table {
table-layout: fixed;
min-width: 100%;
}
.t-table__cell--fixed th,
.t-table__cell--fixed td {
position: relative;
}
.t-table__cell--fixed .t-table__cell--fixed-left-last::before {
z-index: -1;
background-color: inherit;
}
.t-table__cell--fixed .t-table__cell--fixed-left-last::after {
position: absolute;
top: 0;
bottom: 0;
content: "";
transition: box-shadow 0.3s;
pointer-events: none;
z-index: -2;
}
.t-table__cell--fixed .t-table__cell--fixed-left-last::after {
right: 0;
transform: translateX(100%);
}
.t-table__cell--fixed .t-table__cell--fixed-right-first::before {
z-index: -1;
background-color: inherit;
}
.t-table__cell--fixed .t-table__cell--fixed-right-first::after {
position: absolute;
top: 0;
bottom: 0;
content: "";
transition: box-shadow 0.3s;
pointer-events: none;
z-index: -2;
}
.t-table__cell--fixed .t-table__cell--fixed-right-first::after {
left: 0;
transform: translateX(-100%);
}
.t-table .t-table__cell-resizable {
position: relative;
}
.t-table .t-table__cell-resizable .t-table__cell--resizer {
position: absolute;
top: 0;
right: -5px;
bottom: 0;
z-index: 10;
width: 10px;
cursor: col-resize;
}
.t-table .t-table__row--disabled {
color: var(--td-text-color-disabled);
}
.t-table .t-table__cell--title {
display: flex;
align-items: center;
}
.t-table__column-controller-desc {
margin-bottom: var(--td-comp-margin-xxl);
}
.t-table__column-controller-block {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
border: 1px solid var(--td-component-border);
border-bottom: 1px solid var(--td-component-border);
}
.t-table__column-controller-block + .t-table__column-controller-block {
border-top: 0;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
border-bottom: 1px solid var(--td-component-border);
}
.t-table__column-controller--fixed .t-checkbox {
width: 108px;
}
/** 表格行点击高亮悬浮态 */
.t-table.t-table__row--active-single tbody > tr.t-table__row--active,
.t-table.t-table__row--active-multiple tbody > tr.t-table__row--active {
background-color: var(--td-brand-color-light);
}
.t-table.t-table__row--active-single tbody > tr.t-table__row--active.t-table__row--hover,
.t-table.t-table__row--active-multiple tbody > tr.t-table__row--active.t-table__row--hover {
background-color: var(--td-brand-color-light-hover);
}
.t-table.t-table--hoverable tbody > tr.t-table__row--active:hover {
background-color: var(--td-brand-color-light-hover);
}
/** 键盘操作悬浮表格行 */
.t-table.t-table--row-expandable tbody > tr.t-table__row--hover,
.t-table.t-table--row-select tbody > tr.t-table__row--hover,
.t-table.t-table__row--active-multiple tbody > tr.t-table__row--hover {
background-color: var(--td-bg-color-container-hover);
}
.t-table--bordered .t-table__cell--sortable .t-table__cell--title,
.t-table--bordered .t-table__cell--filterable .t-table__cell--title {
justify-content: space-between;
}
.t-table th.t-align-right .t-table__cell--title {
justify-content: flex-end;
}
/**
* 有边框和无边框的图标排列不一样，需谨慎修改
* 无边框模式，图标依次紧跟标题
* 有边框模式，只有一个图标时，图标靠近边框右侧；有两个图标时，排序图标靠近标题，过滤图标靠近边框右侧
*/
.t-table__cell--sort-trigger {
text-align: center;
vertical-align: text-bottom;
}
.t-table__cell--sort-trigger svg {
vertical-align: initial;
}
.t-table--loading {
position: relative;
}
.t-table--loading-progressbar {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
height: 1px;
background-color: var(--td-brand-color);
animation: tTableProgressbar 2s ease-in-out;
animation-fill-mode: both;
}
.t-table--loading-message {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
color: var(--td-text-color-placeholder);
}
.t-table__expanded-cell {
padding-left: 45px;
}
.t-table__async-loading {
text-align: center;
}
.t-table__async-loading.t-is-load-more {
cursor: pointer;
}
.t-table__empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
color: var(--td-text-color-disabled);
}
.t-table__filter-icon,
.t-table__sort-icon {
align-items: center;
background-color: transparent;
display: inline-flex;
cursor: pointer;
vertical-align: text-bottom;
transition: 0.2s linear;
}
.t-table__filter-icon > svg,
.t-table__sort-icon > svg {
margin-top: 0;
}
.t-table__sort-icon .t-is-focus,
.t-table__sort-icon.t-is-focus,
.t-table__sort-icon:hover {
color: var(--td-brand-color);
border-radius: var(--td-radius-circle);
transition: 0.2s linear;
}
.t-table__filter-icon .t-is-focus,
.t-table__filter-icon.t-is-focus,
.t-table__filter-icon:hover {
color: var(--td-brand-color);
transition: 0.2s linear;
}
.t-table__filter-pop .t-popup__content {
padding: 0;
}
.t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-inner {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
}
.t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-inner .t-table__filter-popup-input {
margin-bottom: var(--td-comp-margin-s);
}
.t-table__filter-pop .t-table__filter-pop-content .t-radio-group {
display: block;
height: auto;
}
.t-table__filter-pop .t-table__filter-pop-content .t-checkbox-group {
display: block;
}
.t-table__filter-pop .t-table__filter-pop-content .t-checkbox,
.t-table__filter-pop .t-table__filter-pop-content .t-radio {
display: block;
margin: var(--td-comp-margin-xs) 0;
}
.t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-button {
border-top: 1px solid var(--td-component-border);
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
}
.t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-button .t-button + .t-button {
margin-left: var(--td-comp-margin-l);
}
.t-table__filter-pop .t-table__list-filter-input--sticky .t-table__filter-pop-content .t-table__filter-pop-content-inner {
padding: 0;
max-height: 280px;
overflow: auto;
position: relative;
}
.t-table__filter-pop .t-table__list-filter-input--sticky .t-table__filter-pop-content .t-table__filter-pop-content-inner .t-input__wrap {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) 0 var(--td-comp-paddingLR-l);
position: sticky;
top: 0;
z-index: 1;
background-color: var(--td-bg-color-container);
}
.t-table__filter-pop .t-table__list-filter-input--sticky .t-table__filter-pop-content .t-table__filter-pop-content-inner .t-radio-group {
padding: 0 var(--td-comp-paddingLR-l);
}
.t-table__filter-pop-content-inner > .t-input__wrap {
width: 200px;
}
.t-table__filter-pop-content-inner > .t-date-range-picker__panel {
margin: calc(0px - var(--td-comp-margin-l));
}
.t-table__sort-icon--active {
color: var(--td-brand-color);
transition: 0.2s linear;
}
.t-table__double-icons {
display: flex;
flex-direction: column;
justify-content: center;
}
.t-table__double-icons .t-table__sort-icon {
position: relative;
}
.t-table__double-icons .t-table-sort-asc {
top: var(--td-comp-margin-xxs);
}
.t-table__double-icons .t-table-sort-desc {
bottom: var(--td-comp-margin-xxs);
}
.t-table__filter-icon-wrap {
display: flex;
align-items: center;
pointer-events: all;
height: var(--td-font-size-body-large);
width: var(--td-font-size-body-large);
margin-left: var(--td-comp-margin-s);
}
.t-table--bordered .t-table__filter-icon-wrap {
justify-content: flex-end;
}
.t-table--bordered .t-table__cell--sortable.t-table__cell--filterable .t-table__filter-icon-wrap {
justify-content: space-between;
flex: 1;
}
.t-table .t-align-center .t-table__cell--sortable,
.t-table .t-align-center .t-table__cell--filterable {
display: flex;
justify-content: space-around;
}
.t-table__expand-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--td-text-color-placeholder);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s;
}
.t-table__expand-box:hover {
color: var(--td-brand-color);
transition: 0.2s linear;
}
@keyframes tTableProgressbar {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.t-table__th-row-select .t-table__th-cell-inner {
display: inline-flex;
align-items: center;
}
.t-table-expandable-icon-cell + .t-table__cell--selectable[key="row-select"] {
padding-left: var(--td-comp-margin-s);
}
.t-table__filter--bottom-buttons {
display: flex;
justify-content: flex-end;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
border-top: 1px solid var(--td-component-border);
}
.t-table__filter--bottom-buttons > .t-button + .t-button {
margin-left: var(--td-comp-margin-s);
}
.t-table__row-filter-inner {
position: sticky;
left: 0;
text-align: center;
}
.t-table__filter-result {
display: flex;
align-items: center;
justify-content: center;
}
.t-table__filter-result > .t-button {
margin-left: var(--td-comp-margin-s);
}
.t-table--layout-fixed {
table-layout: fixed;
}
.t-table--layout-auto {
table-layout: auto;
}
.t-table__ellipsis {
white-space: nowrap;
width: 100%;
}
.t-table__content {
overflow: auto;
}
.t-table__content--scrollable-to-left .t-table__cell--fixed-left-last::after {
border-right: 2px solid var(--td-component-border);
}
.t-table__content--scrollable-to-right .t-table__cell--fixed-right-first::after {
border-left: 2px solid var(--td-component-border);
}
.t-table--bordered.t-table__content--scrollable-to-left .t-table__cell--fixed-left-last::after {
border-right: 4px solid var(--td-component-border);
}
.t-table--bordered.t-table__content--scrollable-to-right .t-table__cell--fixed-right-first::after {
border-left: 4px solid var(--td-component-border);
}
.t-table__scroll-bar-divider {
position: absolute;
bottom: 0;
right: 0;
height: 100%;
border-right: 1px solid var(--td-component-border);
z-index: 71;
}
.t-table__footer,
.t-table__header.t-table__header--fixed {
position: sticky;
z-index: 50;
}
.t-table:not(.t-table--striped) .t-table__footer > tr {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-table__header--fixed:not(.t-table__header--multiple) > tr > th {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-table__row--fixed-top,
.t-table__row--fixed-bottom {
position: sticky;
z-index: 70;
}
.t-table__row--fixed-bottom-first > td {
border-top: 1px solid var(--td-component-border);
}
.t-table--bordered .t-table__content .t-table__row--without-border-bottom > td {
border-bottom: 0;
}
.t-table--bordered tbody > tr:last-child > td,
.t-table--bordered tfoot > tr:last-child > td {
border-bottom: 0;
}
.t-table--bordered tfoot > tr:first-child > td {
border-top: 1px solid var(--td-component-border);
}
.t-table__header.t-table__header--fixed {
top: 0;
}
.t-table__footer.t-table__footer--fixed {
bottom: 0;
}
.t-table--column-fixed .t-table__cell--fixed-left-last::before {
z-index: -1;
background-color: inherit;
}
.t-table--column-fixed .t-table__cell--fixed-left-last::after {
position: absolute;
top: 0;
bottom: 0;
content: "";
transition: box-shadow 0.3s;
pointer-events: none;
z-index: -2;
}
.t-table--column-fixed .t-table__cell--fixed-left-last::after {
right: 0;
transform: translateX(100%);
}
.t-table--column-fixed .t-table__cell--fixed-right-first::before {
z-index: -1;
background-color: inherit;
}
.t-table--column-fixed .t-table__cell--fixed-right-first::after {
position: absolute;
top: 0;
bottom: 0;
content: "";
transition: box-shadow 0.3s;
pointer-events: none;
z-index: -2;
}
.t-table--column-fixed .t-table__cell--fixed-right-first::after {
left: 0;
transform: translateX(-100%);
}
.t-table--column-fixed .t-table__cell--fixed-left,
.t-table--column-fixed .t-table__cell--fixed-right {
position: sticky;
}
.t-table--column-fixed .t-table__cell--fixed-left {
z-index: 30;
}
.t-table--column-fixed .t-table__cell--fixed-right {
z-index: 31;
}
.t-table__empty-row > td {
padding: 0;
border: 0;
}
.t-table:not(.t-table--bordered) .t-table__header.t-table--bordered > tr:first-child > th {
border-top: 1px solid var(--td-component-border);
}
.t-table--multiple-header .t-table__header th.t-table__header-th--bordered {
border-left-width: 1px;
}
.t-table__header.t-table__header--multiple > tr {
background-color: var(--td-bg-color-container);
}
.t-table__tree-op-icon {
margin-right: var(--td-comp-margin-s);
cursor: pointer;
display: inline-flex;
vertical-align: -3px;
}
.t-table__tree-op-icon:hover {
color: var(--td-brand-color);
transition: 0.2s linear;
}
.t-table__tree-leaf-node .t-table__tree-op-icon {
min-width: 0;
margin-right: var(--td-comp-margin-xxs);
}
.t-table__virtual-scroll-cursor {
position: absolute;
width: 1px;
height: 1px;
transition: transform 0.2s;
}
.t-table__virtual-scroll-header {
position: absolute;
z-index: 51;
left: 0;
}
/** 用于隐藏表头滚动条 */
.t-table__affixed-header-elm-wrap {
overflow: hidden;
}
.t-table__affixed-header-elm-wrap,
.t-table__affixed-header-elm {
position: absolute;
left: 0;
z-index: 51;
}
.t-table__affixed-header-elm {
overflow: auto;
transition: opacity 0.2s linear;
opacity: 1;
}
.t-table__affixed-footer-elm {
overflow: auto;
z-index: 50;
}
.t-table--bordered .t-table__affixed-header-elm {
border: 1px solid var(--td-component-border);
border-bottom: 0;
border-right: 0;
}
.t-table--bordered .t-table__affixed-footer-elm {
border-left: 1px solid var(--td-component-border);
border-bottom: 1px solid var(--td-component-border);
}
.t-table--multiple-header.t-table--bordered .t-table__affixed-header-elm {
border-right: 0;
}
.t-is-hidden {
display: none;
}
.t-positive-rotate-90 {
transform: rotate(90deg);
}
.t-negative-rotate-180 {
transform: rotate(180deg);
}
.t-table__expanded-row > td,
.t-table__row--full > td {
padding: 0;
}
/** @{prefix}-table__row--full 和 @{prefix}-table__row-full-element 同时存在，是为了保证 固定列时，当前行不随内容进行横向滚动 */
.t-table__row-full-element {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
}
.t-table__row-full-inner {
position: sticky;
left: 0;
}
.t-table__row-full-inner:not(.t-table__empty) {
display: inline-block;
}
.t-table__tree-col {
display: flex;
align-items: center;
}
.t-table__tree-col--inline {
display: inline;
}
.t-table--full-height {
height: 100%;
}
/** 默认最小高度限制为 Empty 高度加表头高度 */
.t-table--loading .t-table__content {
min-height: 168px;
}
.t-table__handle-draggable:hover,
.t-table--row-draggable tr,
.t-table__th--drag-sort {
cursor: move;
}
.t-table__ele--draggable-chosen {
box-shadow: var(--td-shadow-1);
}
.t-table:not(.t-table--row-edit) .t-table__cell--editable {
min-height: 22px;
line-height: var(--td-line-height-body-medium);
cursor: pointer;
}
.t-table:not(.t-table--row-edit) .t-table__cell--editable .t-icon {
margin-left: var(--td-comp-margin-s);
font-size: var(--td-font-size-body-large);
transition: 0.2s linear;
color: var(--td-text-color-placeholder);
}
.t-table:not(.t-table--row-edit) .t-table__cell--editable .t-icon:hover {
color: var(--td-brand-color);
}
.t-table:not(.t-table--row-edit) .t-table__cell--editable:hover {
transition: 0.2s linear;
}
/** 吸底的分页器，需要背景色，避免表格文本内容显示穿透 */
.t-affix .t-table__pagination {
background-color: var(--td-bg-color-container);
}
.t-table--bordered .t-affix .t-table__pagination {
border-top: 1px solid var(--td-component-border);
}
.t-table__bottom-content + .t-table__pagination-wrap .t-table__pagination {
border: 0;
padding: 0;
}
.t-table--column-resizable:not(.t-table--bordered) {
/** 表格左边有冻结列滚动时，去掉hover表头时多出的一个像素，避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */
}
.t-table--column-resizable:not(.t-table--bordered) th {
border-top: 1px solid transparent;
}
.t-table--column-resizable:not(.t-table--bordered) thead.t-table__header th:not(:last-child) {
border-right: 1px solid transparent;
}
.t-table--column-resizable:not(.t-table--bordered) thead.t-table__header:hover th:not(:last-child) {
border-right: 1px solid var(--td-component-border);
}
.t-table--column-resizable:not(.t-table--bordered) thead.t-table__header:hover th {
border-top: 1px solid var(--td-component-border);
}
.t-table--column-resizable:not(.t-table--bordered).t-table__content--scrollable-to-left.t-table__content--scrollable-to-right thead.t-table__header:hover .t-table__cell--fixed-left-last:not(:last-child),
.t-table--column-resizable:not(.t-table--bordered).t-table__content--scrollable-to-left thead.t-table__header:hover .t-table__cell--fixed-left-last:not(:last-child) {
border-right: 0;
}
/** 可选中行的场景下，将 Checkbox 和 Radio 铺满整个单元格，增大点击范围，方便用户选中 */
.t-table td.t-table__cell-check,
.t-table th.t-table__cell-check {
padding: 0;
/** HTML 特性: th/td 必须设置为 0，他们的子元素才能设置为 100% */
height: 0;
}
.t-table td.t-table__cell-check .t-radio__label:empty,
.t-table th.t-table__cell-check .t-radio__label:empty,
.t-table td.t-table__cell-check .t-checkbox__label:empty,
.t-table th.t-table__cell-check .t-checkbox__label:empty {
display: none;
}
.t-table .t-table__cell-check .t-radio,
.t-table .t-table__cell-check .t-checkbox,
.t-table .t-table__cell-check .t-table__th-cell-inner {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.t-table td .t-input__tips {
position: initial;
}
.t-table .t-table__sort-column {
background-color: var(--td-bg-color-secondarycontainer);
}
.t-table__ellipsis-content.t-size-s .t-popup__content {
font: var(--td-font-body-medium);
}
.t-timeline {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
.t-timeline-item {
min-height: 72px;
display: flex;
flex-direction: row;
position: relative;
}
.t-timeline-item__label.t-timeline-item__label--alternate {
position: absolute;
}
.t-timeline-item__wrapper {
width: 8px;
position: relative;
}
.t-timeline-item__wrapper .t-timeline-item__dot {
box-sizing: unset;
position: absolute;
width: 4px;
height: 4px;
border: 2px solid transparent;
border-radius: 50%;
top: 8px;
}
.t-timeline-item__wrapper .t-timeline-item__dot--primary {
border-color: var(--td-brand-color);
}
.t-timeline-item__wrapper .t-timeline-item__dot--default {
border-color: var(--td-component-border);
}
.t-timeline-item__wrapper .t-timeline-item__dot--success {
border-color: var(--td-success-color);
}
.t-timeline-item__wrapper .t-timeline-item__dot--warning {
border-color: var(--td-warning-color);
}
.t-timeline-item__wrapper .t-timeline-item__dot--error {
border-color: var(--td-error-color);
}
.t-timeline-item__wrapper .t-timeline-item__dot--custom {
position: relative;
left: 50%;
transform: translateX(-50%);
top: 4px;
border: 0;
}
.t-timeline-item__wrapper .t-timeline-item__dot--custom .t-timeline-item__dot-content {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.t-timeline-item__wrapper .t-timeline-item__tail {
position: absolute;
border-left: 2px solid transparent;
left: 50%;
height: calc(100% - (8px * 2 + 8px));
bottom: 0;
transform: translateX(-50%);
padding-bottom: var(--td-comp-size-s);
border-color: var(--td-component-border);
box-sizing: border-box;
}
.t-timeline-item__wrapper .t-timeline-item__tail--theme-dot {
border-style: dashed;
border-right: 0;
}
.t-timeline-item__label {
color: var(--td-text-color-secondary);
font-size: var(--td-font-size-body-medium);
}
.t-timeline-item__content {
flex: 1;
padding-left: var(--td-comp-margin-l);
font-size: var(--td-font-size-body-large);
}
.t-timeline-item--last .t-timeline-item__tail {
display: none;
}
.t-timeline-label.t-timeline-label--alternate.t-timeline-left .t-timeline-item__label {
text-align: right;
left: 0;
}
.t-timeline-label.t-timeline-label--alternate.t-timeline-left .t-timeline-item__wrapper {
margin-left: 100px;
}
.t-timeline-label.t-timeline-label--alternate.t-timeline-right .t-timeline-item__label {
text-align: left;
right: 0;
}
.t-timeline-label.t-timeline-label--alternate.t-timeline-right .t-timeline-item__wrapper {
margin-right: 100px;
}
.t-timeline-right .t-timeline-item {
flex-direction: row-reverse;
}
.t-timeline-right .t-timeline-item__content {
text-align: right;
padding-left: 0;
padding-right: var(--td-comp-margin-l);
}
.t-timeline-alternate .t-timeline-item-left {
margin-left: calc(50% - (8px / 2));
}
.t-timeline-alternate .t-timeline-item-right {
text-align: right;
flex-direction: row-reverse;
margin-right: calc(50% - (8px / 2));
}
.t-timeline-alternate .t-timeline-item-right .t-timeline-item__content {
padding-right: var(--td-comp-margin-l);
padding-left: 0;
}
.t-timeline-label.t-timeline-alternate .t-timeline-item__label {
width: 100%;
}
.t-timeline-label.t-timeline-alternate .t-timeline-item-left .t-timeline-item__label--alternate {
left: 0;
transform: translateX(-100%);
text-align: right;
padding-right: var(--td-comp-margin-l);
}
.t-timeline-label.t-timeline-alternate .t-timeline-item-right .t-timeline-item__label--alternate {
right: 0;
transform: translateX(100%);
text-align: left;
padding-left: var(--td-comp-margin-l);
}
.t-timeline-horizontal {
min-height: 200px;
flex-direction: row;
align-items: center;
}
.t-timeline-horizontal .t-timeline-item {
flex-direction: column;
padding-right: 8px;
min-width: 160px;
}
.t-timeline-horizontal .t-timeline-item__wrapper {
width: 100%;
height: 8px;
}
.t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__dot {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: unset;
width: 4px;
height: 4px;
border-radius: 50%;
}
.t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__dot--custom {
position: relative;
top: 50%;
transform: translateY(-50%);
border: 0;
}
.t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__dot--custom .t-timeline-item__dot-content {
position: absolute;
left: 0;
transform: translateY(-50%);
top: 50%;
}
.t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__tail {
left: calc(8px + var(--td-comp-margin-s));
top: 50%;
transform: translateY(-50%);
width: calc(100% - calc(8px + var(--td-comp-margin-s)));
border: 0;
border-top: 2px solid transparent;
padding-bottom: 0;
border-color: var(--td-component-border);
}
.t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__tail--theme-dot {
border-style: dashed;
border-right: 0;
}
.t-timeline-horizontal .t-timeline-item__content {
padding-left: unset;
padding-top: var(--td-comp-margin-l);
flex: unset;
}
.t-timeline-vertical .t-timeline-item__content {
padding-bottom: var(--td-comp-margin-l);
}
.t-timeline-label.t-timeline-horizontal.t-timeline-top .t-timeline-item__label--alternate {
top: 0;
width: 100%;
transform: translateY(-100%);
padding-bottom: 0;
}
.t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item {
flex-direction: column-reverse;
}
.t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item__wrapper {
padding-top: 0;
}
.t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item__label--alternate {
padding-top: var(--td-comp-margin-l);
bottom: 0;
width: 100%;
transform: translateY(100%);
}
.t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item__content {
padding-top: 0;
padding-bottom: var(--td-comp-margin-l);
}
.t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-top .t-timeline-item__label--alternate {
top: 0;
width: 100%;
transform: translateY(-100%);
padding-bottom: var(--td-comp-margin-l);
}
.t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-bottom {
flex-direction: column-reverse;
position: relative;
transform: translateY(calc(-100% + 8px));
}
.t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-bottom .t-timeline-item__content {
padding-bottom: var(--td-comp-margin-l);
padding-top: unset;
}
.t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-bottom .t-timeline-item__label--alternate {
bottom: 0;
transform: translateY(100%);
padding-top: var(--td-comp-margin-l);
}
.t-collapse {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border: solid 1px var(--td-component-border);
border-bottom: 0;
background: var(--td-bg-color-container);
}
.t-collapse.t--border-less {
border: none;
}
.t-collapse.t--border-less .t-collapse-panel__header {
border-bottom: none;
}
.t-collapse.t--border-less .t-collapse-panel__body {
background: var(--td-bg-color-container);
border: none;
}
.t-collapse-panel__icon {
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.t-collapse-panel__icon > .t-fake-arrow {
transform: rotate(-90deg);
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-collapse-panel__icon--left {
margin-right: var(--td-comp-margin-s);
}
.t-collapse-panel__icon--right {
margin-left: var(--td-comp-margin-s);
}
.t-collapse-panel__icon--active > .t-fake-arrow {
transform: rotate(0);
}
.t-collapse-panel__icon:hover {
background-color: var(--td-bg-color-container-hover);
border-radius: var(--td-radius-small);
}
.t-collapse-panel__wrapper {
overflow: hidden;
}
.t-collapse-panel__wrapper.t--borderless .t-collapse-panel__header {
border-bottom: none;
}
.t-collapse-panel__wrapper.t--borderless .t-collapse-panel__body {
background: var(--td-bg-color-container);
border: none;
}
.t-collapse-panel__wrapper .t-collapse-panel__header {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
border-bottom: solid 1px var(--td-component-border);
font: var(--td-font-title-small);
display: flex;
align-items: center;
}
.t-collapse-panel__wrapper .t-collapse-panel__header--blank {
flex: 1;
}
.t-collapse-panel__wrapper .t-collapse-panel__header.t-is-clickable {
cursor: pointer;
}
.t-collapse-panel__wrapper .t-collapse-panel__header-left,
.t-collapse-panel__wrapper .t-collapse-panel__header-right,
.t-collapse-panel__wrapper .t-collapse-panel__header-right-content {
display: flex;
}
.t-collapse-panel__wrapper .t-collapse-panel__body {
border-bottom: solid 1px var(--td-component-border);
background: var(--td-bg-color-secondarycontainer);
overflow: inherit;
}
.t-collapse-panel__wrapper .t-collapse-panel__body--collapsed {
border: none;
}
.t-collapse-panel__wrapper .t-collapse-panel__content {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-m) calc(var(--td-comp-paddingLR-l) + var(--td-comp-margin-xxl));
color: var(--td-text-color-secondary);
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__header {
cursor: not-allowed;
color: var(--td-text-color-disabled);
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__icon {
cursor: not-allowed;
pointer-events: none;
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__body {
background: var(--td-bg-color-component-disabled);
}
.t-collapse-panel.t-is-disabled .t-collapse-panel__content {
color: var(--td-text-color-disabled);
}
.t-rate {
display: flex;
align-items: center;
}
.t-rate .t-rate__star-top {
position: absolute;
width: 0;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-rate .t-rate__star-top,
.t-rate .t-rate__star-bottom {
display: grid;
}
.t-rate__list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.t-rate__item {
position: relative;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.t-rate__item:hover {
transform: scale(1.33);
}
.t-rate__item--half .t-rate__star-top {
width: 50%;
}
.t-rate__item--full .t-rate__star-top {
width: 100%;
}
.t-rate__text {
color: var(--td-text-color-primary);
font: var(--td-font-mark-medium);
margin-left: var(--td-comp-margin-l);
}
.t-typography {
color: var(--td-text-color-primary);
font: var(--td-font-body-medium);
margin: var(--td-comp-margin-m) 0;
}
h1.t-typography {
font: var(--td-font-headline-large);
margin-top: var(--td-comp-margin-xxxxl);
margin-bottom: var(--td-comp-margin-l);
}
h2.t-typography {
font: var(--td-font-headline-medium);
margin-top: var(--td-comp-margin-xxxl);
margin-bottom: var(--td-comp-margin-l);
}
h3.t-typography {
font: var(--td-font-headline-small);
margin-top: var(--td-comp-margin-xxl);
margin-bottom: var(--td-comp-margin-m);
}
h4.t-typography {
font: var(--td-font-title-large);
margin-top: var(--td-comp-margin-xl);
margin-bottom: var(--td-comp-margin-m);
}
h5.t-typography {
font: var(--td-font-title-medium);
margin-top: var(--td-comp-margin-l);
margin-bottom: var(--td-comp-margin-m);
}
h6.t-typography {
font: var(--td-font-title-small);
}
.t-typography strong {
font-weight: 600;
}
.t-typography mark {
background-color: #fcdf47;
}
.t-typography code {
border-radius: var(--td-radius-default);
border: 1px solid var(--td-component-border);
margin: 0 var(--td-comp-margin-xs);
background-color: var(--td-bg-color-secondarycontainer);
padding: 1px var(--td-comp-paddingLR-s);
transition: background-color 0.2s;
white-space: nowrap;
font: var(--td-font-body-small);
font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei;
display: inline-block;
}
.t-typography code:hover {
border-radius: var(--td-radius-default);
border: 1px solid var(--td-component-border);
background-color: var(--td-bg-color-secondarycontainer-hover);
}
.t-typography kbd {
border-radius: var(--td-radius-default);
border: 1px solid var(--td-component-border);
margin: 0 var(--td-comp-margin-xs);
background-color: var(--td-bg-color-secondarycontainer);
padding: 1px var(--td-comp-paddingLR-s);
box-shadow: 0 1px 0 0 var(--td-component-border);
font: var(--td-font-body-small);
font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei;
display: inline-block;
}
.t-typography--disabled {
color: var(--td-text-color-disabled);
cursor: not-allowed;
}
.t-typography--success {
color: var(--td-success-color);
}
.t-typography--warning {
color: var(--td-warning-color);
}
.t-typography--error {
color: var(--td-error-color);
}
.t-typography--secondary {
color: var(--td-text-color-secondary);
}
.t-typography-ellipsis-symbol,
.t-typography .t-icon-copy {
color: var(--td-brand-color);
cursor: pointer;
}
.t-typography-ellipsis-symbol:hover,
.t-typography .t-icon-copy:hover {
color: var(--td-brand-color-hover);
}
.t-typography .t-icon-checked {
color: var(--td-success-color);
}
.t-qrcode {
position: relative;
display: flex;
box-sizing: border-box;
background-color: var(--td-bg-color-container);
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
border-radius: var(--td-radius-medium);
border: 1px solid var(--td-component-border);
}
.t-qrcode > canvas {
align-self: stretch;
flex: auto;
min-width: 0;
}
.t-qrcode.t-borderless {
border-color: transparent;
}
.t-qrcode .t-mask {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
z-index: 300;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: var(--td-text-color-primary);
line-height: var(--td-line-height-body-medium);
background-color: var(--td-mask-background);
text-align: center;
border-radius: var(--td-radius-medium);
}
.t-qrcode .t-expired__text {
color: var(--td-text-color-primary);
font-weight: 600;
}
.t-qrcode .t-expired__button {
display: flex;
color: var(--td-brand-color);
box-shadow: none;
cursor: pointer;
column-gap: var(--td-comp-margin-s);
align-items: center;
height: var(--td-comp-size-m);
transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.t-qrcode .t-expired__button:hover {
color: var(--td-brand-color-hover);
}
.t-qrcode .t-scanned {
display: flex;
column-gap: var(--td-comp-margin-s);
align-items: center;
}
.t-qrcode .t-scanned__icon {
color: var(--td-success-color);
}
.t-qrcode-svg {
align-items: center;
justify-content: center;
}
/* Alert */
.t-alert {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: flex-start;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
opacity: 1;
transition: opacity 0.2s;
border-radius: var(--td-radius-medium);
}
.t-alert.t-is-hidden {
/* 隐藏 */
display: none;
}
.t-alert--closing {
opacity: 0;
}
.t-alert--info {
background-color: var(--td-brand-color-focus);
}
.t-alert--info .t-alert__icon {
color: var(--td-brand-color);
}
.t-alert--info .t-alert__swiper-trigger-wrap {
color: var(--td-brand-color);
}
.t-alert--info .t-alert__swiper-trigger--active {
color: var(--td-brand-color);
}
.t-alert--success {
background-color: var(--td-success-color-focus);
}
.t-alert--success .t-alert__icon {
color: var(--td-success-color);
}
.t-alert--success .t-alert__swiper-trigger-wrap {
color: var(--td-success-color-focus);
}
.t-alert--success .t-alert__swiper-trigger--active {
color: var(--td-success-color);
}
.t-alert--warning {
background-color: var(--td-warning-color-focus);
}
.t-alert--warning .t-alert__icon {
color: var(--td-warning-color);
}
.t-alert--warning .t-alert__swiper-trigger-wrap {
color: var(--td-warning-color-focus);
}
.t-alert--warning .t-alert__swiper-trigger--active {
color: var(--td-warning-color);
}
.t-alert--error {
background-color: var(--td-error-color-focus);
}
.t-alert--error .t-alert__icon {
color: var(--td-error-color);
}
.t-alert--error .t-alert__swiper-trigger-wrap {
color: var(--td-error-color-focus);
}
.t-alert--error .t-alert__swiper-trigger--active {
color: var(--td-error-color);
}
.t-alert__icon {
font-size: var(--td-line-height-body-medium);
display: inherit;
}
.t-alert__icon,
.t-alert__close {
flex: 0 0 auto;
line-height: var(--td-line-height-body-small);
}
.t-alert__content {
flex: 1 1 0;
font-size: var(--td-font-size-body-medium);
line-height: var(--td-line-height-body-medium);
overflow: hidden;
}
.t-alert__title,
.t-alert__message {
width: 100%;
display: flex;
}
.t-alert__title {
color: var(--td-text-color-primary);
font-weight: bold;
}
.t-alert__title + .t-alert__message {
margin-top: var(--td-comp-margin-s);
}
.t-alert__description {
color: var(--td-text-color-secondary);
flex: 0 1 auto;
transition: height 0.2s;
}
.t-alert__operation {
flex: 0 0 auto;
padding: 0 var(--td-comp-paddingLR-s);
color: var(--td-brand-color);
cursor: pointer;
transition: color 0.2s;
}
.t-alert__operation:hover {
color: var(--td-brand-color-hover);
}
.t-alert__operation:active {
color: var(--td-brand-color-active);
}
.t-alert__icon + .t-alert__content {
margin-left: var(--td-comp-margin-s);
}
.t-alert__collapse {
margin-top: var(--td-comp-margin-s);
color: var(--td-brand-color);
cursor: pointer;
}
.t-alert__close {
display: inline-flex;
align-items: center;
margin-left: var(--td-comp-margin-l);
color: var(--td-text-color-secondary);
cursor: pointer;
transition: color 0.2s;
}
.t-alert__close:hover {
color: var(--td-text-color-primary);
}
.t-alert__close > .t-icon {
font-size: calc(var(--td-line-height-body-medium) - 2px);
padding: calc((var(--td-line-height-body-medium) - calc(var(--td-line-height-body-medium) - 2px)) / 2) 0;
}
/**
* 颜色
*/
/**
* 尺寸
*/
/**
* 字体
*/
/**
* 动画
*/
/**
* 间距
*/
/**
* 位置
*/
/**
* 边框弧度
*/
.t-drawer-fade-enter,
.t-drawer-fade-appear {
opacity: 0;
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: linear;
animation-play-state: paused;
}
.t-drawer-fade-exit {
animation-duration: 0.2s;
animation-fill-mode: both;
animation-timing-function: linear;
animation-play-state: paused;
}
.t-drawer-fade-enter.t-drawer-fade-enter-active,
.t-drawer-fade-enter.t-drawer-fade-enter-active.t-drawer-fade-enter-to,
.t-drawer-fade-appear.t-drawer-fade-appear-active,
.t-drawer-fade-appear.t-drawer-fade-appear-active.t-drawer-fade-appear-to {
animation-name: tDrawerFadeIn;
animation-duration: 0.2s;
animation-play-state: running;
}
.t-drawer-fade-exit.t-drawer-fade-exit-active,
.t-drawer-fade-leave-active.t-drawer-fade-leave-to {
animation-name: tDrawerFadeOut;
animation-duration: 0.2s;
animation-play-state: running;
}
@keyframes tDrawerFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes tDrawerFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.t-drawer {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
position: fixed;
z-index: 1500;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
outline: none;
}
.t-drawer--lock {
overflow: hidden;
}
.t-drawer--attach {
position: absolute;
}
.t-drawer--left,
.t-drawer--right {
top: 0;
}
.t-drawer--left {
left: 0;
}
.t-drawer--right {
right: 0;
}
.t-drawer--top,
.t-drawer--bottom {
left: 0;
}
.t-drawer--top {
top: 0;
}
.t-drawer--bottom {
bottom: 0;
}
.t-drawer__mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--td-mask-active);
transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1);
opacity: 0;
}
.t-drawer__content-wrapper {
display: flex;
flex-direction: column;
background: var(--td-bg-color-container);
width: 16px;
height: 16px;
font-size: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
box-shadow: var(--td-shadow-2);
overflow: hidden;
pointer-events: auto;
transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1);
position: relative;
}
.t-drawer .t-drawer__content-wrapper {
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
}
.t-drawer .t-drawer__content-wrapper--left,
.t-drawer .t-drawer__content-wrapper--right {
top: 0;
}
.t-drawer .t-drawer__content-wrapper--left {
left: 0;
transform: translateX(-100%);
}
.t-drawer .t-drawer__content-wrapper--right {
right: 0;
transform: translateX(100%);
}
.t-drawer .t-drawer__content-wrapper--top,
.t-drawer .t-drawer__content-wrapper--bottom {
left: 0;
}
.t-drawer .t-drawer__content-wrapper--top {
top: 0;
transform: translateY(-100%);
}
.t-drawer .t-drawer__content-wrapper--bottom {
bottom: 0;
transform: translateY(100%);
}
.t-drawer__header {
display: flex;
align-items: center;
min-height: var(--td-comp-size-xxxl);
padding: 0 var(--td-comp-paddingLR-l);
font: var(--td-font-title-medium);
color: var(--td-text-color-primary);
border-bottom: 1px solid var(--td-border-level-1-color);
border-radius: var(--td-radius-small) var(--td-radius-small) 0 0;
box-sizing: border-box;
}
.t-drawer__body {
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
overflow: auto;
flex: 1;
}
.t-drawer__footer {
width: 100%;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
text-align: left;
border-top: 1px solid var(--td-border-level-1-color);
background-color: var(--td-bg-color-container);
box-sizing: border-box;
}
.t-drawer__footer .t-button {
margin-left: var(--td-comp-margin-s);
}
.t-drawer__footer .t-button:first-child {
margin-left: 0;
}
.t-drawer__close-btn {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: var(--td-comp-size-xs);
height: var(--td-comp-size-xs);
top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2);
right: var(--td-comp-margin-s);
color: var(--td-text-color-primary);
background-color: var(--td-bg-color-container);
border-radius: var(--td-radius-default);
cursor: pointer;
transition: background-color 0.2s;
}
.t-drawer__close-btn:hover {
background-color: var(--td-bg-color-container-hover);
}
.t-drawer__close-btn:active {
background-color: var(--td-bg-color-container-active);
}
.t-drawer__close-btn .t-icon {
font-size: calc(var(--td-font-size-body-medium) + 2px);
vertical-align: unset;
}
.t-drawer--open {
width: 100%;
height: 100%;
pointer-events: auto;
}
.t-drawer--open > .t-drawer__content-wrapper {
visibility: visible;
}
.t-drawer--open > .t-drawer__mask {
opacity: 1;
width: 100%;
height: 100%;
}
.t-drawer--without-mask {
pointer-events: none;
}
[tabindex="-1"]:focus {
outline: none !important;
/* stylelint-disable-line */
}
.t-guide {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-guide--lock {
overflow: hidden;
}
.t-guide--absolute {
position: absolute;
}
.t-guide--fixed {
position: fixed;
}
.t-guide__overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999997;
}
.t-guide__highlight {
z-index: 999998;
transition: 0.2s cubic-bezier(0, 0, 0.15, 1);
border-radius: var(--td-radius-default);
}
.t-guide__highlight--dialog {
border-radius: var(--td-radius-large);
}
.t-guide__highlight--mask {
box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px;
}
.t-guide__highlight--nomask {
border-radius: var(--td-radius-medium);
border: 2px solid var(--td-brand-color);
box-sizing: border-box;
}
.t-guide__reference {
z-index: 999999;
}
.t-guide__wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
z-index: 999999;
padding-top: 20vh;
}
.t-guide__wrapper--center {
padding-top: 0;
align-items: center;
}
.t-guide__dialog {
min-width: 320px;
max-width: 500px;
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
border-radius: var(--td-radius-large);
background: var(--td-bg-color-container);
animation: tGuideDialogFadeIn 0.3s ease-out;
box-sizing: border-box;
}
.t-guide__dialog--nomask {
border: 1px solid var(--td-component-border);
}
.t-guide__dialog .t-guide__title {
font: var(--td-font-title-medium);
font-weight: 700;
}
.t-guide__dialog .t-guide__desc {
margin-top: var(--td-comp-margin-l);
font: var(--td-font-body-medium);
}
.t-guide__tooltip {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s);
min-width: 240px;
max-width: 600px;
max-height: 300px;
}
.t-guide__title {
text-align: left;
color: var(--td-text-color-primary);
font: var(--td-font-title-small);
font-weight: 700;
}
.t-guide__desc {
margin-top: var(--td-comp-margin-s);
text-align: left;
color: var(--td-text-color-secondary);
font: var(--td-font-body-small);
}
.t-guide__action {
display: flex;
align-items: center;
}
.t-guide__action button {
margin-right: var(--td-comp-margin-s);
}
.t-guide__action button:last-child {
margin-right: 0;
}
.t-guide__footer {
display: flex;
align-items: center;
}
.t-guide__footer--popup {
margin-top: var(--td-comp-margin-l);
}
.t-guide__footer--dialog {
margin-top: 24px;
}
.t-guide__footer--dialog .t-guide__action {
display: flex;
justify-content: center;
}
.t-guide__counter {
color: var(--td-text-color-placeholder);
text-align: left;
font: var(--td-font-body-small);
flex: 1;
}
.t-guide__popup .t-guide__popup--content {
background: none;
box-shadow: none;
padding: 0;
}
@keyframes tGuideDialogFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.t-message {
margin: 0;
padding: 0;
list-style: none;
width: fit-content;
outline: 0;
border-radius: var(--td-radius-medium);
background-color: var(--td-bg-color-container);
box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
box-sizing: border-box;
display: flex;
align-items: center;
color: var(--td-text-color-primary);
font: var(--td-font-body-medium);
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
}
.t-message > .t-icon,
.t-message > [data-t-icon] > .t-icon,
.t-message .t-loading {
color: var(--td-brand-color);
margin-right: var(--td-comp-margin-s);
flex-shrink: 0;
font-size: calc(var(--td-font-size-body-medium) + 6px);
}
.t-message.t-is-success > .t-icon,
.t-message.t-is-success > [data-t-icon] > .t-icon,
.t-message.t-is-success .t-loading {
color: var(--td-success-color);
}
.t-message.t-is-warning > .t-icon,
.t-message.t-is-warning > [data-t-icon] > .t-icon,
.t-message.t-is-warning .t-loading {
color: var(--td-warning-color);
}
.t-message.t-is-error > .t-icon,
.t-message.t-is-error > [data-t-icon] > .t-icon,
.t-message.t-is-error .t-loading {
color: var(--td-error-color);
}
.t-message.t-is-closable .t-message__close {
display: inline-flex;
margin-right: 0;
margin-left: var(--td-comp-margin-xxl);
cursor: pointer;
color: var(--td-text-color-secondary);
}
.t-message.t-is-closable .t-message__close .t-icon-close {
font-size: calc(var(--td-font-size-body-medium) + 2px);
border-radius: var(--td-radius-default);
transition: all 0.2s linear;
}
.t-message.t-is-closable .t-message__close .t-icon-close:hover {
background: var(--td-bg-color-container-hover);
}
.t-message.t-is-closable .t-message__close .t-icon-close:active {
background: var(--td-bg-color-container-active);
}
.t-message__list {
position: fixed;
z-index: 6000;
pointer-events: none;
}
.t-message__list .t-message {
margin-bottom: var(--td-comp-margin-s);
word-break: break-all;
pointer-events: auto;
}
.t-notification {
color: var(--td-text-color-primary);
margin: 0;
padding: 0;
list-style: none;
font: var(--td-font-body-medium);
outline: 0;
border: 0;
background-color: var(--td-bg-color-container);
display: flex;
box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
box-sizing: border-box;
border-radius: var(--td-radius-medium);
width: 360px;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
}
.t-notification__icon {
width: calc(var(--td-font-size-body-large) + 8px);
text-align: center;
margin-right: var(--td-comp-margin-s);
}
.t-notification__icon .t-icon {
font-size: calc(var(--td-font-size-body-large) + 8px);
}
.t-notification .t-icon.t-is-info {
color: var(--td-brand-color);
}
.t-notification .t-icon.t-is-success {
color: var(--td-success-color);
}
.t-notification .t-icon.t-is-warning {
color: var(--td-warning-color);
}
.t-notification .t-icon.t-is-error {
color: var(--td-error-color-6);
}
.t-notification__main {
flex: 1;
}
.t-notification__title__wrap {
display: flex;
justify-content: space-between;
}
.t-notification__title {
font: var(--td-font-title-medium);
color: var(--td-text-color-primary);
}
.t-notification .t-icon-close {
cursor: pointer;
font-size: var(--td-font-size-body-large);
border-radius: var(--td-radius-default);
color: var(--td-text-color-secondary);
}
.t-notification .t-icon-close:hover {
background: var(--td-bg-color-container-hover);
}
.t-notification .t-icon-close:active {
background: var(--td-bg-color-container-active);
}
.t-notification__content {
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
margin-top: var(--td-comp-margin-s);
max-height: 66px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
/* stylelint-disable-next-line */
display: -webkit-box;
-webkit-line-clamp: 3;
/* stylelint-disable-next-line */
-webkit-box-orient: vertical;
}
.t-notification__detail {
margin-top: var(--td-comp-margin-l);
text-align: right;
font: var(--td-font-body-medium);
}
.t-notification__detail-item {
cursor: pointer;
}
.t-notification__detail-item:hover {
color: inherit;
background: var(--td-bg-color-container-hover);
}
.t-notification__detail-item:active {
color: inherit;
background: var(--td-bg-color-container-active);
}
.t-notification__detail-item + .t-notification__detail-item {
margin-left: var(--td-comp-margin-s);
}
.t-notification__detail-item.t-is-active {
color: var(--td-brand-color);
}
.t-notification__show--top-left {
position: fixed;
top: 0;
left: 0;
}
.t-notification__show--top-left > .t-notification {
animation-duration: 0.3s;
animation-name: slidein-top-left;
}
@keyframes slidein-top-left {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.t-notification__show--top-right {
position: fixed;
top: 0;
right: 0;
}
.t-notification__show--top-right > .t-notification {
animation-duration: 0.3s;
animation-name: slidein-top-right;
}
@keyframes slidein-top-right {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.t-notification__show--bottom-left {
position: fixed;
bottom: 0;
left: 0;
display: flex;
flex-direction: column-reverse;
}
.t-notification__show--bottom-left > .t-notification {
animation-duration: 0.3s;
animation-name: slidein-bottom-left;
}
@keyframes slidein-bottom-left {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.t-notification__show--bottom-right {
position: fixed;
bottom: 0;
right: 0;
display: flex;
flex-direction: column-reverse;
}
.t-notification__show--bottom-right > .t-notification {
animation-duration: 0.3s;
animation-name: slidein-bottom-right;
}
@keyframes slidein-bottom-right {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.t-notification-list__show {
position: fixed;
}
.t-popconfirm {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
min-width: 160px;
border-radius: var(--td-radius-medium);
}
.t-popconfirm .t-popup__content {
padding: 0;
}
.t-popconfirm.t-popup[data-popper-placement^="top"] .t-popup__arrow {
bottom: calc(-8px / 2);
}
.t-popconfirm__content {
position: relative;
padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
border-radius: var(--td-radius-medium);
}
.t-popconfirm__body {
display: flex;
align-items: flex-start;
text-align: left;
}
.t-popconfirm__body > .t-icon {
display: inline-block;
margin-right: var(--td-comp-margin-s);
padding: calc(calc(var(--td-line-height-body-medium) - calc(var(--td-font-size-body-medium) + 6px)) / 2) 0;
font-size: calc(var(--td-font-size-body-medium) + 6px);
}
.t-popconfirm__confirm {
margin-left: var(--td-comp-margin-s);
}
.t-popconfirm__inner {
display: inline-block;
vertical-align: top;
max-width: 320px;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
}
.t-popconfirm__icon--warning {
color: var(--td-warning-color);
}
.t-popconfirm__icon--danger {
color: var(--td-error-color);
}
.t-popconfirm__icon--default {
color: var(--td-brand-color);
}
.t-popconfirm__buttons {
text-align: right;
margin-top: var(--td-comp-margin-l);
}
.t-popconfirm__buttons > span:last-child {
margin-right: 0;
}
.t-upload {
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
.t-upload .t-is-bordered {
border: 1px solid var(--td-component-border);
}
.t-upload .t-upload__trigger {
display: inline-block;
}
.t-upload .t-icon {
font-size: calc(var(--td-font-size-body-medium) + 2px);
flex-shrink: 0;
}
.t-upload .t-icon-check-circle-filled {
color: var(--td-success-color);
}
.t-upload .t-icon-error-circle-filled {
color: var(--td-error-color);
}
.t-upload .t-icon-time-filled {
color: var(--td-text-color-placeholder);
}
.t-upload .t-icon-add {
color: var(--td-text-color-primary);
}
.t-upload__list-file {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
margin-right: var(--td-comp-margin-m);
overflow: hidden;
}
.t-upload__list-file .t-icon {
font-size: var(--td-comp-size-xl);
color: var(--td-brand-color);
}
.t-upload__list-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--td-comp-margin-m);
width: 496px;
height: 124px;
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
border: 1px solid var(--td-component-border);
border-radius: var(--td-radius-default);
font: var(--td-font-body-medium);
}
.t-upload__list-item.t-is--error .t-upload__list-name {
color: var(--td-error-color);
}
.t-upload__list-item.t-is--error .t-upload__list-file .t-icon {
color: var(--td-error-color);
}
.t-upload__list-content {
display: flex;
align-items: center;
}
.t-upload-list__control {
cursor: pointer;
}
.t-upload-list__control:hover {
color: var(--td-error-color);
}
.t-upload__list-img {
object-fit: cover;
max-width: 100%;
max-height: 100%;
cursor: pointer;
}
.t-upload__list-name {
max-width: 200px;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-upload--highlight {
color: var(--td-text-color-brand);
}
.t-upload__single-name {
margin-right: var(--td-comp-margin-s);
}
.t-upload__card {
font: var(--td-font-body-small);
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--td-comp-margin-s);
}
.t-upload__card .t-is-disabled :hover {
cursor: not-allowed;
}
.t-upload__card-item {
cursor: pointer;
box-sizing: border-box;
list-style: none;
}
.t-upload__card-item::after {
content: "";
display: block;
}
.t-upload__card-item:hover .t-upload__card-mask {
opacity: 1;
transition: opacity 0.2s linear;
}
.t-upload__card-item.t-is--error .t-icon-warning_fill {
color: var(--td-error-color);
margin-bottom: var(--td-comp-margin-s);
}
.t-upload__card-item.t-is--error .t-upload__card-status {
color: var(--td-error-color);
}
.t-upload__card-item.t-is-background {
transition: border-color 0.2s linear;
}
.t-upload__card .t-icon-loading {
margin-bottom: var(--td-comp-margin-s);
}
.t-upload__card-name {
max-width: 100%;
margin-top: var(--td-comp-margin-s);
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-upload__card-content {
position: relative;
width: 110px;
height: 110px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: var(--td-bg-color-secondarycontainer);
border: 1px dashed var(--td-component-border);
padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
border-radius: var(--td-radius-default);
}
.t-upload__card-container {
width: 110px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: var(--td-bg-color-secondarycontainer);
border: 1px dashed var(--td-component-border);
box-sizing: border-box;
position: relative;
border-radius: var(--td-radius-default);
transition: border 0.2s linear;
}
.t-upload__card-container:hover:not(.t-is-disabled) {
border-color: var(--td-brand-color);
transition: border-color 0.2s linear;
}
.t-upload__card-container > .t-icon {
color: var(--td-text-color-placeholder);
}
.t-upload__card-container > .t-icon,
.t-upload__card-container .t-loading {
font-size: var(--td-comp-size-xs);
margin-bottom: var(--td-comp-margin-s);
}
.t-upload__card-container > p,
.t-upload__card-container .t-upload__add-text {
color: var(--td-text-color-placeholder);
margin: 0;
}
.t-upload__card-status-wrap {
text-align: center;
}
.t-upload__card-status-wrap > svg {
margin-bottom: var(--td-comp-margin-s);
}
.t-upload__card-status-wrap .t-icon,
.t-upload__card-status-wrap .t-loading {
font-size: var(--td-comp-size-xs);
}
.t-upload__card-image {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
.t-upload__card-status {
color: var(--td-text-color-disabled);
font: var(--td-font-body-small);
}
.t-upload__card-mask {
background-color: var(--td-mask-active);
color: var(--td-text-color-anti);
will-change: transform;
opacity: 0;
z-index: 2;
transition: opacity 0.2s linear;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.t-upload__card-mask-item-divider {
margin: 0 var(--td-comp-margin-l);
border-left: 1px var(--td-text-color-anti) solid;
height: var(--td-comp-size-xxxs);
}
.t-upload__card-mask-item > .t-icon {
cursor: pointer;
font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.t-upload__dialog .t-dialog {
max-width: 80%;
}
.t-upload__dialog .t-dialog--default {
padding: 32px;
}
.t-upload__dialog .t-dialog-body {
padding-bottom: 0;
}
.t-upload__dialog .t-dialog-body-img-box img {
display: block;
max-width: 100%;
max-height: 100%;
}
.t-upload__dragger {
display: flex;
width: 336px;
height: 144px;
border: 1px dashed var(--td-component-border);
border-radius: var(--td-radius-small);
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
cursor: pointer;
padding: var(--td-comp-margin-l);
position: relative;
overflow: auto;
box-sizing: border-box;
transition: border-color 0.2s linear;
}
.t-upload__dragger.t-is--active {
background-color: var(--td-bg-color-container-active);
border-color: var(--td-brand-color);
}
.t-upload__dragger:hover {
border-color: var(--td-brand-color);
}
.t-upload__dragger-btns {
position: absolute;
bottom: var(--td-comp-margin-l);
}
.t-upload__dragger .t-size-s {
display: block;
}
.t-upload__dragger-center {
justify-content: center;
align-items: center;
}
.t-upload__dragger-error {
border-color: var(--td-error-color);
}
.t-upload__dragger-error:hover {
border-color: var(--td-error-color);
}
.t-upload__dragger-text {
display: flex;
align-items: center;
font: var(--td-font-body-medium);
color: var(--td-text-color-primary);
margin-bottom: var(--td-comp-margin-s);
max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0);
}
.t-upload__dragger-text .t-upload__single-name {
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-upload__tips {
display: block;
color: var(--td-text-color-placeholder);
margin-top: var(--td-comp-margin-s);
font: var(--td-font-body-small);
}
.t-upload__tips.t-upload__tips-error {
color: var(--td-error-color);
}
.t-upload__tips.t-upload__tips-warn {
color: var(--td-warning-color);
}
.t-upload__placeholder {
color: var(--td-text-color-placeholder);
}
.t-upload__display-text--margin {
margin-top: var(--td-comp-margin-s);
}
.t-upload__single-display-text {
color: var(--td-text-color-secondary);
font: var(--td-font-body-small);
display: flex;
align-items: center;
}
.t-upload__single-display-text .t-upload__flow-status .t-icon {
font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.t-icon-clear-circle-filled {
color: var(--td-text-color-placeholder);
margin-top: var(--td-comp-margin-xxs);
transition: color 0.2s linear;
}
.t-icon-clear-circle-filled:hover {
color: var(--td-text-color-secondary);
cursor: pointer;
transition: color 0.2s linear;
}
.t-upload__single-percent {
margin-left: var(--td-comp-margin-xs);
}
.t-upload__single-progress {
color: var(--td-brand-color);
display: flex;
align-items: center;
}
.t-upload__single-progress .t-loading {
font-size: calc(var(--td-font-size-body-medium) + 2px);
flex-shrink: 0;
}
.t-upload__single-input-delete {
margin-left: var(--td-comp-margin-l);
font: var(--td-font-body-medium);
color: var(--td-brand-color);
cursor: pointer;
}
.t-upload__single-input-preview {
display: flex;
justify-content: space-between;
flex: 1;
}
.t-upload__single-input-text {
display: block;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.t-upload__single-file-input {
display: flex;
align-items: center;
}
.t-upload__single-file-input .t-upload__trigger {
margin-left: var(--td-comp-margin-l);
}
.t-upload__single-file-input .t-upload__single-progress {
white-space: nowrap;
}
.t-upload__single-file-input .t-input__inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.t-upload__dragger-progress {
width: 100%;
display: flex;
}
.t-upload__dragger-progress .t-icon,
.t-upload__dragger-progress .t-loading {
font-size: calc(var(--td-font-size-body-medium) + 2px);
flex-shrink: 0;
}
.t-upload__dragger-img-wrap {
width: 110px;
height: 110px;
background-color: var(--td-bg-color-secondarycontainer);
border-radius: var(--td-radius-default);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.t-upload__dragger-img-wrap > .t-image__wrapper--shape-square {
width: 100%;
}
.t-upload__dragger-img-wrap > .t-image__wrapper--shape-square .t-space-item {
text-align: center;
}
.t-upload__dragger-img-wrap > img {
max-width: 100%;
max-height: 100%;
}
.t-upload__dragger-img-wrap + .t-upload__dragger-progress-info {
margin-left: var(--td-comp-margin-l);
max-width: calc(336px - var(--td-comp-margin-l) * 2 - calc(110px + var(--td-comp-margin-l)));
}
.t-upload__dragger-progress-info {
flex: 1;
}
.t-upload__dragger-progress-info .t-upload__single-display-text {
margin-bottom: var(--td-comp-margin-s);
}
.t-upload__dragger-progress-info .t-button:hover {
background-color: transparent;
}
.t-upload__dragger-progress-cancel,
.t-upload__dragger-progress-reupload {
margin-right: var(--td-comp-margin-l);
}
.t-upload__dragger-progress-cancel:hover,
.t-upload__dragger-progress-reupload:hover {
border-color: transparent;
}
.t-upload__dragger-delete-btn:hover,
.t-upload__dragger-upload-btn:hover {
border-color: transparent;
}
.t-upload__flow-image-flow {
width: 498px;
}
.t-upload__flow {
min-width: 498px;
max-width: 960px;
}
.t-upload__flow-placeholder {
display: inline-block;
margin-left: var(--td-comp-margin-l);
}
.t-upload__flow-op {
display: flex;
align-items: center;
}
.t-upload__flow-bottom {
display: flex;
justify-content: flex-end;
margin-top: var(--td-comp-margin-xxl);
}
.t-upload__flow-bottom .t-button + .t-button {
margin-left: var(--td-comp-margin-s);
}
.t-upload__flow-empty {
width: 100%;
height: 184px;
display: flex;
justify-content: center;
align-items: center;
color: var(--td-text-color-placeholder);
}
.t-upload__flow-table {
width: 100%;
border: 1px dashed var(--td-component-border);
margin-top: var(--td-comp-margin-xxl);
border-collapse: collapse;
}
.t-upload__flow-table > thead > tr,
.t-upload__flow-table > tbody > tr,
.t-upload__flow-table > tfoot > tr,
.t-upload__flow-table > tr {
border-top: 1px solid var(--td-component-border);
}
.t-upload__flow-table > thead > tr > th,
.t-upload__flow-table > tbody > tr > th,
.t-upload__flow-table > tfoot > tr > th,
.t-upload__flow-table > tr > th {
color: var(--td-text-color-placeholder);
font-weight: normal;
border: 1px solid var(--td-component-border);
text-align: left;
background-color: var(--td-bg-color-container);
}
.t-upload__flow-table > thead > tr > td,
.t-upload__flow-table > tbody > tr > td,
.t-upload__flow-table > tfoot > tr > td,
.t-upload__flow-table > tr > td {
color: var(--td-text-color-primary);
}
.t-upload__flow-table > thead > tr > td,
.t-upload__flow-table > tbody > tr > td,
.t-upload__flow-table > tfoot > tr > td,
.t-upload__flow-table > tr > td,
.t-upload__flow-table > thead > tr > th,
.t-upload__flow-table > tbody > tr > th,
.t-upload__flow-table > tfoot > tr > th,
.t-upload__flow-table > tr > th {
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
}
.t-upload__flow-table__batch-row {
border-left: 1px solid var(--td-component-border);
}
.t-upload__flow-button {
color: var(--td-text-color-placeholder);
cursor: pointer;
transition: color 0.2s linear;
}
.t-upload__flow-button:hover {
color: var(--td-text-color-secondary);
}
.t-upload__flow-status {
display: flex;
align-items: center;
}
.t-upload__flow-status .t-icon,
.t-upload__flow-status .t-loading {
margin-right: var(--td-comp-margin-s);
font-size: calc(var(--td-font-size-body-medium) + 2px);
}
.t-upload__flow-card-area {
border: 1px dashed var(--td-component-border);
padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m);
margin-top: var(--td-comp-margin-xxl);
transition: border 0.2s linear;
}
.t-upload__flow-card-area:hover {
border-color: var(--td-brand-color);
transition: border-color 0.2s linear;
}
.t-upload__icon-delete,
.t-upload__single-input-clear {
color: var(--td-text-color-placeholder);
cursor: pointer;
transition: color 0.2s linear;
}
.t-upload__icon-delete:hover,
.t-upload__single-input-clear:hover {
color: var(--td-text-color-secondary);
transition: color 0.2s linear;
}
.t-icon.t-upload__single-input-clear {
display: none;
}
.t-upload__single-input-preview:hover .t-upload__single-input-clear {
display: initial;
}
.t-upload__single-input-preview:hover .t-upload__status-icon {
display: none;
}
.t-upload .t-upload__single-name {
color: var(--td-text-color-secondary);
}
.t-upload .t-upload__file-thumbnail {
margin-right: var(--td-comp-paddingLR-s);
width: var(--td-comp-size-xxl);
height: var(--td-comp-size-xxl);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.t-upload .t-upload__file-thumbnail > svg {
font-size: var(--td-comp-size-s);
color: var(--td-text-color-placeholder);
}
.t-upload__card-name {
margin-top: 8px;
}
.t-upload--theme-file-input {
width: 100%;
}
.t-upload__dragger-btns > .t-button {
padding: 0;
}
.t-upload__file-info {
display: flex;
align-items: center;
}
.t-upload__card-container.t-is-disabled {
cursor: not-allowed;
}
.t-upload__card-container.t-is-disabled .t-upload__add-text {
color: var(--td-text-color-disabled);
}
.t-upload__card-container.t-is-disabled .t-icon {
color: var(--td-text-color-disabled);
}
/*# sourceMappingURL=tdesign.css.map */