html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
}
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
body {
background-color: rgba(255, 255, 255, 1);
background-color: var(--ui-page-flat-1);
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
margin: 0;
border: 0;
}
button {
background-color: transparent;
background-image: none;
border: none;
}
button:focus {
outline: none;
}
button,
[role='button'] {
cursor: pointer;
}
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* This file is automatically generated, do not modify directly. */
:root,
[data-tux-color-scheme='system'] {
--brand-ai-1: rgba(132, 112, 255, 1);
--brand-oscar-gold: rgba(186, 158, 94, 1);
--brand-tako-1: rgba(0, 181, 238, 1);
--brand-tako-2: rgba(0, 0, 0, 1);
--brand-tiktok-plus-1: rgba(178, 132, 43, 1);
--brand-tiktok-background: rgba(255, 255, 255, 1);
--brand-tiktok-background-element: rgba(0, 0, 0, 1);
--brand-tiktok-black: rgba(0, 0, 0, 1);
--brand-tiktok-razzmatazz: rgba(254, 44, 85, 1);
--brand-tiktok-splash: rgba(37, 244, 238, 1);
--brand-tiktok-spotlight: rgba(0, 0, 0, 1);
--brand-tiktok-subject-in-spotlight: rgba(255, 255, 255, 1);
--brand-tiktok-white: rgba(255, 255, 255, 1);
--brand-tiktokphotos-1: rgba(100, 250, 205, 1);
--brand-tiktokphotos-2: rgba(0, 170, 150, 1);
--brand-tokopedia-1: rgba(0, 170, 91, 1);
--creation-adjust-background: rgba(255, 178, 215, 1);
--creation-adjust-hsl-blue: rgba(50, 152, 246, 1);
--creation-adjust-hsl-cyan: rgba(53, 225, 225, 1);
--creation-adjust-hsl-fuchsia: rgba(201, 46, 255, 1);
--creation-adjust-hsl-green: rgba(120, 194, 94, 1);
--creation-adjust-hsl-indigo: rgba(88, 86, 214, 1);
--creation-adjust-hsl-orange: rgba(255, 147, 61, 1);
--creation-adjust-hsl-red: rgba(255, 82, 82, 1);
--creation-adjust-hsl-yellow: rgba(242, 205, 70, 1);
--creation-adjust-label: rgba(142, 31, 84, 1);
--creation-filter-background: rgba(255, 191, 191, 1);
--creation-filter-label: rgba(139, 35, 41, 1);
--creation-flash-light-cold: rgba(211, 234, 255, 1);
--creation-flash-light-warm: rgba(255, 242, 205, 1);
--creation-glance-watermark: rgba(255, 248, 90, 1);
--creation-pill-overlay: rgba(230, 230, 230, 0.28);
--ec-black-text-1: rgba(0, 0, 0, 1);
--ec-black-text-2: rgba(0, 0, 0, 0.65);
--ec-black-text-3: rgba(0, 0, 0, 0.48);
--ec-cyan-banner: rgba(240, 251, 251, 1);
--ec-cyan-border: rgba(0, 140, 141, 0.14);
--ec-cyan-main: rgba(0, 184, 185, 1);
--ec-cyan-tag: rgba(0, 184, 185, 0.12);
--ec-cyan-text: rgba(8, 146, 146, 1);
--ec-cyan-text-on-tag: rgba(8, 146, 146, 1);
--ec-primary-banner: rgba(255, 242, 245, 1);
--ec-primary-border: rgba(225, 5, 67, 0.1);
--ec-primary-tag: rgba(254, 44, 85, 0.12);
--ec-primary-text-on-tag: rgba(225, 5, 67, 1);
--ec-white-text-1: rgba(246, 246, 246, 1);
--ec-white-text-2: rgba(255, 255, 255, 0.88);
--ec-white-text-3: rgba(255, 255, 255, 0.6);
--feed-anchor-bg: rgba(37, 37, 37, 0.34);
--feed-top-tab-text-shadow-a30: rgba(0, 0, 0, 0.3);
--feed-top-tab-text-shadow-a40: rgba(0, 0, 0, 0.4);
--feed-top-tab-text-shadow-a50: rgba(0, 0, 0, 0.5);
--feed-top-tab-text-shadow-a66: rgba(0, 0, 0, 0.66);
--feed-top-tab-text-shadow-a83: rgba(0, 0, 0, 0.83);
--localservice-poi: rgba(19, 189, 144, 1);
--localservice-poi-background: rgba(19, 189, 144, 0.12);
--misc-online-shape: rgba(29, 215, 101, 1);
--misc-online-text: rgba(0, 165, 69, 1);
--misc-rating-star-selected-fill: rgba(250, 206, 21, 1);
--misc-verified-badge-1: rgba(32, 213, 236, 1);
--misc-verified-badge-2: rgba(255, 255, 255, 1);
--profile-icon-background-dark-gray: rgba(124, 124, 124, 0.9);
--social-chat-gradient-blue-1: rgba(0, 184, 211, 1);
--social-chat-gradient-blue-2: rgba(0, 173, 210, 1);
--social-chat-gradient-blue-3: rgba(23, 135, 217, 1);
--social-snail-1: rgba(124, 92, 253, 1);
--social-story-gradient-green-1: rgba(11, 171, 249, 1);
--social-story-gradient-green-2: rgba(32, 214, 235, 1);
--social-story-gradient-green-3: rgba(10, 243, 185, 1);
--social-story-gradient-purple-1: rgba(95, 124, 255, 1);
--social-story-gradient-purple-2: rgba(115, 102, 254, 1);
--social-story-gradient-purple-3: rgba(131, 90, 247, 1);
--social-story-shape-purple: rgba(124, 92, 253, 0.66);
--social-text-streak: rgba(255, 102, 19, 1);
--ui-image-overlay-black: rgba(0, 0, 0, 1);
--ui-image-overlay-black-a15: rgba(0, 0, 0, 0.15);
--ui-image-overlay-black-a25: rgba(0, 0, 0, 0.25);
--ui-image-overlay-black-a50: rgba(0, 0, 0, 0.5);
--ui-image-overlay-black-a80: rgba(0, 0, 0, 0.8);
--ui-image-overlay-dark-gray-a30: rgba(51, 51, 51, 0.3);
--ui-image-overlay-dark-gray-a60: rgba(51, 51, 51, 0.6);
--ui-image-overlay-dark-gray-a85: rgba(51, 51, 51, 0.85);
--ui-image-overlay-white: rgba(255, 255, 255, 1);
--ui-image-overlay-white-a20: rgba(255, 255, 255, 0.2);
--ui-image-overlay-white-a40: rgba(255, 255, 255, 0.4);
--ui-image-overlay-white-a75: rgba(255, 255, 255, 0.75);
--ui-page-flat-1: rgba(255, 255, 255, 1);
--ui-page-flat-2: rgba(248, 248, 248, 1);
--ui-page-flat-3: rgba(255, 255, 255, 1);
--ui-page-grouped-1: rgba(245, 245, 245, 1);
--ui-page-grouped-2: rgba(255, 255, 255, 1);
--ui-page-grouped-3: rgba(248, 248, 248, 1);
--ui-shape-danger: rgba(255, 76, 58, 1);
--ui-shape-danger-2: rgba(255, 76, 58, 0.32);
--ui-shape-danger-3: rgba(255, 76, 58, 0.21);
--ui-shape-danger-4: rgba(255, 76, 58, 0.09);
--ui-shape-info: rgba(0, 117, 220, 1);
--ui-shape-info-2: rgba(0, 117, 220, 0.3);
--ui-shape-info-3: rgba(0, 117, 220, 0.19);
--ui-shape-info-4: rgba(0, 117, 220, 0.1);
--ui-shape-neutral: rgba(0, 0, 0, 1);
--ui-shape-neutral-2: rgba(0, 0, 0, 0.17);
--ui-shape-neutral-3: rgba(0, 0, 0, 0.12);
--ui-shape-neutral-4: rgba(0, 0, 0, 0.05);
--ui-shape-primary: rgba(254, 44, 85, 1);
--ui-shape-primary-2: rgba(254, 44, 85, 0.31);
--ui-shape-primary-3: rgba(254, 44, 85, 0.18);
--ui-shape-primary-4: rgba(254, 44, 85, 0.07);
--ui-shape-secondary: rgba(32, 213, 236, 1);
--ui-shape-secondary-2: rgba(32, 213, 236, 0.5);
--ui-shape-secondary-3: rgba(32, 213, 236, 0.32);
--ui-shape-secondary-4: rgba(32, 213, 236, 0.13);
--ui-shape-secondary-5: rgba(32, 213, 236, 0.05);
--ui-shape-secondary-muted: rgba(0, 162, 201, 1);
--ui-shape-secondary-muted-2: rgba(0, 162, 201, 0.33);
--ui-shape-secondary-muted-3: rgba(0, 162, 201, 0.24);
--ui-shape-secondary-muted-4: rgba(0, 162, 201, 0.12);
--ui-shape-success: rgba(11, 224, 155, 1);
--ui-shape-success-2: rgba(11, 224, 155, 0.48);
--ui-shape-success-3: rgba(11, 224, 155, 0.28);
--ui-shape-success-4: rgba(11, 224, 155, 0.12);
--ui-shape-text-1-on-danger: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-info: rgba(231, 244, 255, 1);
--ui-shape-text-1-on-neutral: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-primary: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-secondary: rgba(0, 52, 60, 1);
--ui-shape-text-1-on-secondary-muted: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-success: rgba(0, 54, 40, 1);
--ui-shape-text-1-on-warning: rgba(45, 18, 0, 1);
--ui-shape-text-2-on-danger: rgba(255, 203, 190, 1);
--ui-shape-text-2-on-info: rgba(142, 202, 255, 1);
--ui-shape-text-2-on-neutral: rgba(255, 255, 255, 0.6);
--ui-shape-text-2-on-primary: rgba(255, 217, 218, 1);
--ui-shape-text-2-on-secondary: rgba(0, 102, 116, 1);
--ui-shape-text-2-on-secondary-muted: rgba(177, 240, 255, 1);
--ui-shape-text-2-on-success: rgba(0, 133, 104, 1);
--ui-shape-text-2-on-warning: rgba(144, 74, 0, 1);
--ui-shape-text-on-secondary-2-or-3: rgba(1, 67, 75, 1);
--ui-shape-text-on-secondary-4-or-5: rgba(2, 109, 122, 1);
--ui-shape-text-on-secondary-muted-2-or-3: rgba(10, 65, 81, 1);
--ui-shape-text-on-secondary-muted-4-or-5: rgba(23, 106, 131, 1);
--ui-shape-warning: rgba(255, 149, 0, 1);
--ui-shape-warning-2: rgba(255, 149, 0, 0.48);
--ui-shape-warning-3: rgba(255, 149, 0, 0.28);
--ui-shape-warning-4: rgba(255, 149, 0, 0.12);
--ui-sheet-backdrop-1: rgba(0, 0, 0, 0.5);
--ui-sheet-backdrop-2: rgba(0, 0, 0, 0.2);
--ui-sheet-flat-1: rgba(255, 255, 255, 1);
--ui-sheet-flat-2: rgba(248, 248, 248, 1);
--ui-sheet-flat-3: rgba(255, 255, 255, 1);
--ui-sheet-grouped-1: rgba(245, 245, 245, 1);
--ui-sheet-grouped-2: rgba(255, 255, 255, 1);
--ui-sheet-grouped-3: rgba(248, 248, 248, 1);
--ui-text-1: rgba(0, 0, 0, 1);
--ui-text-1-display: rgba(32, 32, 32, 1);
--ui-text-2: rgba(0, 0, 0, 0.65);
--ui-text-3: rgba(0, 0, 0, 0.48);
--ui-text-danger: rgba(218, 49, 35, 1);
--ui-text-danger-display: rgba(255, 76, 58, 1);
--ui-text-info: rgba(43, 93, 185, 1);
--ui-text-info-display: rgba(0, 117, 219, 1);
--ui-text-placeholder: rgba(0, 0, 0, 0.34);
--ui-text-primary: rgba(225, 5, 67, 1);
--ui-text-primary-display: rgba(254, 44, 85, 1);
--ui-text-secondary: rgba(0, 158, 178, 1);
--ui-text-secondary-display: rgba(0, 186, 208, 1);
--ui-text-success: rgba(0, 133, 104, 1);
--ui-text-success-display: rgba(0, 195, 155, 1);
--ui-text-warning: rgba(179, 96, 0, 1);
--ui-text-warning-display: rgba(255, 149, 0, 1);
}
@media (color-index: 48) {
:root,
[data-tux-color-scheme='system'] {
--brand-ai-1: rgba(132, 112, 255, 1);
--brand-oscar-gold: rgba(186, 158, 94, 1);
--brand-tako-1: rgba(0, 181, 238, 1);
--brand-tako-2: rgba(255, 255, 255, 1);
--brand-tiktok-plus-1: rgba(178, 132, 43, 1);
--brand-tiktok-background: rgba(0, 0, 0, 1);
--brand-tiktok-background-element: rgba(255, 255, 255, 1);
--brand-tiktok-black: rgba(0, 0, 0, 1);
--brand-tiktok-razzmatazz: rgba(254, 44, 85, 1);
--brand-tiktok-splash: rgba(37, 244, 238, 1);
--brand-tiktok-spotlight: rgba(255, 255, 255, 1);
--brand-tiktok-subject-in-spotlight: rgba(0, 0, 0, 1);
--brand-tiktok-white: rgba(255, 255, 255, 1);
--brand-tiktokphotos-1: rgba(100, 250, 205, 1);
--brand-tiktokphotos-2: rgba(0, 170, 150, 1);
--brand-tokopedia-1: rgba(0, 170, 91, 1);
--creation-adjust-background: rgba(255, 178, 215, 1);
--creation-adjust-hsl-blue: rgba(50, 152, 246, 1);
--creation-adjust-hsl-cyan: rgba(53, 225, 225, 1);
--creation-adjust-hsl-fuchsia: rgba(201, 46, 255, 1);
--creation-adjust-hsl-green: rgba(120, 194, 94, 1);
--creation-adjust-hsl-indigo: rgba(88, 86, 214, 1);
--creation-adjust-hsl-orange: rgba(255, 147, 61, 1);
--creation-adjust-hsl-red: rgba(255, 82, 82, 1);
--creation-adjust-hsl-yellow: rgba(242, 205, 70, 1);
--creation-adjust-label: rgba(142, 31, 84, 1);
--creation-filter-background: rgba(255, 191, 191, 1);
--creation-filter-label: rgba(139, 35, 41, 1);
--creation-flash-light-cold: rgba(211, 234, 255, 1);
--creation-flash-light-warm: rgba(255, 242, 205, 1);
--creation-glance-watermark: rgba(255, 248, 90, 1);
--creation-pill-overlay: rgba(230, 230, 230, 0.28);
--ec-black-text-1: rgba(0, 0, 0, 1);
--ec-black-text-2: rgba(0, 0, 0, 0.65);
--ec-black-text-3: rgba(0, 0, 0, 0.48);
--ec-cyan-banner: rgba(26, 48, 49, 1);
--ec-cyan-border: rgba(168, 231, 231, 0.14);
--ec-cyan-main: rgba(0, 184, 185, 1);
--ec-cyan-tag: rgba(0, 184, 185, 0.34);
--ec-cyan-text: rgba(0, 184, 185, 1);
--ec-cyan-text-on-tag: rgba(168, 231, 231, 1);
--ec-primary-banner: rgba(57, 33, 37, 1);
--ec-primary-border: rgba(255, 183, 197, 0.12);
--ec-primary-tag: rgba(255, 59, 92, 0.34);
--ec-primary-text-on-tag: rgba(255, 204, 214, 1);
--ec-white-text-1: rgba(246, 246, 246, 1);
--ec-white-text-2: rgba(255, 255, 255, 0.88);
--ec-white-text-3: rgba(255, 255, 255, 0.6);
--feed-anchor-bg: rgba(37, 37, 37, 0.34);
--feed-top-tab-text-shadow-a30: rgba(0, 0, 0, 0.3);
--feed-top-tab-text-shadow-a40: rgba(0, 0, 0, 0.4);
--feed-top-tab-text-shadow-a50: rgba(0, 0, 0, 0.5);
--feed-top-tab-text-shadow-a66: rgba(0, 0, 0, 0.66);
--feed-top-tab-text-shadow-a83: rgba(0, 0, 0, 0.83);
--localservice-poi: rgba(19, 189, 144, 1);
--localservice-poi-background: rgba(19, 189, 144, 0.2);
--misc-online-shape: rgba(29, 215, 101, 1);
--misc-online-text: rgba(34, 198, 96, 1);
--misc-rating-star-selected-fill: rgba(250, 206, 21, 1);
--misc-verified-badge-1: rgba(32, 213, 236, 1);
--misc-verified-badge-2: rgba(255, 255, 255, 1);
--profile-icon-background-dark-gray: rgba(124, 124, 124, 0.9);
--social-chat-gradient-blue-1: rgba(0, 184, 211, 1);
--social-chat-gradient-blue-2: rgba(0, 173, 210, 1);
--social-chat-gradient-blue-3: rgba(23, 135, 217, 1);
--social-snail-1: rgba(124, 92, 253, 1);
--social-story-gradient-green-1: rgba(11, 171, 249, 1);
--social-story-gradient-green-2: rgba(32, 214, 235, 1);
--social-story-gradient-green-3: rgba(10, 243, 185, 1);
--social-story-gradient-purple-1: rgba(95, 124, 255, 1);
--social-story-gradient-purple-2: rgba(115, 102, 254, 1);
--social-story-gradient-purple-3: rgba(131, 90, 247, 1);
--social-story-shape-purple: rgba(124, 92, 253, 0.66);
--social-text-streak: rgba(255, 102, 18, 1);
--ui-image-overlay-black: rgba(0, 0, 0, 1);
--ui-image-overlay-black-a15: rgba(0, 0, 0, 0.15);
--ui-image-overlay-black-a25: rgba(0, 0, 0, 0.25);
--ui-image-overlay-black-a50: rgba(0, 0, 0, 0.5);
--ui-image-overlay-black-a80: rgba(0, 0, 0, 0.8);
--ui-image-overlay-dark-gray-a30: rgba(51, 51, 51, 0.3);
--ui-image-overlay-dark-gray-a60: rgba(51, 51, 51, 0.6);
--ui-image-overlay-dark-gray-a85: rgba(51, 51, 51, 0.85);
--ui-image-overlay-white: rgba(255, 255, 255, 1);
--ui-image-overlay-white-a20: rgba(255, 255, 255, 0.2);
--ui-image-overlay-white-a40: rgba(255, 255, 255, 0.4);
--ui-image-overlay-white-a75: rgba(255, 255, 255, 0.75);
--ui-page-flat-1: rgba(0, 0, 0, 1);
--ui-page-flat-2: rgba(30, 30, 30, 1);
--ui-page-flat-3: rgba(44, 44, 44, 1);
--ui-page-grouped-1: rgba(0, 0, 0, 1);
--ui-page-grouped-2: rgba(30, 30, 30, 1);
--ui-page-grouped-3: rgba(44, 44, 44, 1);
--ui-shape-danger: rgba(255, 76, 58, 1);
--ui-shape-danger-2: rgba(255, 76, 58, 0.68);
--ui-shape-danger-3: rgba(255, 76, 58, 0.5);
--ui-shape-danger-4: rgba(255, 76, 58, 0.29);
--ui-shape-info: rgba(0, 117, 220, 1);
--ui-shape-info-2: rgba(32, 151, 255, 0.6);
--ui-shape-info-3: rgba(32, 151, 255, 0.47);
--ui-shape-info-4: rgba(32, 151, 255, 0.29);
--ui-shape-neutral: rgba(250, 250, 250, 1);
--ui-shape-neutral-2: rgba(255, 255, 255, 0.32);
--ui-shape-neutral-3: rgba(255, 255, 255, 0.19);
--ui-shape-neutral-4: rgba(255, 255, 255, 0.13);
--ui-shape-primary: rgba(254, 44, 85, 1);
--ui-shape-primary-2: rgba(254, 44, 85, 0.6);
--ui-shape-primary-3: rgba(254, 44, 85, 0.43);
--ui-shape-primary-4: rgba(254, 44, 85, 0.27);
--ui-shape-secondary: rgba(32, 213, 236, 1);
--ui-shape-secondary-2: rgba(32, 213, 236, 0.5);
--ui-shape-secondary-3: rgba(32, 213, 236, 0.32);
--ui-shape-secondary-4: rgba(32, 213, 236, 0.21);
--ui-shape-secondary-5: rgba(32, 213, 236, 0.13);
--ui-shape-secondary-muted: rgba(0, 162, 201, 1);
--ui-shape-secondary-muted-2: rgba(0, 162, 201, 0.66);
--ui-shape-secondary-muted-3: rgba(0, 162, 201, 0.46);
--ui-shape-secondary-muted-4: rgba(0, 162, 201, 0.3);
--ui-shape-success: rgba(11, 224, 155, 1);
--ui-shape-success-2: rgba(11, 224, 155, 0.66);
--ui-shape-success-3: rgba(11, 224, 155, 0.46);
--ui-shape-success-4: rgba(11, 224, 155, 0.25);
--ui-shape-text-1-on-danger: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-info: rgba(231, 244, 255, 1);
--ui-shape-text-1-on-neutral: rgba(0, 0, 0, 1);
--ui-shape-text-1-on-primary: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-secondary: rgba(0, 52, 60, 1);
--ui-shape-text-1-on-secondary-muted: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-success: rgba(0, 54, 40, 1);
--ui-shape-text-1-on-warning: rgba(45, 18, 0, 1);
--ui-shape-text-2-on-danger: rgba(255, 203, 190, 1);
--ui-shape-text-2-on-info: rgba(142, 202, 255, 1);
--ui-shape-text-2-on-neutral: rgba(0, 0, 0, 0.48);
--ui-shape-text-2-on-primary: rgba(255, 217, 218, 1);
--ui-shape-text-2-on-secondary: rgba(0, 102, 116, 1);
--ui-shape-text-2-on-secondary-muted: rgba(177, 240, 255, 1);
--ui-shape-text-2-on-success: rgba(0, 133, 104, 1);
--ui-shape-text-2-on-warning: rgba(144, 74, 0, 1);
--ui-shape-text-on-secondary-2-or-3: rgba(160, 237, 250, 1);
--ui-shape-text-on-secondary-4-or-5: rgba(129, 204, 216, 1);
--ui-shape-text-on-secondary-muted-2-or-3: rgba(173, 233, 255, 1);
--ui-shape-text-on-secondary-muted-4-or-5: rgba(134, 201, 226, 1);
--ui-shape-warning: rgba(255, 149, 0, 1);
--ui-shape-warning-2: rgba(255, 149, 0, 0.67);
--ui-shape-warning-3: rgba(255, 149, 0, 0.51);
--ui-shape-warning-4: rgba(255, 149, 0, 0.28);
--ui-sheet-backdrop-1: rgba(0, 0, 0, 0.7);
--ui-sheet-backdrop-2: rgba(0, 0, 0, 0.5);
--ui-sheet-flat-1: rgba(30, 30, 30, 1);
--ui-sheet-flat-2: rgba(45, 45, 45, 1);
--ui-sheet-flat-3: rgba(58, 58, 58, 1);
--ui-sheet-grouped-1: rgba(30, 30, 30, 1);
--ui-sheet-grouped-2: rgba(45, 45, 45, 1);
--ui-sheet-grouped-3: rgba(58, 58, 58, 1);
--ui-text-1: rgba(246, 246, 246, 1);
--ui-text-1-display: rgba(240, 240, 240, 1);
--ui-text-2: rgba(255, 255, 255, 0.88);
--ui-text-3: rgba(255, 255, 255, 0.6);
--ui-text-danger: rgba(255, 118, 96, 1);
--ui-text-danger-display: rgba(255, 91, 72, 1);
--ui-text-info: rgba(96, 179, 255, 1);
--ui-text-info-display: rgba(96, 179, 255, 1);
--ui-text-placeholder: rgba(255, 255, 255, 0.4);
--ui-text-primary: rgba(255, 87, 111, 1);
--ui-text-primary-display: rgba(255, 59, 92, 1);
--ui-text-secondary: rgba(32, 213, 236, 1);
--ui-text-secondary-display: rgba(32, 213, 236, 1);
--ui-text-success: rgba(11, 224, 155, 1);
--ui-text-success-display: rgba(11, 224, 155, 1);
--ui-text-warning: rgba(255, 181, 84, 1);
--ui-text-warning-display: rgba(255, 149, 0, 1);
}
}
@media (color: 48842621) {
:root,
[data-tux-color-scheme='system'] {
--brand-ai-1: rgba(132, 112, 255, 1);
--brand-oscar-gold: rgba(186, 158, 94, 1);
--brand-tako-1: rgba(0, 181, 238, 1);
--brand-tako-2: rgba(255, 255, 255, 1);
--brand-tiktok-plus-1: rgba(178, 132, 43, 1);
--brand-tiktok-background: rgba(0, 0, 0, 1);
--brand-tiktok-background-element: rgba(255, 255, 255, 1);
--brand-tiktok-black: rgba(0, 0, 0, 1);
--brand-tiktok-razzmatazz: rgba(254, 44, 85, 1);
--brand-tiktok-splash: rgba(37, 244, 238, 1);
--brand-tiktok-spotlight: rgba(255, 255, 255, 1);
--brand-tiktok-subject-in-spotlight: rgba(0, 0, 0, 1);
--brand-tiktok-white: rgba(255, 255, 255, 1);
--brand-tiktokphotos-1: rgba(100, 250, 205, 1);
--brand-tiktokphotos-2: rgba(0, 170, 150, 1);
--brand-tokopedia-1: rgba(0, 170, 91, 1);
--creation-adjust-background: rgba(255, 178, 215, 1);
--creation-adjust-hsl-blue: rgba(50, 152, 246, 1);
--creation-adjust-hsl-cyan: rgba(53, 225, 225, 1);
--creation-adjust-hsl-fuchsia: rgba(201, 46, 255, 1);
--creation-adjust-hsl-green: rgba(120, 194, 94, 1);
--creation-adjust-hsl-indigo: rgba(88, 86, 214, 1);
--creation-adjust-hsl-orange: rgba(255, 147, 61, 1);
--creation-adjust-hsl-red: rgba(255, 82, 82, 1);
--creation-adjust-hsl-yellow: rgba(242, 205, 70, 1);
--creation-adjust-label: rgba(142, 31, 84, 1);
--creation-filter-background: rgba(255, 191, 191, 1);
--creation-filter-label: rgba(139, 35, 41, 1);
--creation-flash-light-cold: rgba(211, 234, 255, 1);
--creation-flash-light-warm: rgba(255, 242, 205, 1);
--creation-glance-watermark: rgba(255, 248, 90, 1);
--creation-pill-overlay: rgba(230, 230, 230, 0.28);
--ec-black-text-1: rgba(0, 0, 0, 1);
--ec-black-text-2: rgba(0, 0, 0, 0.65);
--ec-black-text-3: rgba(0, 0, 0, 0.48);
--ec-cyan-banner: rgba(26, 48, 49, 1);
--ec-cyan-border: rgba(168, 231, 231, 0.14);
--ec-cyan-main: rgba(0, 184, 185, 1);
--ec-cyan-tag: rgba(0, 184, 185, 0.34);
--ec-cyan-text: rgba(0, 184, 185, 1);
--ec-cyan-text-on-tag: rgba(168, 231, 231, 1);
--ec-primary-banner: rgba(57, 33, 37, 1);
--ec-primary-border: rgba(255, 183, 197, 0.12);
--ec-primary-tag: rgba(255, 59, 92, 0.34);
--ec-primary-text-on-tag: rgba(255, 204, 214, 1);
--ec-white-text-1: rgba(246, 246, 246, 1);
--ec-white-text-2: rgba(255, 255, 255, 0.88);
--ec-white-text-3: rgba(255, 255, 255, 0.6);
--feed-anchor-bg: rgba(37, 37, 37, 0.34);
--feed-top-tab-text-shadow-a30: rgba(0, 0, 0, 0.3);
--feed-top-tab-text-shadow-a40: rgba(0, 0, 0, 0.4);
--feed-top-tab-text-shadow-a50: rgba(0, 0, 0, 0.5);
--feed-top-tab-text-shadow-a66: rgba(0, 0, 0, 0.66);
--feed-top-tab-text-shadow-a83: rgba(0, 0, 0, 0.83);
--localservice-poi: rgba(19, 189, 144, 1);
--localservice-poi-background: rgba(19, 189, 144, 0.2);
--misc-online-shape: rgba(29, 215, 101, 1);
--misc-online-text: rgba(34, 198, 96, 1);
--misc-rating-star-selected-fill: rgba(250, 206, 21, 1);
--misc-verified-badge-1: rgba(32, 213, 236, 1);
--misc-verified-badge-2: rgba(255, 255, 255, 1);
--profile-icon-background-dark-gray: rgba(124, 124, 124, 0.9);
--social-chat-gradient-blue-1: rgba(0, 184, 211, 1);
--social-chat-gradient-blue-2: rgba(0, 173, 210, 1);
--social-chat-gradient-blue-3: rgba(23, 135, 217, 1);
--social-snail-1: rgba(124, 92, 253, 1);
--social-story-gradient-green-1: rgba(11, 171, 249, 1);
--social-story-gradient-green-2: rgba(32, 214, 235, 1);
--social-story-gradient-green-3: rgba(10, 243, 185, 1);
--social-story-gradient-purple-1: rgba(95, 124, 255, 1);
--social-story-gradient-purple-2: rgba(115, 102, 254, 1);
--social-story-gradient-purple-3: rgba(131, 90, 247, 1);
--social-story-shape-purple: rgba(124, 92, 253, 0.66);
--social-text-streak: rgba(255, 102, 18, 1);
--ui-image-overlay-black: rgba(0, 0, 0, 1);
--ui-image-overlay-black-a15: rgba(0, 0, 0, 0.15);
--ui-image-overlay-black-a25: rgba(0, 0, 0, 0.25);
--ui-image-overlay-black-a50: rgba(0, 0, 0, 0.5);
--ui-image-overlay-black-a80: rgba(0, 0, 0, 0.8);
--ui-image-overlay-dark-gray-a30: rgba(51, 51, 51, 0.3);
--ui-image-overlay-dark-gray-a60: rgba(51, 51, 51, 0.6);
--ui-image-overlay-dark-gray-a85: rgba(51, 51, 51, 0.85);
--ui-image-overlay-white: rgba(255, 255, 255, 1);
--ui-image-overlay-white-a20: rgba(255, 255, 255, 0.2);
--ui-image-overlay-white-a40: rgba(255, 255, 255, 0.4);
--ui-image-overlay-white-a75: rgba(255, 255, 255, 0.75);
--ui-page-flat-1: rgba(0, 0, 0, 1);
--ui-page-flat-2: rgba(30, 30, 30, 1);
--ui-page-flat-3: rgba(44, 44, 44, 1);
--ui-page-grouped-1: rgba(0, 0, 0, 1);
--ui-page-grouped-2: rgba(30, 30, 30, 1);
--ui-page-grouped-3: rgba(44, 44, 44, 1);
--ui-shape-danger: rgba(255, 76, 58, 1);
--ui-shape-danger-2: rgba(255, 76, 58, 0.68);
--ui-shape-danger-3: rgba(255, 76, 58, 0.5);
--ui-shape-danger-4: rgba(255, 76, 58, 0.29);
--ui-shape-info: rgba(0, 117, 220, 1);
--ui-shape-info-2: rgba(32, 151, 255, 0.6);
--ui-shape-info-3: rgba(32, 151, 255, 0.47);
--ui-shape-info-4: rgba(32, 151, 255, 0.29);
--ui-shape-neutral: rgba(250, 250, 250, 1);
--ui-shape-neutral-2: rgba(255, 255, 255, 0.32);
--ui-shape-neutral-3: rgba(255, 255, 255, 0.19);
--ui-shape-neutral-4: rgba(255, 255, 255, 0.13);
--ui-shape-primary: rgba(254, 44, 85, 1);
--ui-shape-primary-2: rgba(254, 44, 85, 0.6);
--ui-shape-primary-3: rgba(254, 44, 85, 0.43);
--ui-shape-primary-4: rgba(254, 44, 85, 0.27);
--ui-shape-secondary: rgba(32, 213, 236, 1);
--ui-shape-secondary-2: rgba(32, 213, 236, 0.5);
--ui-shape-secondary-3: rgba(32, 213, 236, 0.32);
--ui-shape-secondary-4: rgba(32, 213, 236, 0.21);
--ui-shape-secondary-5: rgba(32, 213, 236, 0.13);
--ui-shape-secondary-muted: rgba(0, 162, 201, 1);
--ui-shape-secondary-muted-2: rgba(0, 162, 201, 0.66);
--ui-shape-secondary-muted-3: rgba(0, 162, 201, 0.46);
--ui-shape-secondary-muted-4: rgba(0, 162, 201, 0.3);
--ui-shape-success: rgba(11, 224, 155, 1);
--ui-shape-success-2: rgba(11, 224, 155, 0.66);
--ui-shape-success-3: rgba(11, 224, 155, 0.46);
--ui-shape-success-4: rgba(11, 224, 155, 0.25);
--ui-shape-text-1-on-danger: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-info: rgba(231, 244, 255, 1);
--ui-shape-text-1-on-neutral: rgba(0, 0, 0, 1);
--ui-shape-text-1-on-primary: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-secondary: rgba(0, 52, 60, 1);
--ui-shape-text-1-on-secondary-muted: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-success: rgba(0, 54, 40, 1);
--ui-shape-text-1-on-warning: rgba(45, 18, 0, 1);
--ui-shape-text-2-on-danger: rgba(255, 203, 190, 1);
--ui-shape-text-2-on-info: rgba(142, 202, 255, 1);
--ui-shape-text-2-on-neutral: rgba(0, 0, 0, 0.48);
--ui-shape-text-2-on-primary: rgba(255, 217, 218, 1);
--ui-shape-text-2-on-secondary: rgba(0, 102, 116, 1);
--ui-shape-text-2-on-secondary-muted: rgba(177, 240, 255, 1);
--ui-shape-text-2-on-success: rgba(0, 133, 104, 1);
--ui-shape-text-2-on-warning: rgba(144, 74, 0, 1);
--ui-shape-text-on-secondary-2-or-3: rgba(160, 237, 250, 1);
--ui-shape-text-on-secondary-4-or-5: rgba(129, 204, 216, 1);
--ui-shape-text-on-secondary-muted-2-or-3: rgba(173, 233, 255, 1);
--ui-shape-text-on-secondary-muted-4-or-5: rgba(134, 201, 226, 1);
--ui-shape-warning: rgba(255, 149, 0, 1);
--ui-shape-warning-2: rgba(255, 149, 0, 0.67);
--ui-shape-warning-3: rgba(255, 149, 0, 0.51);
--ui-shape-warning-4: rgba(255, 149, 0, 0.28);
--ui-sheet-backdrop-1: rgba(0, 0, 0, 0.7);
--ui-sheet-backdrop-2: rgba(0, 0, 0, 0.5);
--ui-sheet-flat-1: rgba(30, 30, 30, 1);
--ui-sheet-flat-2: rgba(45, 45, 45, 1);
--ui-sheet-flat-3: rgba(58, 58, 58, 1);
--ui-sheet-grouped-1: rgba(30, 30, 30, 1);
--ui-sheet-grouped-2: rgba(45, 45, 45, 1);
--ui-sheet-grouped-3: rgba(58, 58, 58, 1);
--ui-text-1: rgba(246, 246, 246, 1);
--ui-text-1-display: rgba(240, 240, 240, 1);
--ui-text-2: rgba(255, 255, 255, 0.88);
--ui-text-3: rgba(255, 255, 255, 0.6);
--ui-text-danger: rgba(255, 118, 96, 1);
--ui-text-danger-display: rgba(255, 91, 72, 1);
--ui-text-info: rgba(96, 179, 255, 1);
--ui-text-info-display: rgba(96, 179, 255, 1);
--ui-text-placeholder: rgba(255, 255, 255, 0.4);
--ui-text-primary: rgba(255, 87, 111, 1);
--ui-text-primary-display: rgba(255, 59, 92, 1);
--ui-text-secondary: rgba(32, 213, 236, 1);
--ui-text-secondary-display: rgba(32, 213, 236, 1);
--ui-text-success: rgba(11, 224, 155, 1);
--ui-text-success-display: rgba(11, 224, 155, 1);
--ui-text-warning: rgba(255, 181, 84, 1);
--ui-text-warning-display: rgba(255, 149, 0, 1);
}
}
@media (prefers-color-scheme: dark) {
:root,
[data-tux-color-scheme='system'] {
--brand-ai-1: rgba(132, 112, 255, 1);
--brand-oscar-gold: rgba(186, 158, 94, 1);
--brand-tako-1: rgba(0, 181, 238, 1);
--brand-tako-2: rgba(255, 255, 255, 1);
--brand-tiktok-plus-1: rgba(178, 132, 43, 1);
--brand-tiktok-background: rgba(0, 0, 0, 1);
--brand-tiktok-background-element: rgba(255, 255, 255, 1);
--brand-tiktok-black: rgba(0, 0, 0, 1);
--brand-tiktok-razzmatazz: rgba(254, 44, 85, 1);
--brand-tiktok-splash: rgba(37, 244, 238, 1);
--brand-tiktok-spotlight: rgba(255, 255, 255, 1);
--brand-tiktok-subject-in-spotlight: rgba(0, 0, 0, 1);
--brand-tiktok-white: rgba(255, 255, 255, 1);
--brand-tiktokphotos-1: rgba(100, 250, 205, 1);
--brand-tiktokphotos-2: rgba(0, 170, 150, 1);
--brand-tokopedia-1: rgba(0, 170, 91, 1);
--creation-adjust-background: rgba(255, 178, 215, 1);
--creation-adjust-hsl-blue: rgba(50, 152, 246, 1);
--creation-adjust-hsl-cyan: rgba(53, 225, 225, 1);
--creation-adjust-hsl-fuchsia: rgba(201, 46, 255, 1);
--creation-adjust-hsl-green: rgba(120, 194, 94, 1);
--creation-adjust-hsl-indigo: rgba(88, 86, 214, 1);
--creation-adjust-hsl-orange: rgba(255, 147, 61, 1);
--creation-adjust-hsl-red: rgba(255, 82, 82, 1);
--creation-adjust-hsl-yellow: rgba(242, 205, 70, 1);
--creation-adjust-label: rgba(142, 31, 84, 1);
--creation-filter-background: rgba(255, 191, 191, 1);
--creation-filter-label: rgba(139, 35, 41, 1);
--creation-flash-light-cold: rgba(211, 234, 255, 1);
--creation-flash-light-warm: rgba(255, 242, 205, 1);
--creation-glance-watermark: rgba(255, 248, 90, 1);
--creation-pill-overlay: rgba(230, 230, 230, 0.28);
--ec-black-text-1: rgba(0, 0, 0, 1);
--ec-black-text-2: rgba(0, 0, 0, 0.65);
--ec-black-text-3: rgba(0, 0, 0, 0.48);
--ec-cyan-banner: rgba(26, 48, 49, 1);
--ec-cyan-border: rgba(168, 231, 231, 0.14);
--ec-cyan-main: rgba(0, 184, 185, 1);
--ec-cyan-tag: rgba(0, 184, 185, 0.34);
--ec-cyan-text: rgba(0, 184, 185, 1);
--ec-cyan-text-on-tag: rgba(168, 231, 231, 1);
--ec-primary-banner: rgba(57, 33, 37, 1);
--ec-primary-border: rgba(255, 183, 197, 0.12);
--ec-primary-tag: rgba(255, 59, 92, 0.34);
--ec-primary-text-on-tag: rgba(255, 204, 214, 1);
--ec-white-text-1: rgba(246, 246, 246, 1);
--ec-white-text-2: rgba(255, 255, 255, 0.88);
--ec-white-text-3: rgba(255, 255, 255, 0.6);
--feed-anchor-bg: rgba(37, 37, 37, 0.34);
--feed-top-tab-text-shadow-a30: rgba(0, 0, 0, 0.3);
--feed-top-tab-text-shadow-a40: rgba(0, 0, 0, 0.4);
--feed-top-tab-text-shadow-a50: rgba(0, 0, 0, 0.5);
--feed-top-tab-text-shadow-a66: rgba(0, 0, 0, 0.66);
--feed-top-tab-text-shadow-a83: rgba(0, 0, 0, 0.83);
--localservice-poi: rgba(19, 189, 144, 1);
--localservice-poi-background: rgba(19, 189, 144, 0.2);
--misc-online-shape: rgba(29, 215, 101, 1);
--misc-online-text: rgba(34, 198, 96, 1);
--misc-rating-star-selected-fill: rgba(250, 206, 21, 1);
--misc-verified-badge-1: rgba(32, 213, 236, 1);
--misc-verified-badge-2: rgba(255, 255, 255, 1);
--profile-icon-background-dark-gray: rgba(124, 124, 124, 0.9);
--social-chat-gradient-blue-1: rgba(0, 184, 211, 1);
--social-chat-gradient-blue-2: rgba(0, 173, 210, 1);
--social-chat-gradient-blue-3: rgba(23, 135, 217, 1);
--social-snail-1: rgba(124, 92, 253, 1);
--social-story-gradient-green-1: rgba(11, 171, 249, 1);
--social-story-gradient-green-2: rgba(32, 214, 235, 1);
--social-story-gradient-green-3: rgba(10, 243, 185, 1);
--social-story-gradient-purple-1: rgba(95, 124, 255, 1);
--social-story-gradient-purple-2: rgba(115, 102, 254, 1);
--social-story-gradient-purple-3: rgba(131, 90, 247, 1);
--social-story-shape-purple: rgba(124, 92, 253, 0.66);
--social-text-streak: rgba(255, 102, 18, 1);
--ui-image-overlay-black: rgba(0, 0, 0, 1);
--ui-image-overlay-black-a15: rgba(0, 0, 0, 0.15);
--ui-image-overlay-black-a25: rgba(0, 0, 0, 0.25);
--ui-image-overlay-black-a50: rgba(0, 0, 0, 0.5);
--ui-image-overlay-black-a80: rgba(0, 0, 0, 0.8);
--ui-image-overlay-dark-gray-a30: rgba(51, 51, 51, 0.3);
--ui-image-overlay-dark-gray-a60: rgba(51, 51, 51, 0.6);
--ui-image-overlay-dark-gray-a85: rgba(51, 51, 51, 0.85);
--ui-image-overlay-white: rgba(255, 255, 255, 1);
--ui-image-overlay-white-a20: rgba(255, 255, 255, 0.2);
--ui-image-overlay-white-a40: rgba(255, 255, 255, 0.4);
--ui-image-overlay-white-a75: rgba(255, 255, 255, 0.75);
--ui-page-flat-1: rgba(0, 0, 0, 1);
--ui-page-flat-2: rgba(30, 30, 30, 1);
--ui-page-flat-3: rgba(44, 44, 44, 1);
--ui-page-grouped-1: rgba(0, 0, 0, 1);
--ui-page-grouped-2: rgba(30, 30, 30, 1);
--ui-page-grouped-3: rgba(44, 44, 44, 1);
--ui-shape-danger: rgba(255, 76, 58, 1);
--ui-shape-danger-2: rgba(255, 76, 58, 0.68);
--ui-shape-danger-3: rgba(255, 76, 58, 0.5);
--ui-shape-danger-4: rgba(255, 76, 58, 0.29);
--ui-shape-info: rgba(0, 117, 220, 1);
--ui-shape-info-2: rgba(32, 151, 255, 0.6);
--ui-shape-info-3: rgba(32, 151, 255, 0.47);
--ui-shape-info-4: rgba(32, 151, 255, 0.29);
--ui-shape-neutral: rgba(250, 250, 250, 1);
--ui-shape-neutral-2: rgba(255, 255, 255, 0.32);
--ui-shape-neutral-3: rgba(255, 255, 255, 0.19);
--ui-shape-neutral-4: rgba(255, 255, 255, 0.13);
--ui-shape-primary: rgba(254, 44, 85, 1);
--ui-shape-primary-2: rgba(254, 44, 85, 0.6);
--ui-shape-primary-3: rgba(254, 44, 85, 0.43);
--ui-shape-primary-4: rgba(254, 44, 85, 0.27);
--ui-shape-secondary: rgba(32, 213, 236, 1);
--ui-shape-secondary-2: rgba(32, 213, 236, 0.5);
--ui-shape-secondary-3: rgba(32, 213, 236, 0.32);
--ui-shape-secondary-4: rgba(32, 213, 236, 0.21);
--ui-shape-secondary-5: rgba(32, 213, 236, 0.13);
--ui-shape-secondary-muted: rgba(0, 162, 201, 1);
--ui-shape-secondary-muted-2: rgba(0, 162, 201, 0.66);
--ui-shape-secondary-muted-3: rgba(0, 162, 201, 0.46);
--ui-shape-secondary-muted-4: rgba(0, 162, 201, 0.3);
--ui-shape-success: rgba(11, 224, 155, 1);
--ui-shape-success-2: rgba(11, 224, 155, 0.66);
--ui-shape-success-3: rgba(11, 224, 155, 0.46);
--ui-shape-success-4: rgba(11, 224, 155, 0.25);
--ui-shape-text-1-on-danger: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-info: rgba(231, 244, 255, 1);
--ui-shape-text-1-on-neutral: rgba(0, 0, 0, 1);
--ui-shape-text-1-on-primary: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-secondary: rgba(0, 52, 60, 1);
--ui-shape-text-1-on-secondary-muted: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-success: rgba(0, 54, 40, 1);
--ui-shape-text-1-on-warning: rgba(45, 18, 0, 1);
--ui-shape-text-2-on-danger: rgba(255, 203, 190, 1);
--ui-shape-text-2-on-info: rgba(142, 202, 255, 1);
--ui-shape-text-2-on-neutral: rgba(0, 0, 0, 0.48);
--ui-shape-text-2-on-primary: rgba(255, 217, 218, 1);
--ui-shape-text-2-on-secondary: rgba(0, 102, 116, 1);
--ui-shape-text-2-on-secondary-muted: rgba(177, 240, 255, 1);
--ui-shape-text-2-on-success: rgba(0, 133, 104, 1);
--ui-shape-text-2-on-warning: rgba(144, 74, 0, 1);
--ui-shape-text-on-secondary-2-or-3: rgba(160, 237, 250, 1);
--ui-shape-text-on-secondary-4-or-5: rgba(129, 204, 216, 1);
--ui-shape-text-on-secondary-muted-2-or-3: rgba(173, 233, 255, 1);
--ui-shape-text-on-secondary-muted-4-or-5: rgba(134, 201, 226, 1);
--ui-shape-warning: rgba(255, 149, 0, 1);
--ui-shape-warning-2: rgba(255, 149, 0, 0.67);
--ui-shape-warning-3: rgba(255, 149, 0, 0.51);
--ui-shape-warning-4: rgba(255, 149, 0, 0.28);
--ui-sheet-backdrop-1: rgba(0, 0, 0, 0.7);
--ui-sheet-backdrop-2: rgba(0, 0, 0, 0.5);
--ui-sheet-flat-1: rgba(30, 30, 30, 1);
--ui-sheet-flat-2: rgba(45, 45, 45, 1);
--ui-sheet-flat-3: rgba(58, 58, 58, 1);
--ui-sheet-grouped-1: rgba(30, 30, 30, 1);
--ui-sheet-grouped-2: rgba(45, 45, 45, 1);
--ui-sheet-grouped-3: rgba(58, 58, 58, 1);
--ui-text-1: rgba(246, 246, 246, 1);
--ui-text-1-display: rgba(240, 240, 240, 1);
--ui-text-2: rgba(255, 255, 255, 0.88);
--ui-text-3: rgba(255, 255, 255, 0.6);
--ui-text-danger: rgba(255, 118, 96, 1);
--ui-text-danger-display: rgba(255, 91, 72, 1);
--ui-text-info: rgba(96, 179, 255, 1);
--ui-text-info-display: rgba(96, 179, 255, 1);
--ui-text-placeholder: rgba(255, 255, 255, 0.4);
--ui-text-primary: rgba(255, 87, 111, 1);
--ui-text-primary-display: rgba(255, 59, 92, 1);
--ui-text-secondary: rgba(32, 213, 236, 1);
--ui-text-secondary-display: rgba(32, 213, 236, 1);
--ui-text-success: rgba(11, 224, 155, 1);
--ui-text-success-display: rgba(11, 224, 155, 1);
--ui-text-warning: rgba(255, 181, 84, 1);
--ui-text-warning-display: rgba(255, 149, 0, 1);
}
}
[data-tux-color-scheme='light'] {
--brand-ai-1: rgba(132, 112, 255, 1);
--brand-oscar-gold: rgba(186, 158, 94, 1);
--brand-tako-1: rgba(0, 181, 238, 1);
--brand-tako-2: rgba(0, 0, 0, 1);
--brand-tiktok-plus-1: rgba(178, 132, 43, 1);
--brand-tiktok-background: rgba(255, 255, 255, 1);
--brand-tiktok-background-element: rgba(0, 0, 0, 1);
--brand-tiktok-black: rgba(0, 0, 0, 1);
--brand-tiktok-razzmatazz: rgba(254, 44, 85, 1);
--brand-tiktok-splash: rgba(37, 244, 238, 1);
--brand-tiktok-spotlight: rgba(0, 0, 0, 1);
--brand-tiktok-subject-in-spotlight: rgba(255, 255, 255, 1);
--brand-tiktok-white: rgba(255, 255, 255, 1);
--brand-tiktokphotos-1: rgba(100, 250, 205, 1);
--brand-tiktokphotos-2: rgba(0, 170, 150, 1);
--brand-tokopedia-1: rgba(0, 170, 91, 1);
--creation-adjust-background: rgba(255, 178, 215, 1);
--creation-adjust-hsl-blue: rgba(50, 152, 246, 1);
--creation-adjust-hsl-cyan: rgba(53, 225, 225, 1);
--creation-adjust-hsl-fuchsia: rgba(201, 46, 255, 1);
--creation-adjust-hsl-green: rgba(120, 194, 94, 1);
--creation-adjust-hsl-indigo: rgba(88, 86, 214, 1);
--creation-adjust-hsl-orange: rgba(255, 147, 61, 1);
--creation-adjust-hsl-red: rgba(255, 82, 82, 1);
--creation-adjust-hsl-yellow: rgba(242, 205, 70, 1);
--creation-adjust-label: rgba(142, 31, 84, 1);
--creation-filter-background: rgba(255, 191, 191, 1);
--creation-filter-label: rgba(139, 35, 41, 1);
--creation-flash-light-cold: rgba(211, 234, 255, 1);
--creation-flash-light-warm: rgba(255, 242, 205, 1);
--creation-glance-watermark: rgba(255, 248, 90, 1);
--creation-pill-overlay: rgba(230, 230, 230, 0.28);
--ec-black-text-1: rgba(0, 0, 0, 1);
--ec-black-text-2: rgba(0, 0, 0, 0.65);
--ec-black-text-3: rgba(0, 0, 0, 0.48);
--ec-cyan-banner: rgba(240, 251, 251, 1);
--ec-cyan-border: rgba(0, 140, 141, 0.14);
--ec-cyan-main: rgba(0, 184, 185, 1);
--ec-cyan-tag: rgba(0, 184, 185, 0.12);
--ec-cyan-text: rgba(8, 146, 146, 1);
--ec-cyan-text-on-tag: rgba(8, 146, 146, 1);
--ec-primary-banner: rgba(255, 242, 245, 1);
--ec-primary-border: rgba(225, 5, 67, 0.1);
--ec-primary-tag: rgba(254, 44, 85, 0.12);
--ec-primary-text-on-tag: rgba(225, 5, 67, 1);
--ec-white-text-1: rgba(246, 246, 246, 1);
--ec-white-text-2: rgba(255, 255, 255, 0.88);
--ec-white-text-3: rgba(255, 255, 255, 0.6);
--feed-anchor-bg: rgba(37, 37, 37, 0.34);
--feed-top-tab-text-shadow-a30: rgba(0, 0, 0, 0.3);
--feed-top-tab-text-shadow-a40: rgba(0, 0, 0, 0.4);
--feed-top-tab-text-shadow-a50: rgba(0, 0, 0, 0.5);
--feed-top-tab-text-shadow-a66: rgba(0, 0, 0, 0.66);
--feed-top-tab-text-shadow-a83: rgba(0, 0, 0, 0.83);
--localservice-poi: rgba(19, 189, 144, 1);
--localservice-poi-background: rgba(19, 189, 144, 0.12);
--misc-online-shape: rgba(29, 215, 101, 1);
--misc-online-text: rgba(0, 165, 69, 1);
--misc-rating-star-selected-fill: rgba(250, 206, 21, 1);
--misc-verified-badge-1: rgba(32, 213, 236, 1);
--misc-verified-badge-2: rgba(255, 255, 255, 1);
--profile-icon-background-dark-gray: rgba(124, 124, 124, 0.9);
--social-chat-gradient-blue-1: rgba(0, 184, 211, 1);
--social-chat-gradient-blue-2: rgba(0, 173, 210, 1);
--social-chat-gradient-blue-3: rgba(23, 135, 217, 1);
--social-snail-1: rgba(124, 92, 253, 1);
--social-story-gradient-green-1: rgba(11, 171, 249, 1);
--social-story-gradient-green-2: rgba(32, 214, 235, 1);
--social-story-gradient-green-3: rgba(10, 243, 185, 1);
--social-story-gradient-purple-1: rgba(95, 124, 255, 1);
--social-story-gradient-purple-2: rgba(115, 102, 254, 1);
--social-story-gradient-purple-3: rgba(131, 90, 247, 1);
--social-story-shape-purple: rgba(124, 92, 253, 0.66);
--social-text-streak: rgba(255, 102, 19, 1);
--ui-image-overlay-black: rgba(0, 0, 0, 1);
--ui-image-overlay-black-a15: rgba(0, 0, 0, 0.15);
--ui-image-overlay-black-a25: rgba(0, 0, 0, 0.25);
--ui-image-overlay-black-a50: rgba(0, 0, 0, 0.5);
--ui-image-overlay-black-a80: rgba(0, 0, 0, 0.8);
--ui-image-overlay-dark-gray-a30: rgba(51, 51, 51, 0.3);
--ui-image-overlay-dark-gray-a60: rgba(51, 51, 51, 0.6);
--ui-image-overlay-dark-gray-a85: rgba(51, 51, 51, 0.85);
--ui-image-overlay-white: rgba(255, 255, 255, 1);
--ui-image-overlay-white-a20: rgba(255, 255, 255, 0.2);
--ui-image-overlay-white-a40: rgba(255, 255, 255, 0.4);
--ui-image-overlay-white-a75: rgba(255, 255, 255, 0.75);
--ui-page-flat-1: rgba(255, 255, 255, 1);
--ui-page-flat-2: rgba(248, 248, 248, 1);
--ui-page-flat-3: rgba(255, 255, 255, 1);
--ui-page-grouped-1: rgba(245, 245, 245, 1);
--ui-page-grouped-2: rgba(255, 255, 255, 1);
--ui-page-grouped-3: rgba(248, 248, 248, 1);
--ui-shape-danger: rgba(255, 76, 58, 1);
--ui-shape-danger-2: rgba(255, 76, 58, 0.32);
--ui-shape-danger-3: rgba(255, 76, 58, 0.21);
--ui-shape-danger-4: rgba(255, 76, 58, 0.09);
--ui-shape-info: rgba(0, 117, 220, 1);
--ui-shape-info-2: rgba(0, 117, 220, 0.3);
--ui-shape-info-3: rgba(0, 117, 220, 0.19);
--ui-shape-info-4: rgba(0, 117, 220, 0.1);
--ui-shape-neutral: rgba(0, 0, 0, 1);
--ui-shape-neutral-2: rgba(0, 0, 0, 0.17);
--ui-shape-neutral-3: rgba(0, 0, 0, 0.12);
--ui-shape-neutral-4: rgba(0, 0, 0, 0.05);
--ui-shape-primary: rgba(254, 44, 85, 1);
--ui-shape-primary-2: rgba(254, 44, 85, 0.31);
--ui-shape-primary-3: rgba(254, 44, 85, 0.18);
--ui-shape-primary-4: rgba(254, 44, 85, 0.07);
--ui-shape-secondary: rgba(32, 213, 236, 1);
--ui-shape-secondary-2: rgba(32, 213, 236, 0.5);
--ui-shape-secondary-3: rgba(32, 213, 236, 0.32);
--ui-shape-secondary-4: rgba(32, 213, 236, 0.13);
--ui-shape-secondary-5: rgba(32, 213, 236, 0.05);
--ui-shape-secondary-muted: rgba(0, 162, 201, 1);
--ui-shape-secondary-muted-2: rgba(0, 162, 201, 0.33);
--ui-shape-secondary-muted-3: rgba(0, 162, 201, 0.24);
--ui-shape-secondary-muted-4: rgba(0, 162, 201, 0.12);
--ui-shape-success: rgba(11, 224, 155, 1);
--ui-shape-success-2: rgba(11, 224, 155, 0.48);
--ui-shape-success-3: rgba(11, 224, 155, 0.28);
--ui-shape-success-4: rgba(11, 224, 155, 0.12);
--ui-shape-text-1-on-danger: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-info: rgba(231, 244, 255, 1);
--ui-shape-text-1-on-neutral: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-primary: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-secondary: rgba(0, 52, 60, 1);
--ui-shape-text-1-on-secondary-muted: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-success: rgba(0, 54, 40, 1);
--ui-shape-text-1-on-warning: rgba(45, 18, 0, 1);
--ui-shape-text-2-on-danger: rgba(255, 203, 190, 1);
--ui-shape-text-2-on-info: rgba(142, 202, 255, 1);
--ui-shape-text-2-on-neutral: rgba(255, 255, 255, 0.6);
--ui-shape-text-2-on-primary: rgba(255, 217, 218, 1);
--ui-shape-text-2-on-secondary: rgba(0, 102, 116, 1);
--ui-shape-text-2-on-secondary-muted: rgba(177, 240, 255, 1);
--ui-shape-text-2-on-success: rgba(0, 133, 104, 1);
--ui-shape-text-2-on-warning: rgba(144, 74, 0, 1);
--ui-shape-text-on-secondary-2-or-3: rgba(1, 67, 75, 1);
--ui-shape-text-on-secondary-4-or-5: rgba(2, 109, 122, 1);
--ui-shape-text-on-secondary-muted-2-or-3: rgba(10, 65, 81, 1);
--ui-shape-text-on-secondary-muted-4-or-5: rgba(23, 106, 131, 1);
--ui-shape-warning: rgba(255, 149, 0, 1);
--ui-shape-warning-2: rgba(255, 149, 0, 0.48);
--ui-shape-warning-3: rgba(255, 149, 0, 0.28);
--ui-shape-warning-4: rgba(255, 149, 0, 0.12);
--ui-sheet-backdrop-1: rgba(0, 0, 0, 0.5);
--ui-sheet-backdrop-2: rgba(0, 0, 0, 0.2);
--ui-sheet-flat-1: rgba(255, 255, 255, 1);
--ui-sheet-flat-2: rgba(248, 248, 248, 1);
--ui-sheet-flat-3: rgba(255, 255, 255, 1);
--ui-sheet-grouped-1: rgba(245, 245, 245, 1);
--ui-sheet-grouped-2: rgba(255, 255, 255, 1);
--ui-sheet-grouped-3: rgba(248, 248, 248, 1);
--ui-text-1: rgba(0, 0, 0, 1);
--ui-text-1-display: rgba(32, 32, 32, 1);
--ui-text-2: rgba(0, 0, 0, 0.65);
--ui-text-3: rgba(0, 0, 0, 0.48);
--ui-text-danger: rgba(218, 49, 35, 1);
--ui-text-danger-display: rgba(255, 76, 58, 1);
--ui-text-info: rgba(43, 93, 185, 1);
--ui-text-info-display: rgba(0, 117, 219, 1);
--ui-text-placeholder: rgba(0, 0, 0, 0.34);
--ui-text-primary: rgba(225, 5, 67, 1);
--ui-text-primary-display: rgba(254, 44, 85, 1);
--ui-text-secondary: rgba(0, 158, 178, 1);
--ui-text-secondary-display: rgba(0, 186, 208, 1);
--ui-text-success: rgba(0, 133, 104, 1);
--ui-text-success-display: rgba(0, 195, 155, 1);
--ui-text-warning: rgba(179, 96, 0, 1);
--ui-text-warning-display: rgba(255, 149, 0, 1);
}
[data-tux-color-scheme='dark'] {
--brand-ai-1: rgba(132, 112, 255, 1);
--brand-oscar-gold: rgba(186, 158, 94, 1);
--brand-tako-1: rgba(0, 181, 238, 1);
--brand-tako-2: rgba(255, 255, 255, 1);
--brand-tiktok-plus-1: rgba(178, 132, 43, 1);
--brand-tiktok-background: rgba(0, 0, 0, 1);
--brand-tiktok-background-element: rgba(255, 255, 255, 1);
--brand-tiktok-black: rgba(0, 0, 0, 1);
--brand-tiktok-razzmatazz: rgba(254, 44, 85, 1);
--brand-tiktok-splash: rgba(37, 244, 238, 1);
--brand-tiktok-spotlight: rgba(255, 255, 255, 1);
--brand-tiktok-subject-in-spotlight: rgba(0, 0, 0, 1);
--brand-tiktok-white: rgba(255, 255, 255, 1);
--brand-tiktokphotos-1: rgba(100, 250, 205, 1);
--brand-tiktokphotos-2: rgba(0, 170, 150, 1);
--brand-tokopedia-1: rgba(0, 170, 91, 1);
--creation-adjust-background: rgba(255, 178, 215, 1);
--creation-adjust-hsl-blue: rgba(50, 152, 246, 1);
--creation-adjust-hsl-cyan: rgba(53, 225, 225, 1);
--creation-adjust-hsl-fuchsia: rgba(201, 46, 255, 1);
--creation-adjust-hsl-green: rgba(120, 194, 94, 1);
--creation-adjust-hsl-indigo: rgba(88, 86, 214, 1);
--creation-adjust-hsl-orange: rgba(255, 147, 61, 1);
--creation-adjust-hsl-red: rgba(255, 82, 82, 1);
--creation-adjust-hsl-yellow: rgba(242, 205, 70, 1);
--creation-adjust-label: rgba(142, 31, 84, 1);
--creation-filter-background: rgba(255, 191, 191, 1);
--creation-filter-label: rgba(139, 35, 41, 1);
--creation-flash-light-cold: rgba(211, 234, 255, 1);
--creation-flash-light-warm: rgba(255, 242, 205, 1);
--creation-glance-watermark: rgba(255, 248, 90, 1);
--creation-pill-overlay: rgba(230, 230, 230, 0.28);
--ec-black-text-1: rgba(0, 0, 0, 1);
--ec-black-text-2: rgba(0, 0, 0, 0.65);
--ec-black-text-3: rgba(0, 0, 0, 0.48);
--ec-cyan-banner: rgba(26, 48, 49, 1);
--ec-cyan-border: rgba(168, 231, 231, 0.14);
--ec-cyan-main: rgba(0, 184, 185, 1);
--ec-cyan-tag: rgba(0, 184, 185, 0.34);
--ec-cyan-text: rgba(0, 184, 185, 1);
--ec-cyan-text-on-tag: rgba(168, 231, 231, 1);
--ec-primary-banner: rgba(57, 33, 37, 1);
--ec-primary-border: rgba(255, 183, 197, 0.12);
--ec-primary-tag: rgba(255, 59, 92, 0.34);
--ec-primary-text-on-tag: rgba(255, 204, 214, 1);
--ec-white-text-1: rgba(246, 246, 246, 1);
--ec-white-text-2: rgba(255, 255, 255, 0.88);
--ec-white-text-3: rgba(255, 255, 255, 0.6);
--feed-anchor-bg: rgba(37, 37, 37, 0.34);
--feed-top-tab-text-shadow-a30: rgba(0, 0, 0, 0.3);
--feed-top-tab-text-shadow-a40: rgba(0, 0, 0, 0.4);
--feed-top-tab-text-shadow-a50: rgba(0, 0, 0, 0.5);
--feed-top-tab-text-shadow-a66: rgba(0, 0, 0, 0.66);
--feed-top-tab-text-shadow-a83: rgba(0, 0, 0, 0.83);
--localservice-poi: rgba(19, 189, 144, 1);
--localservice-poi-background: rgba(19, 189, 144, 0.2);
--misc-online-shape: rgba(29, 215, 101, 1);
--misc-online-text: rgba(34, 198, 96, 1);
--misc-rating-star-selected-fill: rgba(250, 206, 21, 1);
--misc-verified-badge-1: rgba(32, 213, 236, 1);
--misc-verified-badge-2: rgba(255, 255, 255, 1);
--profile-icon-background-dark-gray: rgba(124, 124, 124, 0.9);
--social-chat-gradient-blue-1: rgba(0, 184, 211, 1);
--social-chat-gradient-blue-2: rgba(0, 173, 210, 1);
--social-chat-gradient-blue-3: rgba(23, 135, 217, 1);
--social-snail-1: rgba(124, 92, 253, 1);
--social-story-gradient-green-1: rgba(11, 171, 249, 1);
--social-story-gradient-green-2: rgba(32, 214, 235, 1);
--social-story-gradient-green-3: rgba(10, 243, 185, 1);
--social-story-gradient-purple-1: rgba(95, 124, 255, 1);
--social-story-gradient-purple-2: rgba(115, 102, 254, 1);
--social-story-gradient-purple-3: rgba(131, 90, 247, 1);
--social-story-shape-purple: rgba(124, 92, 253, 0.66);
--social-text-streak: rgba(255, 102, 18, 1);
--ui-image-overlay-black: rgba(0, 0, 0, 1);
--ui-image-overlay-black-a15: rgba(0, 0, 0, 0.15);
--ui-image-overlay-black-a25: rgba(0, 0, 0, 0.25);
--ui-image-overlay-black-a50: rgba(0, 0, 0, 0.5);
--ui-image-overlay-black-a80: rgba(0, 0, 0, 0.8);
--ui-image-overlay-dark-gray-a30: rgba(51, 51, 51, 0.3);
--ui-image-overlay-dark-gray-a60: rgba(51, 51, 51, 0.6);
--ui-image-overlay-dark-gray-a85: rgba(51, 51, 51, 0.85);
--ui-image-overlay-white: rgba(255, 255, 255, 1);
--ui-image-overlay-white-a20: rgba(255, 255, 255, 0.2);
--ui-image-overlay-white-a40: rgba(255, 255, 255, 0.4);
--ui-image-overlay-white-a75: rgba(255, 255, 255, 0.75);
--ui-page-flat-1: rgba(0, 0, 0, 1);
--ui-page-flat-2: rgba(30, 30, 30, 1);
--ui-page-flat-3: rgba(44, 44, 44, 1);
--ui-page-grouped-1: rgba(0, 0, 0, 1);
--ui-page-grouped-2: rgba(30, 30, 30, 1);
--ui-page-grouped-3: rgba(44, 44, 44, 1);
--ui-shape-danger: rgba(255, 76, 58, 1);
--ui-shape-danger-2: rgba(255, 76, 58, 0.68);
--ui-shape-danger-3: rgba(255, 76, 58, 0.5);
--ui-shape-danger-4: rgba(255, 76, 58, 0.29);
--ui-shape-info: rgba(0, 117, 220, 1);
--ui-shape-info-2: rgba(32, 151, 255, 0.6);
--ui-shape-info-3: rgba(32, 151, 255, 0.47);
--ui-shape-info-4: rgba(32, 151, 255, 0.29);
--ui-shape-neutral: rgba(250, 250, 250, 1);
--ui-shape-neutral-2: rgba(255, 255, 255, 0.32);
--ui-shape-neutral-3: rgba(255, 255, 255, 0.19);
--ui-shape-neutral-4: rgba(255, 255, 255, 0.13);
--ui-shape-primary: rgba(254, 44, 85, 1);
--ui-shape-primary-2: rgba(254, 44, 85, 0.6);
--ui-shape-primary-3: rgba(254, 44, 85, 0.43);
--ui-shape-primary-4: rgba(254, 44, 85, 0.27);
--ui-shape-secondary: rgba(32, 213, 236, 1);
--ui-shape-secondary-2: rgba(32, 213, 236, 0.5);
--ui-shape-secondary-3: rgba(32, 213, 236, 0.32);
--ui-shape-secondary-4: rgba(32, 213, 236, 0.21);
--ui-shape-secondary-5: rgba(32, 213, 236, 0.13);
--ui-shape-secondary-muted: rgba(0, 162, 201, 1);
--ui-shape-secondary-muted-2: rgba(0, 162, 201, 0.66);
--ui-shape-secondary-muted-3: rgba(0, 162, 201, 0.46);
--ui-shape-secondary-muted-4: rgba(0, 162, 201, 0.3);
--ui-shape-success: rgba(11, 224, 155, 1);
--ui-shape-success-2: rgba(11, 224, 155, 0.66);
--ui-shape-success-3: rgba(11, 224, 155, 0.46);
--ui-shape-success-4: rgba(11, 224, 155, 0.25);
--ui-shape-text-1-on-danger: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-info: rgba(231, 244, 255, 1);
--ui-shape-text-1-on-neutral: rgba(0, 0, 0, 1);
--ui-shape-text-1-on-primary: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-secondary: rgba(0, 52, 60, 1);
--ui-shape-text-1-on-secondary-muted: rgba(255, 255, 255, 1);
--ui-shape-text-1-on-success: rgba(0, 54, 40, 1);
--ui-shape-text-1-on-warning: rgba(45, 18, 0, 1);
--ui-shape-text-2-on-danger: rgba(255, 203, 190, 1);
--ui-shape-text-2-on-info: rgba(142, 202, 255, 1);
--ui-shape-text-2-on-neutral: rgba(0, 0, 0, 0.48);
--ui-shape-text-2-on-primary: rgba(255, 217, 218, 1);
--ui-shape-text-2-on-secondary: rgba(0, 102, 116, 1);
--ui-shape-text-2-on-secondary-muted: rgba(177, 240, 255, 1);
--ui-shape-text-2-on-success: rgba(0, 133, 104, 1);
--ui-shape-text-2-on-warning: rgba(144, 74, 0, 1);
--ui-shape-text-on-secondary-2-or-3: rgba(160, 237, 250, 1);
--ui-shape-text-on-secondary-4-or-5: rgba(129, 204, 216, 1);
--ui-shape-text-on-secondary-muted-2-or-3: rgba(173, 233, 255, 1);
--ui-shape-text-on-secondary-muted-4-or-5: rgba(134, 201, 226, 1);
--ui-shape-warning: rgba(255, 149, 0, 1);
--ui-shape-warning-2: rgba(255, 149, 0, 0.67);
--ui-shape-warning-3: rgba(255, 149, 0, 0.51);
--ui-shape-warning-4: rgba(255, 149, 0, 0.28);
--ui-sheet-backdrop-1: rgba(0, 0, 0, 0.7);
--ui-sheet-backdrop-2: rgba(0, 0, 0, 0.5);
--ui-sheet-flat-1: rgba(30, 30, 30, 1);
--ui-sheet-flat-2: rgba(45, 45, 45, 1);
--ui-sheet-flat-3: rgba(58, 58, 58, 1);
--ui-sheet-grouped-1: rgba(30, 30, 30, 1);
--ui-sheet-grouped-2: rgba(45, 45, 45, 1);
--ui-sheet-grouped-3: rgba(58, 58, 58, 1);
--ui-text-1: rgba(246, 246, 246, 1);
--ui-text-1-display: rgba(240, 240, 240, 1);
--ui-text-2: rgba(255, 255, 255, 0.88);
--ui-text-3: rgba(255, 255, 255, 0.6);
--ui-text-danger: rgba(255, 118, 96, 1);
--ui-text-danger-display: rgba(255, 91, 72, 1);
--ui-text-info: rgba(96, 179, 255, 1);
--ui-text-info-display: rgba(96, 179, 255, 1);
--ui-text-placeholder: rgba(255, 255, 255, 0.4);
--ui-text-primary: rgba(255, 87, 111, 1);
--ui-text-primary-display: rgba(255, 59, 92, 1);
--ui-text-secondary: rgba(32, 213, 236, 1);
--ui-text-secondary-display: rgba(32, 213, 236, 1);
--ui-text-success: rgba(11, 224, 155, 1);
--ui-text-success-display: rgba(11, 224, 155, 1);
--ui-text-warning: rgba(255, 181, 84, 1);
--ui-text-warning-display: rgba(255, 149, 0, 1);
}
@font-face {
font-family: 'TikTokFont';
src: url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Regular.woff2?_default_font=1&v=2)
format('woff2'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Regular.woff?_default_font=1&v=2)
format('woff'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Regular.otf?_default_font=1&v=2)
format('opentype');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'TikTokFont';
src: url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Semibold.woff2?_default_font=1&v=2)
format('woff2'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Semibold.woff?_default_font=1&v=2)
format('woff'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Semibold.otf?_default_font=1&v=2)
format('opentype');
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'TikTokFont';
src: url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Bold.woff2?_default_font=1&v=2)
format('woff2'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Bold.woff?_default_font=1&v=2)
format('woff'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokFont-Bold.otf?_default_font=1&v=2)
format('opentype');
font-weight: bold;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'TikTokDisplayFont';
src: url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Regular.woff2?_default_font=1&v=2)
format('woff2'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Regular.woff?_default_font=1&v=2)
format('woff'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Regular.otf?_default_font=1&v=2)
format('opentype');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'TikTokDisplayFont';
src: url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Semibold.woff2?_default_font=1&v=2)
format('woff2'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Semibold.woff?_default_font=1&v=2)
format('woff'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Semibold.otf?_default_font=1&v=2)
format('opentype');
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'TikTokDisplayFont';
src: url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Bold.woff2?_default_font=1&v=2)
format('woff2'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Bold.woff?_default_font=1&v=2)
format('woff'),
url(https://sf16-website-login.neutral.ttwstatic.com/obj/tiktok_web_login_static/tiktok_fonts/TikTokDisplayFont-Bold.otf?_default_font=1&v=2)
format('opentype');
font-weight: bold;
font-style: normal;
font-display: fallback;
}
:root {
--tux-web-font-display: 'TikTokDisplayFont', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Roboto', 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--tux-web-font-body: 'TikTokFont', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Roboto', 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-family: 'TikTokFont', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Roboto', 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-family: var(--tux-web-font-body);
line-height: 1.3;
color: rgba(0, 0, 0, 1);
color: var(--ui-text-1);
}
/* Whenever the color scheme is set, re-apply the default text color. */
[data-tux-color-scheme] {
color: rgba(0, 0, 0, 1);
color: var(--ui-text-1);
}
/** TUX preset typography token */
.H1-Regular,
.H1-Medium,
.H1-Bold {
font-size: 24px;
line-height: 1.25em;
letter-spacing: 0.01em;
font-family: 'TikTokDisplayFont', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Roboto', 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-family: var(--tux-web-font-display);
}
.H1-Regular {
font-weight: normal;
}
.H1-Medium {
font-weight: 500;
}
.H1-Bold {
font-weight: bold;
}
.H2-Regular,
.H2-Medium,
.H2-Bold {
font-size: 20px;
line-height: 1.25em;
letter-spacing: 0.02em;
font-family: 'TikTokDisplayFont', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, 'Roboto', 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-family: var(--tux-web-font-display);
}
.H2-Regular {
font-weight: normal;
}
.H2-Medium {
font-weight: 500;
}
.H2-Bold {
font-weight: bold;
}
.H3-Regular,
.H3-Medium,
.H3-Bold {
font-size: 17px;
line-height: 1.3em;
letter-spacing: -0.0046em;
}
.H3-Regular {
font-weight: normal;
}
.H3-Medium {
font-weight: 500;
}
.H3-Bold {
font-weight: bold;
}
.H4-Regular,
.H4-Medium,
.H4-Bold {
font-size: 15px;
line-height: 1.3em;
letter-spacing: 0.004em;
}
.H4-Regular {
font-weight: normal;
}
.H4-Medium {
font-weight: 500;
}
.H4-Bold {
font-weight: bold;
}
.P1-Regular,
.P1-Medium,
.P1-Bold {
font-size: 14px;
line-height: 1.3em;
letter-spacing: 0.0067em;
}
.P1-Regular {
font-weight: normal;
}
.P1-Medium {
font-weight: 500;
}
.P1-Bold {
font-weight: bold;
}
.P2-Regular,
.P2-Medium,
.P2-Bold {
font-size: 13px;
line-height: 1.3em;
letter-spacing: 0.0097em;
}
.P2-Regular {
font-weight: normal;
}
.P2-Medium {
font-weight: 500;
}
.P2-Bold {
font-weight: bold;
}
.P3-Regular,
.P3-Medium,
.P3-Bold {
font-size: 12px;
line-height: 1.3em;
letter-spacing: 0.0134em;
}
.P3-Regular {
font-weight: normal;
}
.P3-Medium {
font-weight: 500;
}
.P3-Bold {
font-weight: bold;
}
.SmallText1-Regular,
.SmallText1-Medium,
.SmallText1-Bold {
font-size: 11px;
line-height: 1.3em;
letter-spacing: 0.0177em;
}
.SmallText1-Regular {
font-weight: normal;
}
.SmallText1-Medium {
font-weight: 500;
}
.SmallText1-Bold {
font-weight: bold;
}
.SmallText2-Regular,
.SmallText2-Medium,
.SmallText2-Bold {
font-size: 10px;
line-height: 1.3em;
letter-spacing: 0.0229em;
}
.SmallText2-Regular {
font-weight: normal;
}
.SmallText2-Medium {
font-weight: 500;
}
.SmallText2-Bold {
font-weight: bold;
}
.Headline-Regular,
.Headline-Medium,
.Headline-Bold {
font-size: 16px;
line-height: 1.3em;
}
.Headline-Regular {
font-weight: normal;
}
.Headline-Medium {
font-weight: 500;
}
.Headline-Bold {
font-weight: bold;
}
.Longform-Regular,
.Longform-Medium,
.Longform-Bold {
font-size: 16px;
line-height: 1.5em;
}
.Longform-Regular {
font-weight: normal;
}
.Longform-Medium {
font-weight: 500;
}
.Longform-Bold {
font-weight: bold;
}
.LargeTitle-Regular,
.LargeTitle-Medium,
.LargeTitle-Bold {
font-size: 32px;
line-height: 1.2em;
}
.LargeTitle-Regular {
font-weight: normal;
}
.LargeTitle-Medium {
font-weight: 500;
}
.LargeTitle-Bold {
font-weight: bold;
}
.radius-control-tiny {
border-radius: 4px;
}
.radius-control-tiny-t {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.radius-control-tiny-r {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.radius-control-tiny-b {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.radius-control-tiny-l {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radius-control-tiny-tl {
border-top-left-radius: 4px;
}
.radius-control-tiny-tr {
border-top-right-radius: 4px;
}
.radius-control-tiny-br {
border-bottom-right-radius: 4px;
}
.radius-control-tiny-bl {
border-bottom-left-radius: 4px;
}
[dir="ltr"] .radius-control-tiny-ss {
border-top-left-radius: 4px;
}
[dir="rtl"] .radius-control-tiny-ss {
border-top-right-radius: 4px;
}
[dir="ltr"] .radius-control-tiny-se {
border-top-right-radius: 4px;
}
[dir="rtl"] .radius-control-tiny-se {
border-top-left-radius: 4px;
}
[dir="ltr"] .radius-control-tiny-es {
border-bottom-left-radius: 4px;
}
[dir="rtl"] .radius-control-tiny-es {
border-bottom-right-radius: 4px;
}
[dir="ltr"] .radius-control-tiny-ee {
border-bottom-right-radius: 4px;
}
[dir="rtl"] .radius-control-tiny-ee {
border-bottom-left-radius: 4px;
}
.radius-control-small {
border-radius: 5px;
}
.radius-control-small-t {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.radius-control-small-r {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.radius-control-small-b {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.radius-control-small-l {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.radius-control-small-tl {
border-top-left-radius: 5px;
}
.radius-control-small-tr {
border-top-right-radius: 5px;
}
.radius-control-small-br {
border-bottom-right-radius: 5px;
}
.radius-control-small-bl {
border-bottom-left-radius: 5px;
}
[dir="ltr"] .radius-control-small-ss {
border-top-left-radius: 5px;
}
[dir="rtl"] .radius-control-small-ss {
border-top-right-radius: 5px;
}
[dir="ltr"] .radius-control-small-se {
border-top-right-radius: 5px;
}
[dir="rtl"] .radius-control-small-se {
border-top-left-radius: 5px;
}
[dir="ltr"] .radius-control-small-es {
border-bottom-left-radius: 5px;
}
[dir="rtl"] .radius-control-small-es {
border-bottom-right-radius: 5px;
}
[dir="ltr"] .radius-control-small-ee {
border-bottom-right-radius: 5px;
}
[dir="rtl"] .radius-control-small-ee {
border-bottom-left-radius: 5px;
}
.radius-control-medium {
border-radius: 6px;
}
.radius-control-medium-t {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.radius-control-medium-r {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.radius-control-medium-b {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.radius-control-medium-l {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.radius-control-medium-tl {
border-top-left-radius: 6px;
}
.radius-control-medium-tr {
border-top-right-radius: 6px;
}
.radius-control-medium-br {
border-bottom-right-radius: 6px;
}
.radius-control-medium-bl {
border-bottom-left-radius: 6px;
}
[dir="ltr"] .radius-control-medium-ss {
border-top-left-radius: 6px;
}
[dir="rtl"] .radius-control-medium-ss {
border-top-right-radius: 6px;
}
[dir="ltr"] .radius-control-medium-se {
border-top-right-radius: 6px;
}
[dir="rtl"] .radius-control-medium-se {
border-top-left-radius: 6px;
}
[dir="ltr"] .radius-control-medium-es {
border-bottom-left-radius: 6px;
}
[dir="rtl"] .radius-control-medium-es {
border-bottom-right-radius: 6px;
}
[dir="ltr"] .radius-control-medium-ee {
border-bottom-right-radius: 6px;
}
[dir="rtl"] .radius-control-medium-ee {
border-bottom-left-radius: 6px;
}
.radius-control-large {
border-radius: 8px;
}
.radius-control-large-t {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.radius-control-large-r {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.radius-control-large-b {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.radius-control-large-l {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.radius-control-large-tl {
border-top-left-radius: 8px;
}
.radius-control-large-tr {
border-top-right-radius: 8px;
}
.radius-control-large-br {
border-bottom-right-radius: 8px;
}
.radius-control-large-bl {
border-bottom-left-radius: 8px;
}
[dir="ltr"] .radius-control-large-ss {
border-top-left-radius: 8px;
}
[dir="rtl"] .radius-control-large-ss {
border-top-right-radius: 8px;
}
[dir="ltr"] .radius-control-large-se {
border-top-right-radius: 8px;
}
[dir="rtl"] .radius-control-large-se {
border-top-left-radius: 8px;
}
[dir="ltr"] .radius-control-large-es {
border-bottom-left-radius: 8px;
}
[dir="rtl"] .radius-control-large-es {
border-bottom-right-radius: 8px;
}
[dir="ltr"] .radius-control-large-ee {
border-bottom-right-radius: 8px;
}
[dir="rtl"] .radius-control-large-ee {
border-bottom-left-radius: 8px;
}
.radius-control-old {
border-radius: 2px;
}
.radius-control-old-t {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.radius-control-old-r {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.radius-control-old-b {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
.radius-control-old-l {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.radius-control-old-tl {
border-top-left-radius: 2px;
}
.radius-control-old-tr {
border-top-right-radius: 2px;
}
.radius-control-old-br {
border-bottom-right-radius: 2px;
}
.radius-control-old-bl {
border-bottom-left-radius: 2px;
}
[dir="ltr"] .radius-control-old-ss {
border-top-left-radius: 2px;
}
[dir="rtl"] .radius-control-old-ss {
border-top-right-radius: 2px;
}
[dir="ltr"] .radius-control-old-se {
border-top-right-radius: 2px;
}
[dir="rtl"] .radius-control-old-se {
border-top-left-radius: 2px;
}
[dir="ltr"] .radius-control-old-es {
border-bottom-left-radius: 2px;
}
[dir="rtl"] .radius-control-old-es {
border-bottom-right-radius: 2px;
}
[dir="ltr"] .radius-control-old-ee {
border-bottom-right-radius: 2px;
}
[dir="rtl"] .radius-control-old-ee {
border-bottom-left-radius: 2px;
}
.radius-control-capsule {
border-radius: 9999px;
}
.radius-control-capsule-t {
border-top-left-radius: 9999px;
border-top-right-radius: 9999px;
}
.radius-control-capsule-r {
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
}
.radius-control-capsule-b {
border-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.radius-control-capsule-l {
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
}
.radius-control-capsule-tl {
border-top-left-radius: 9999px;
}
.radius-control-capsule-tr {
border-top-right-radius: 9999px;
}
.radius-control-capsule-br {
border-bottom-right-radius: 9999px;
}
.radius-control-capsule-bl {
border-bottom-left-radius: 9999px;
}
[dir="ltr"] .radius-control-capsule-ss {
border-top-left-radius: 9999px;
}
[dir="rtl"] .radius-control-capsule-ss {
border-top-right-radius: 9999px;
}
[dir="ltr"] .radius-control-capsule-se {
border-top-right-radius: 9999px;
}
[dir="rtl"] .radius-control-capsule-se {
border-top-left-radius: 9999px;
}
[dir="ltr"] .radius-control-capsule-es {
border-bottom-left-radius: 9999px;
}
[dir="rtl"] .radius-control-capsule-es {
border-bottom-right-radius: 9999px;
}
[dir="ltr"] .radius-control-capsule-ee {
border-bottom-right-radius: 9999px;
}
[dir="rtl"] .radius-control-capsule-ee {
border-bottom-left-radius: 9999px;
}
.radius-content-tiny {
border-radius: 4px;
}
.radius-content-tiny-t {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.radius-content-tiny-r {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.radius-content-tiny-b {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.radius-content-tiny-l {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.radius-content-tiny-tl {
border-top-left-radius: 4px;
}
.radius-content-tiny-tr {
border-top-right-radius: 4px;
}
.radius-content-tiny-br {
border-bottom-right-radius: 4px;
}
.radius-content-tiny-bl {
border-bottom-left-radius: 4px;
}
[dir="ltr"] .radius-content-tiny-ss {
border-top-left-radius: 4px;
}
[dir="rtl"] .radius-content-tiny-ss {
border-top-right-radius: 4px;
}
[dir="ltr"] .radius-content-tiny-se {
border-top-right-radius: 4px;
}
[dir="rtl"] .radius-content-tiny-se {
border-top-left-radius: 4px;
}
[dir="ltr"] .radius-content-tiny-es {
border-bottom-left-radius: 4px;
}
[dir="rtl"] .radius-content-tiny-es {
border-bottom-right-radius: 4px;
}
[dir="ltr"] .radius-content-tiny-ee {
border-bottom-right-radius: 4px;
}
[dir="rtl"] .radius-content-tiny-ee {
border-bottom-left-radius: 4px;
}
.radius-content-small {
border-radius: 5px;
}
.radius-content-small-t {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.radius-content-small-r {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.radius-content-small-b {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.radius-content-small-l {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.radius-content-small-tl {
border-top-left-radius: 5px;
}
.radius-content-small-tr {
border-top-right-radius: 5px;
}
.radius-content-small-br {
border-bottom-right-radius: 5px;
}
.radius-content-small-bl {
border-bottom-left-radius: 5px;
}
[dir="ltr"] .radius-content-small-ss {
border-top-left-radius: 5px;
}
[dir="rtl"] .radius-content-small-ss {
border-top-right-radius: 5px;
}
[dir="ltr"] .radius-content-small-se {
border-top-right-radius: 5px;
}
[dir="rtl"] .radius-content-small-se {
border-top-left-radius: 5px;
}
[dir="ltr"] .radius-content-small-es {
border-bottom-left-radius: 5px;
}
[dir="rtl"] .radius-content-small-es {
border-bottom-right-radius: 5px;
}
[dir="ltr"] .radius-content-small-ee {
border-bottom-right-radius: 5px;
}
[dir="rtl"] .radius-content-small-ee {
border-bottom-left-radius: 5px;
}
.radius-content-medium {
border-radius: 6px;
}
.radius-content-medium-t {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.radius-content-medium-r {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.radius-content-medium-b {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.radius-content-medium-l {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.radius-content-medium-tl {
border-top-left-radius: 6px;
}
.radius-content-medium-tr {
border-top-right-radius: 6px;
}
.radius-content-medium-br {
border-bottom-right-radius: 6px;
}
.radius-content-medium-bl {
border-bottom-left-radius: 6px;
}
[dir="ltr"] .radius-content-medium-ss {
border-top-left-radius: 6px;
}
[dir="rtl"] .radius-content-medium-ss {
border-top-right-radius: 6px;
}
[dir="ltr"] .radius-content-medium-se {
border-top-right-radius: 6px;
}
[dir="rtl"] .radius-content-medium-se {
border-top-left-radius: 6px;
}
[dir="ltr"] .radius-content-medium-es {
border-bottom-left-radius: 6px;
}
[dir="rtl"] .radius-content-medium-es {
border-bottom-right-radius: 6px;
}
[dir="ltr"] .radius-content-medium-ee {
border-bottom-right-radius: 6px;
}
[dir="rtl"] .radius-content-medium-ee {
border-bottom-left-radius: 6px;
}
.radius-content-large {
border-radius: 8px;
}
.radius-content-large-t {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.radius-content-large-r {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.radius-content-large-b {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.radius-content-large-l {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.radius-content-large-tl {
border-top-left-radius: 8px;
}
.radius-content-large-tr {
border-top-right-radius: 8px;
}
.radius-content-large-br {
border-bottom-right-radius: 8px;
}
.radius-content-large-bl {
border-bottom-left-radius: 8px;
}
[dir="ltr"] .radius-content-large-ss {
border-top-left-radius: 8px;
}
[dir="rtl"] .radius-content-large-ss {
border-top-right-radius: 8px;
}
[dir="ltr"] .radius-content-large-se {
border-top-right-radius: 8px;
}
[dir="rtl"] .radius-content-large-se {
border-top-left-radius: 8px;
}
[dir="ltr"] .radius-content-large-es {
border-bottom-left-radius: 8px;
}
[dir="rtl"] .radius-content-large-es {
border-bottom-right-radius: 8px;
}
[dir="ltr"] .radius-content-large-ee {
border-bottom-right-radius: 8px;
}
[dir="rtl"] .radius-content-large-ee {
border-bottom-left-radius: 8px;
}
.radius-containerslevel0-small {
border-radius: 8px;
}
.radius-containerslevel0-small-t {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.radius-containerslevel0-small-r {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.radius-containerslevel0-small-b {
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.radius-containerslevel0-small-l {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.radius-containerslevel0-small-tl {
border-top-left-radius: 8px;
}
.radius-containerslevel0-small-tr {
border-top-right-radius: 8px;
}
.radius-containerslevel0-small-br {
border-bottom-right-radius: 8px;
}
.radius-containerslevel0-small-bl {
border-bottom-left-radius: 8px;
}
[dir="ltr"] .radius-containerslevel0-small-ss {
border-top-left-radius: 8px;
}
[dir="rtl"] .radius-containerslevel0-small-ss {
border-top-right-radius: 8px;
}
[dir="ltr"] .radius-containerslevel0-small-se {
border-top-right-radius: 8px;
}
[dir="rtl"] .radius-containerslevel0-small-se {
border-top-left-radius: 8px;
}
[dir="ltr"] .radius-containerslevel0-small-es {
border-bottom-left-radius: 8px;
}
[dir="rtl"] .radius-containerslevel0-small-es {
border-bottom-right-radius: 8px;
}
[dir="ltr"] .radius-containerslevel0-small-ee {
border-bottom-right-radius: 8px;
}
[dir="rtl"] .radius-containerslevel0-small-ee {
border-bottom-left-radius: 8px;
}
.radius-containerslevel1-small {
border-radius: 10px;
}
.radius-containerslevel1-small-t {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.radius-containerslevel1-small-r {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.radius-containerslevel1-small-b {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.radius-containerslevel1-small-l {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.radius-containerslevel1-small-tl {
border-top-left-radius: 10px;
}
.radius-containerslevel1-small-tr {
border-top-right-radius: 10px;
}
.radius-containerslevel1-small-br {
border-bottom-right-radius: 10px;
}
.radius-containerslevel1-small-bl {
border-bottom-left-radius: 10px;
}
[dir="ltr"] .radius-containerslevel1-small-ss {
border-top-left-radius: 10px;
}
[dir="rtl"] .radius-containerslevel1-small-ss {
border-top-right-radius: 10px;
}
[dir="ltr"] .radius-containerslevel1-small-se {
border-top-right-radius: 10px;
}
[dir="rtl"] .radius-containerslevel1-small-se {
border-top-left-radius: 10px;
}
[dir="ltr"] .radius-containerslevel1-small-es {
border-bottom-left-radius: 10px;
}
[dir="rtl"] .radius-containerslevel1-small-es {
border-bottom-right-radius: 10px;
}
[dir="ltr"] .radius-containerslevel1-small-ee {
border-bottom-right-radius: 10px;
}
[dir="rtl"] .radius-containerslevel1-small-ee {
border-bottom-left-radius: 10px;
}
.radius-containerslevel2-small {
border-radius: 12px;
}
.radius-containerslevel2-small-t {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.radius-containerslevel2-small-r {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.radius-containerslevel2-small-b {
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
.radius-containerslevel2-small-l {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.radius-containerslevel2-small-tl {
border-top-left-radius: 12px;
}
.radius-containerslevel2-small-tr {
border-top-right-radius: 12px;
}
.radius-containerslevel2-small-br {
border-bottom-right-radius: 12px;
}
.radius-containerslevel2-small-bl {
border-bottom-left-radius: 12px;
}
[dir="ltr"] .radius-containerslevel2-small-ss {
border-top-left-radius: 12px;
}
[dir="rtl"] .radius-containerslevel2-small-ss {
border-top-right-radius: 12px;
}
[dir="ltr"] .radius-containerslevel2-small-se {
border-top-right-radius: 12px;
}
[dir="rtl"] .radius-containerslevel2-small-se {
border-top-left-radius: 12px;
}
[dir="ltr"] .radius-containerslevel2-small-es {
border-bottom-left-radius: 12px;
}
[dir="rtl"] .radius-containerslevel2-small-es {
border-bottom-right-radius: 12px;
}
[dir="ltr"] .radius-containerslevel2-small-ee {
border-bottom-right-radius: 12px;
}
[dir="rtl"] .radius-containerslevel2-small-ee {
border-bottom-left-radius: 12px;
}
.radius-containerslevel0-large {
border-radius: 10px;
}
.radius-containerslevel0-large-t {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.radius-containerslevel0-large-r {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.radius-containerslevel0-large-b {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.radius-containerslevel0-large-l {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.radius-containerslevel0-large-tl {
border-top-left-radius: 10px;
}
.radius-containerslevel0-large-tr {
border-top-right-radius: 10px;
}
.radius-containerslevel0-large-br {
border-bottom-right-radius: 10px;
}
.radius-containerslevel0-large-bl {
border-bottom-left-radius: 10px;
}
[dir="ltr"] .radius-containerslevel0-large-ss {
border-top-left-radius: 10px;
}
[dir="rtl"] .radius-containerslevel0-large-ss {
border-top-right-radius: 10px;
}
[dir="ltr"] .radius-containerslevel0-large-se {
border-top-right-radius: 10px;
}
[dir="rtl"] .radius-containerslevel0-large-se {
border-top-left-radius: 10px;
}
[dir="ltr"] .radius-containerslevel0-large-es {
border-bottom-left-radius: 10px;
}
[dir="rtl"] .radius-containerslevel0-large-es {
border-bottom-right-radius: 10px;
}
[dir="ltr"] .radius-containerslevel0-large-ee {
border-bottom-right-radius: 10px;
}
[dir="rtl"] .radius-containerslevel0-large-ee {
border-bottom-left-radius: 10px;
}
.radius-containerslevel1-large {
border-radius: 12px;
}
.radius-containerslevel1-large-t {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.radius-containerslevel1-large-r {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.radius-containerslevel1-large-b {
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
.radius-containerslevel1-large-l {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.radius-containerslevel1-large-tl {
border-top-left-radius: 12px;
}
.radius-containerslevel1-large-tr {
border-top-right-radius: 12px;
}
.radius-containerslevel1-large-br {
border-bottom-right-radius: 12px;
}
.radius-containerslevel1-large-bl {
border-bottom-left-radius: 12px;
}
[dir="ltr"] .radius-containerslevel1-large-ss {
border-top-left-radius: 12px;
}
[dir="rtl"] .radius-containerslevel1-large-ss {
border-top-right-radius: 12px;
}
[dir="ltr"] .radius-containerslevel1-large-se {
border-top-right-radius: 12px;
}
[dir="rtl"] .radius-containerslevel1-large-se {
border-top-left-radius: 12px;
}
[dir="ltr"] .radius-containerslevel1-large-es {
border-bottom-left-radius: 12px;
}
[dir="rtl"] .radius-containerslevel1-large-es {
border-bottom-right-radius: 12px;
}
[dir="ltr"] .radius-containerslevel1-large-ee {
border-bottom-right-radius: 12px;
}
[dir="rtl"] .radius-containerslevel1-large-ee {
border-bottom-left-radius: 12px;
}
.radius-containerslevel2-large {
border-radius: 14px;
}
.radius-containerslevel2-large-t {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.radius-containerslevel2-large-r {
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
}
.radius-containerslevel2-large-b {
border-bottom-right-radius: 14px;
border-bottom-left-radius: 14px;
}
.radius-containerslevel2-large-l {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
.radius-containerslevel2-large-tl {
border-top-left-radius: 14px;
}
.radius-containerslevel2-large-tr {
border-top-right-radius: 14px;
}
.radius-containerslevel2-large-br {
border-bottom-right-radius: 14px;
}
.radius-containerslevel2-large-bl {
border-bottom-left-radius: 14px;
}
[dir="ltr"] .radius-containerslevel2-large-ss {
border-top-left-radius: 14px;
}
[dir="rtl"] .radius-containerslevel2-large-ss {
border-top-right-radius: 14px;
}
[dir="ltr"] .radius-containerslevel2-large-se {
border-top-right-radius: 14px;
}
[dir="rtl"] .radius-containerslevel2-large-se {
border-top-left-radius: 14px;
}
[dir="ltr"] .radius-containerslevel2-large-es {
border-bottom-left-radius: 14px;
}
[dir="rtl"] .radius-containerslevel2-large-es {
border-bottom-right-radius: 14px;
}
[dir="ltr"] .radius-containerslevel2-large-ee {
border-bottom-right-radius: 14px;
}
[dir="rtl"] .radius-containerslevel2-large-ee {
border-bottom-left-radius: 14px;
}
.TUXToastProvider-topOutlet {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column-reverse;
padding-top: 4px;
align-items: center;
pointer-events: none;
}
.TUXToastProvider-topOutlet > * + * {
margin-bottom: 4px;
}
.TUXToastProvider-bottomOutletContainer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.TUXToastProvider-bottomOutlet {
display: flex;
flex-direction: column;
padding-bottom: 4px;
align-items: center;
pointer-events: none;
}
.TUXToastProvider-bottomOutlet > * + * {
margin-top: 4px;
}
.TUXToastProvider-noticeOutlet {
display: flex;
flex-direction: column;
padding-bottom: 4px;
align-items: center;
pointer-events: none;
}
.TUXToastProvider-noticeOutlet > * + * {
margin-top: 4px;
}
.TUXToastProvider-center-outlet {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
pointer-events: none;
}
.TUXToast {
display: flex;
justify-content: center;
transition: opacity 0.2s ease-out;
opacity: 1;
pointer-events: auto;
}
.TUXToast--top--entered {
animation: TUXToast-top-enter 0.2s ease-in;
}
.TUXToast--top--exiting {
opacity: 0;
}
.TUXToast--bottom--entered {
animation: TUXToast-bottom-enter 0.2s ease-in;
}
.TUXToast--bottom--exiting {
opacity: 0;
}
.TUXToast--center--entered {
animation: TUXToast-center-enter 0.2s linear;
}
.TUXToast--center--exiting {
animation: TUXToast-center-exit 0.2s linear;
}
@keyframes TUXToast-top-enter {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes TUXToast-bottom-enter {
from {
opacity: 0;
transform: translateY(+100%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes TUXToast-center-enter {
from {
opacity: 0;
scale: 0.8;
}
to {
opacity: 1;
scale: 1;
}
}
@keyframes TUXToast-center-exit {
from {
opacity: 1;
scale: 1;
}
to {
opacity: 0;
scale: 0.8;
}
}
.TUXText {
font-style: normal;
font-weight: inherit;
}
.TUXText--weight-normal {
font-weight: 400;
}
.TUXText--weight-medium {
font-weight: 500;
}
.TUXText--weight-bold {
font-weight: 700;
}
.TUXText--tiktok-sans {
font-family: var(--tux-web-font-body);
}
.TUXText--tiktok-display {
font-family: var(--tux-web-font-display);
}
.TUXText--underline {
text-decoration: underline;
}
.TUXText--strikethrough {
text-decoration: line-through;
}
.TUXText--underline-strikethrough {
text-decoration: line-through underline;
}
.TUXText--truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXText--italic {
font-style: italic;
}
[dir="ltr"] .TUXText--align-start {
text-align: left;
}
[dir="rtl"] .TUXText--align-start {
text-align: right;
}
[dir="ltr"] .TUXText--align-end {
text-align: right;
}
[dir="rtl"] .TUXText--align-end {
text-align: left;
}
.TUXText--align-center {
text-align: center;
}
.TUXBottomToast {
width: 360px;
min-height: 44px;
display: flex;
align-items: center;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
background-color: var(--ui-sheet-flat-3);
color: var(--ui-text-1);
border-radius: 12px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
}
[dir="ltr"] .TUXBottomToast-leading {
margin-right: 8px;
}
[dir="rtl"] .TUXBottomToast-leading {
margin-left: 8px;
}
.TUXBottomToast-leading {
display: flex;
align-items: center;
font-size: 20px;
}
.TUXBottomToast-content {
flex: 1;
}
[dir="ltr"] .TUXBottomToast-trailing {
margin-left: 8px;
}
[dir="rtl"] .TUXBottomToast-trailing {
margin-right: 8px;
}
.TUXBottomToast-trailing {
display: flex;
align-items: center;
font-size: 20px;
}
.TUXTopToast {
max-width: 360px;
display: flex;
align-items: center;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
background-color: var(--ui-sheet-flat-3);
color: var(--ui-text-1);
border-radius: 12px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
pointer-events: auto;
}
[dir="ltr"] .TUXTopToast-leading {
margin-right: 8px;
}
[dir="rtl"] .TUXTopToast-leading {
margin-left: 8px;
}
.TUXTopToast-leading {
display: flex;
align-items: center;
font-size: 16px;
}
.TUXTopToast-content {
flex: 1;
}
.TUXUnstyledButton {
all: unset;
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
}
.TUXUnstyledButton.focus-visible {
outline: 2px solid var(--ui-shape-neutral);
outline-offset: 2px;
}
.TUXUnstyledButton:focus-visible {
outline: 2px solid var(--ui-shape-neutral);
outline-offset: 2px;
}
[dir="ltr"] .TUXFloatingNotice {
padding-left: 16px;
}
[dir="rtl"] .TUXFloatingNotice {
padding-right: 16px;
}
[dir="ltr"] .TUXFloatingNotice {
padding-right: 40px;
}
[dir="rtl"] .TUXFloatingNotice {
padding-left: 40px;
}
.TUXFloatingNotice {
position: relative;
width: 360px;
min-height: 44px;
display: flex;
align-items: center;
padding-top: 12px;
padding-bottom: 12px; /* 12 + (close button width)24 + 4 */
background-color: var(--ui-sheet-flat-1);
color: var(--ui-text-1);
border-radius: 12px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.12);
transition: opacity 0.2s ease-out;
/* use an animation for the entry instead of a transition to avoid needing a state update in order to trigger a transition */
animation: TUXFloatingNotice-enter 0.2s ease-in;
pointer-events: auto;
}
.TUXFloatingNotice[data-transition-status='exiting'] {
opacity: 0;
}
.TUXFloatingNotice[data-transition-status='entered'] {
opacity: 1;
}
.TUXFloatingNotice-content {
flex: 1;
}
.TUXFloatingNotice-closeButton {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
/* Position in the corner */
position: absolute;
top: 10px;
right: 12px;
}
/* TODO: logical property inset-inline-end doesn't seem to be supported by postcss, we we will do this instead */
.TUXFloatingNotice[data-text-direction='rtl'] .TUXFloatingNotice-closeButton {
right: unset;
left: 12px;
}
@keyframes TUXFloatingNotice-enter {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.TUXCenterToast-container {
max-width: 260px;
max-height: 480px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: var(--ui-sheet-flat-3);
position: relative;
}
.TUXCenterToastButton {
position: absolute;
top: 4px;
right: 4px;
}
.TUXCenterToastButton[data-text-direction='rtl'] {
right: unset;
left: 4px;
}
.TUXCenterToast-icon {
font-size: 32px;
padding: 8px;
color: var(--ui-image-overlay-white);
}
.TUXCenterToast-text {
text-align: center;
color: var(--ui-text-1);
}
.TUXLoading-container {
display: flex;
align-items: center;
justify-content: center;
}
.TUXLoading-blackhole {
fill: rgb(15, 15, 15);
stroke-width: 0;
animation: greenAnimation 910ms linear infinite;
}
.TUXLoading-greenhole {
fill: rgb(58, 242, 255);
stroke: rgb(58, 242, 255);
animation: greenAnimation 910ms linear infinite;
}
.TUXLoading-redhole {
fill: rgb(255, 44, 85);
stroke: rgb(255, 44, 85);
animation: redAnimation 910ms linear infinite;
}
.TUXLoading-greenhole--isBlack,
.TUXLoading-redhole--isBlack {
fill: black;
}
@keyframes greenAnimation {
0% {
cx: 17%;
r: 17%;
}
10% {
cx: 18%;
r: 17%;
}
13.3% {
cx: 19.5%;
r: 17.8%;
}
16.7% {
cx: 21.5%;
r: 18.5%;
}
20% {
cx: 24%;
r: 20%;
}
23.3% {
cx: 30%;
r: 21.5%;
}
26.7% {
cx: 42%;
r: 21.5%;
}
30% {
cx: 46.5%;
r: 19.8%;
}
33.3% {
cx: 49.5%;
r: 18.2%;
}
36.7% {
cx: 50.5%;
r: 17.8%;
}
40% {
cx: 51.5%;
r: 17.2%;
}
43.3% {
cx: 53%;
r: 17%;
}
56.7% {
cx: 53%;
r: 17%;
}
60% {
cx: 52%;
r: 17%;
}
63.3% {
cx: 51%;
r: 16%;
}
66.7% {
cx: 49%;
r: 15%;
}
70% {
cx: 46.5%;
r: 12.8%;
}
73.3% {
cx: 41.5%;
r: 11.2%;
}
76.7% {
cx: 28.5%;
r: 11.2%;
}
80% {
cx: 24%;
r: 13%;
}
83.3% {
cx: 21%;
r: 15%;
}
86.7% {
cx: 19%;
r: 16%;
}
90% {
cx: 18%;
r: 17%;
}
100% {
cx: 17%;
r: 17%;
}
}
@keyframes redAnimation {
0% {
cx: 53%;
r: 17%;
}
6.7% {
cx: 52.5%;
r: 17%;
}
10% {
cx: 51.8%;
r: 16.9%;
}
13.3% {
cx: 51%;
r: 16%;
}
16.7% {
cx: 49%;
r: 15%;
}
20% {
cx: 46%;
r: 13%;
}
23.3% {
cx: 41.5%;
r: 11.2%;
}
26.7% {
cx: 28.5%;
r: 11.2%;
}
30% {
cx: 24%;
r: 13%;
}
33.3% {
cx: 21%;
r: 15%;
}
36.7% {
cx: 19%;
r: 16%;
}
40% {
cx: 18%;
r: 16.5%;
}
43.3% {
cx: 17%;
r: 17%;
}
53.3% {
cx: 17%;
r: 17%;
}
56.7% {
cx: 17.5%;
r: 17.2%;
}
60% {
cx: 18.5%;
r: 17.2%;
}
63.3% {
cx: 19.5%;
r: 17.8%;
}
66.7% {
cx: 21%;
r: 18%;
}
70% {
cx: 23.5%;
r: 19.8%;
}
73.3% {
cx: 28%;
r: 21%;
}
76.7% {
cx: 42%;
r: 21%;
}
80% {
cx: 46.5%;
r: 19.8%;
}
83.3% {
cx: 49%;
r: 18%;
}
86.7% {
cx: 50%;
r: 17.5%;
}
90% {
cx: 51.5%;
r: 17.2%;
}
93.3% {
cx: 52.5%;
r: 17.2%;
}
100% {
cx: 53%;
r: 17%;
}
}
.TUXLoadingSpinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.TUXLoadingSpinner {
transform-origin: center;
animation: spinner_rotation 1s infinite linear;
}
@keyframes spinner_rotation {
100% {
transform: rotate(360deg);
}
}
.TUXLoadingCircle-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.TUXLoadingCircle-svgContainer {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.TUXLoadingCircle {
transform-origin: center;
transform: rotate(-90deg);
}
.TUXLoadingCircle-progress {
position: absolute;
}
.TUXLoadingCircle-label {
margin-top: 8px;
}
.TUXLoadingCircle-progress--xsmall,
.TUXLoadingCircle-label--xsmall {
font-size: 8px;
}
.TUXLoadingCircle-progress--small,
.TUXLoadingCircle-label--small {
font-size: 10px;
}
.TUXLoadingCircle-progress--medium,
.TUXLoadingCircle-label--medium {
font-size: 12px;
}
.TUXLoadingCircle-progress--large,
.TUXLoadingCircle-label--large {
font-size: 14px;
}
.TUXLoadingToast-overlay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px;
transition: opacity 120ms cubic-bezier(0.33, 0.86, 0.2, 1);
opacity: 0;
}
.TUXLoadingToast-overlay[data-transition-status='initial'],
.TUXLoadingToast-overlay[data-transition-status='close'] {
opacity: 0;
}
.TUXLoadingToast-overlay[data-transition-status='open'] {
opacity: 1;
}
.TUXButton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
border: none;
font-family: var(--tux-web-font-body);
font-weight: 500;
letter-spacing: 0.15px;
cursor: pointer;
}
.TUXButton.focus-visible {
outline: 2px solid var(--ui-shape-neutral);
outline-offset: 2px;
}
.TUXButton:focus-visible {
outline: 2px solid var(--ui-shape-neutral);
outline-offset: 2px;
}
.TUXButton--disabled:not(.TUXButton--loading) {
cursor: not-allowed;
opacity: 0.4;
}
button.TUXButton--primary {
background-color: var(--ui-shape-primary);
color: var(--ui-shape-text-1-on-primary);
}
@media (hover: hover) {
.TUXButton--primary:hover:not(.TUXButton--disabled) {
background-color: rgba(234, 40, 78, 1);
}
.TUXButton--secondary:hover:not(.TUXButton--disabled) {
background-color: var(--ui-shape-neutral-3);
}
.TUXButton--borderless:hover:not(.TUXButton--disabled) {
background-color: transparent; /* overwrite non-borderless hover style */
color: rgba(234, 40, 78, 1);
}
}
.TUXButton--primary:active:not(.TUXButton--disabled) {
background-color: rgba(224, 39, 75, 1);
}
button.TUXButton--secondary {
background-color: var(--ui-shape-neutral-4);
color: var(--ui-text-1);
}
.TUXButton--secondary:active:not(.TUXButton--disabled) {
background-color: rgba(0, 0, 0, 0.14);
}
.TUXButton--primary.TUXButton--borderless {
background-color: transparent;
color: var(--ui-text-primary-display);
}
.TUXButton--secondary.TUXButton--borderless {
background-color: transparent;
color: var(--ui-text-1);
}
.TUXButton--borderless:active:not(.TUXButton--disabled) {
background-color: transparent; /* overwrite non-borderless active style */
color: rgba(224, 39, 75, 1);
}
.TUXButton--xsmall {
height: 28px;
min-width: 80px;
padding-left: 8px;
padding-right: 8px;
border-radius: 4px;
font-size: 14px;
line-height: 18px;
}
.TUXButton--small {
height: 32px;
min-width: 96px;
padding-left: 12px;
padding-right: 12px;
border-radius: 5px;
font-size: 15px;
line-height: 19px;
}
.TUXButton--medium {
height: 40px;
min-width: 108px;
padding-left: 16px;
padding-right: 16px;
border-radius: 6px;
font-size: 16px;
line-height: 21px;
}
.TUXButton--large {
height: 48px;
min-width: 124px;
padding-left: 24px;
padding-right: 24px;
border-radius: 8px;
font-size: 16px;
line-height: 21px;
}
.TUXButton--borderless {
padding-left: 0;
padding-right: 0;
min-width: 0;
}
.TUXButton--capsule {
border-radius: 999px;
}
.TUXButton-content {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.TUXButton--loading .TUXButton-content {
visibility: hidden;
}
[dir="ltr"] .TUXButton--xsmall .TUXButton-content > * + *,[dir="ltr"]
.TUXButton--small .TUXButton-content > * + * {
margin-left: 5px;
}
[dir="rtl"] .TUXButton--xsmall .TUXButton-content > * + *,[dir="rtl"]
.TUXButton--small .TUXButton-content > * + * {
margin-right: 5px;
}
[dir="ltr"] .TUXButton--medium .TUXButton-content > * + *,[dir="ltr"]
.TUXButton--large .TUXButton-content > * + * {
margin-left: 5.5px;
}
[dir="rtl"] .TUXButton--medium .TUXButton-content > * + *,[dir="rtl"]
.TUXButton--large .TUXButton-content > * + * {
margin-right: 5.5px;
}
.TUXButton-iconContainer {
display: flex; /* helps center the icon vertically */
flex-shrink: 0;
}
.TUXButton--xsmall .TUXButton-iconContainer {
font-size: 15px;
}
.TUXButton--small .TUXButton-iconContainer {
font-size: 17px;
}
.TUXButton--medium .TUXButton-iconContainer,
.TUXButton--large .TUXButton-iconContainer {
font-size: 19px;
}
.TUXButton-label {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.TUXButton-spinner {
position: absolute;
}
.TUXButton--xsmall .TUXButton-spinner {
font-size: 15px;
}
.TUXButton--small .TUXButton-spinner {
font-size: 17px;
}
.TUXButton--medium .TUXButton-spinner,
.TUXButton--large .TUXButton-spinner {
font-size: 19px;
}
.TUXSwitch {
display: flex;
align-items: flex-start;
}
.TUXSwitch-labelContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
font-family: var(--tux-web-font-body);
font-weight: 400;
line-height: 1.3;
word-wrap: break-word;
}
.TUXSwitch[data-size='small'] .TUXSwitch-labelContainer {
padding-top: 3px; /* align vertically with the indicator */
}
[dir="ltr"] .TUXSwitch[data-size='small'][data-label-position='before'] .TUXSwitch-labelContainer {
margin-right: 8px;
}
[dir="rtl"] .TUXSwitch[data-size='small'][data-label-position='before'] .TUXSwitch-labelContainer {
margin-left: 8px;
}
[dir="ltr"] .TUXSwitch[data-size='small'][data-label-position='after'] .TUXSwitch-labelContainer {
margin-left: 8px;
}
[dir="rtl"] .TUXSwitch[data-size='small'][data-label-position='after'] .TUXSwitch-labelContainer {
margin-right: 8px;
}
.TUXSwitch[data-size='medium'] .TUXSwitch-labelContainer {
padding-top: 3px; /* align vertically with the indicator */
}
[dir="ltr"] .TUXSwitch[data-size='medium'][data-label-position='before'] .TUXSwitch-labelContainer {
margin-right: 10px;
}
[dir="rtl"] .TUXSwitch[data-size='medium'][data-label-position='before'] .TUXSwitch-labelContainer {
margin-left: 10px;
}
[dir="ltr"] .TUXSwitch[data-size='medium'][data-label-position='after'] .TUXSwitch-labelContainer {
margin-left: 10px;
}
[dir="rtl"] .TUXSwitch[data-size='medium'][data-label-position='after'] .TUXSwitch-labelContainer {
margin-right: 10px;
}
.TUXSwitch[data-disabled='true'] .TUXSwitch-labelContainer {
opacity: 0.4;
}
.TUXSwitch-label {
display: flex;
color: var(--ui-text-1);
cursor: pointer;
}
.TUXSwitch[data-disabled='true'] .TUXSwitch-label {
cursor: not-allowed;
}
.TUXSwitch[data-size='small'] .TUXSwitch-label {
font-size: 14px;
}
.TUXSwitch[data-size='medium'] .TUXSwitch-label {
font-size: 17px;
}
.TUXSwitch-description {
margin-top: 4px;
color: var(--ui-text-2);
font-size: 13px;
}
.TUXSwitch-inputContainer {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.TUXSwitch[data-size='small'] .TUXSwitch-inputContainer {
width: 38px;
height: 22px;
}
.TUXSwitch[data-size='medium'] .TUXSwitch-inputContainer {
width: 48px;
height: 28px;
}
.TUXSwitch[data-disabled='true']:not([data-loading='true']) .TUXSwitch-inputContainer {
cursor: not-allowed;
opacity: 0.4;
}
.TUXSwitch-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
outline: none;
display: flex;
height: 100%;
width: 100%;
margin: 0;
align-items: center;
border-radius: 999px;
background-color: var(--ui-shape-neutral-3);
cursor: pointer;
}
.TUXSwitch-input.focus-visible {
box-shadow: 0px 0px 0px 2px var(--ui-page-flat-1), 0px 0px 0px 4px var(--ui-shape-neutral);
}
.TUXSwitch-input:focus-visible {
box-shadow: 0px 0px 0px 2px var(--ui-page-flat-1), 0px 0px 0px 4px var(--ui-shape-neutral);
}
.TUXSwitch[data-disabled='true'] .TUXSwitch-input {
cursor: not-allowed;
}
.TUXSwitch-input:checked {
background-color: var(--ui-shape-secondary);
}
.TUXSwitch:not([data-disabled='true']) .TUXSwitch-input:hover {
background-color: var(--ui-shape-neutral-2);
}
.TUXSwitch:not([data-disabled='true']) .TUXSwitch-input:checked:hover {
background-color: rgba(16, 162, 197, 1);
}
.TUXSwitch-handle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 999px;
background-color: #fff;
box-shadow: 0px 0.8px 3px rgba(0, 0, 0, 0.25);
pointer-events: none;
transition: transform 0.2s;
}
.TUXSwitch[data-size='small'] .TUXSwitch-handle {
width: 16px;
height: 16px;
transform: translateX(2px);
}
.TUXSwitch[data-size='small'][data-text-direction='rtl'] .TUXSwitch-handle {
transform: translateX(-2px);
}
.TUXSwitch[data-size='small'] .TUXSwitch-input:checked ~ .TUXSwitch-handle {
transform: translateX(19px);
}
.TUXSwitch[data-size='small'][data-text-direction='rtl'] .TUXSwitch-input:checked ~ .TUXSwitch-handle {
transform: translateX(-19px);
}
.TUXSwitch[data-size='medium'] .TUXSwitch-handle {
width: 22px;
height: 22px;
transform: translateX(3px);
}
.TUXSwitch[data-size='medium'][data-text-direction='rtl'] .TUXSwitch-handle {
transform: translateX(-3px);
}
.TUXSwitch[data-size='medium'] .TUXSwitch-input:checked ~ .TUXSwitch-handle {
transform: translateX(23px);
}
.TUXSwitch[data-size='medium'][data-text-direction='rtl'] .TUXSwitch-input:checked ~ .TUXSwitch-handle {
transform: translateX(-23px);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.TUXSwitch-spinner {
color: rgba(0, 0, 0, 0.25);
animation: spin 1s infinite;
}
.TUXSwitch[data-size='small'] .TUXSwitch-spinner {
font-size: 12px;
}
.TUXSwitch[data-size='medium'] .TUXSwitch-spinner {
font-size: 16px;
}
.TUXCheckboxStandalone {
position: relative;
flex-shrink: 0;
--tux-web-checkbox-standalone-background: var(--ui-shape-primary);
}
.TUXCheckboxStandalone--small {
height: 16px;
width: 16px;
}
.TUXCheckboxStandalone--medium {
height: 24px;
width: 24px;
}
.TUXCheckboxStandalone--medium.TUXCheckboxStandalone--circle {
padding: 1px;
}
.TUXCheckboxStandalone--medium.TUXCheckboxStandalone--square {
padding: 2px;
}
.TUXCheckboxStandalone--disabled {
opacity: 0.4;
}
.TUXCheckboxStandalone--disabled .TUXCheckboxStandalone-indicator {
background-color: var(--ui-shape-neutral-2);
}
.TUXCheckboxStandalone-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
height: 100%;
width: 100%;
cursor: pointer;
border-radius: 5px;
}
.TUXCheckboxStandalone--medium.TUXCheckboxStandalone--square .TUXCheckboxStandalone-input {
height: 20px;
width: 20px;
}
.TUXCheckboxStandalone--medium.TUXCheckboxStandalone--circle .TUXCheckboxStandalone-input {
height: 22px;
width: 22px;
}
.TUXCheckboxStandalone--circle .TUXCheckboxStandalone-input {
border-radius: 50%;
}
.TUXCheckboxStandalone-input.focus-visible {
outline: 2px solid var(--ui-shape-neutral);
}
.TUXCheckboxStandalone-input:focus-visible {
outline: 2px solid var(--ui-shape-neutral);
}
.TUXCheckboxStandalone-input:disabled {
cursor: not-allowed;
}
.TUXCheckboxStandalone-indicator {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ui-shape-text-1-on-primary);
border: 1.5px solid var(--ui-shape-neutral-2);
pointer-events: none;
background-color: transparent;
}
.TUXCheckboxStandalone--small.TUXCheckboxStandalone--square .TUXCheckboxStandalone-indicator {
border-radius: 3px;
}
.TUXCheckboxStandalone--medium.TUXCheckboxStandalone--square .TUXCheckboxStandalone-indicator {
border-radius: 4px;
}
.TUXCheckboxStandalone--circle .TUXCheckboxStandalone-indicator {
border-radius: 50%;
}
.TUXCheckboxStandalone--hasError:not(.TUXCheckboxStandalone--disabled) .TUXCheckboxStandalone-indicator {
border-color: var(--ui-text-danger-display);
}
/* Change background color if hovered or focused */
.TUXCheckboxStandalone-input:not(:disabled):hover + .TUXCheckboxStandalone-indicator,
.TUXCheckboxStandalone-input.focus-visible + .TUXCheckboxStandalone-indicator {
--tux-web-checkbox-standalone-background: rgba(234, 40, 78, 1);
}
.TUXCheckboxStandalone-input:not(:disabled):hover + .TUXCheckboxStandalone-indicator,
.TUXCheckboxStandalone-input:focus-visible + .TUXCheckboxStandalone-indicator {
--tux-web-checkbox-standalone-background: rgba(234, 40, 78, 1);
}
/* Change background color if active */
.TUXCheckboxStandalone-input:not(:disabled):active + .TUXCheckboxStandalone-indicator {
--tux-web-checkbox-standalone-background: rgba(224, 39, 75, 1);
}
/* Fill the background if checked or indeterminate */
.TUXCheckboxStandalone-input:checked ~ .TUXCheckboxStandalone-indicator,
.TUXCheckboxStandalone--indeterminate .TUXCheckboxStandalone-indicator {
border: none;
background-color: var(--tux-web-checkbox-standalone-background);
}
.TUXCheckboxStandalone-checkedIcon {
visibility: hidden;
}
.TUXCheckboxStandalone--small .TUXCheckboxStandalone-checkedIcon {
width: 8px;
}
.TUXCheckboxStandalone--medium .TUXCheckboxStandalone-checkedIcon {
width: 12px;
}
.TUXcheckboxStandalone--small .TUXCheckboxStandalone-indeterminateIcon {
width: 8px;
}
.TUXcheckboxStandalone--medium .TUXCheckboxStandalone-indeterminateIcon {
width: 12px;
}
/* Show the check icon if the input is checked */
.TUXCheckboxStandalone-input:checked ~ .TUXCheckboxStandalone-indicator .TUXCheckboxStandalone-checkedIcon {
visibility: visible;
}
.TUXCheckbox {
display: flex;
align-items: flex-start;
}
.TUXCheckbox-labelContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
font-family: var(--tux-web-font-body);
font-weight: 400;
line-height: 1.3;
word-wrap: break-word;
}
.TUXCheckbox[data-size='small'] .TUXCheckbox-labelContainer {
padding-top: 0px; /* align vertically with the indicator */
}
[dir="ltr"] .TUXCheckbox[data-size='small'][data-label-position='before'] .TUXCheckbox-labelContainer {
margin-right: 8px;
}
[dir="rtl"] .TUXCheckbox[data-size='small'][data-label-position='before'] .TUXCheckbox-labelContainer {
margin-left: 8px;
}
[dir="ltr"] .TUXCheckbox[data-size='small'][data-label-position='after'] .TUXCheckbox-labelContainer {
margin-left: 8px;
}
[dir="rtl"] .TUXCheckbox[data-size='small'][data-label-position='after'] .TUXCheckbox-labelContainer {
margin-right: 8px;
}
.TUXCheckbox[data-size='medium'] .TUXCheckbox-labelContainer {
padding-top: 2px; /* align vertically with the indicator */
}
[dir="ltr"] .TUXCheckbox[data-size='medium'][data-label-position='before'] .TUXCheckbox-labelContainer {
margin-right: 10px;
}
[dir="rtl"] .TUXCheckbox[data-size='medium'][data-label-position='before'] .TUXCheckbox-labelContainer {
margin-left: 10px;
}
[dir="ltr"] .TUXCheckbox[data-size='medium'][data-label-position='after'] .TUXCheckbox-labelContainer {
margin-left: 10px;
}
[dir="rtl"] .TUXCheckbox[data-size='medium'][data-label-position='after'] .TUXCheckbox-labelContainer {
margin-right: 10px;
}
.TUXCheckbox[data-disabled='true'] .TUXCheckbox-labelContainer {
opacity: 0.4;
}
.TUXCheckbox-label {
display: flex;
color: var(--ui-text-1);
cursor: pointer;
}
.TUXCheckbox[data-disabled='true'] .TUXCheckbox-label {
cursor: not-allowed;
}
.TUXCheckbox[data-size='small'] .TUXCheckbox-label {
font-size: 14px;
}
.TUXCheckbox[data-size='medium'] .TUXCheckbox-label {
font-size: 17px;
}
.TUXCheckbox-description {
margin-top: 4px;
color: var(--ui-text-2);
font-size: 13px;
}
.TUXCheckboxGroup-fieldset {
border: none;
padding: 0px;
}
.TUXCheckboxGroup-header {
padding-left: 4px;
padding-right: 4px;
margin-bottom: 8px;
}
.TUXCheckboxGroup-legend {
margin: 0px;
padding: 0px;
}
.TUXCheckboxGroup-description {
margin-top: 4px;
}
.TUXCheckboxGroup-content {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 4px;
padding-right: 4px;
}
.TUXCheckboxGroup-content > * + * {
margin-top: 16px;
}
.TUXCheckboxGroup-error {
margin-top: 8px;
display: flex;
align-items: flex-start;
}
[dir="ltr"] .TUXCheckboxGroup-errorIcon {
margin-right: 4px;
}
[dir="rtl"] .TUXCheckboxGroup-errorIcon {
margin-left: 4px;
}
.TUXCheckboxGroup-errorIcon {
flex-shrink: 0;
margin-top: 2px; /* align vertically with the error text */
}
.TUXRadioStandalone {
display: inline-flex;
position: relative;
width: 16px;
height: 16px;
flex-shrink: 0;
border-radius: 999px;
}
.TUXRadioStandalone--medium {
width: 24px;
height: 24px;
}
.TUXRadioStandalone--checked.TUXRadioStandalone--disabled {
opacity: 0.4;
}
.TUXRadioStandalone-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 100%;
width: 100%;
margin: 0;
cursor: pointer;
border-radius: 50%;
}
.TUXRadioStandalone-input:disabled {
cursor: not-allowed;
}
.TUXRadioStandalone-input.focus-visible {
outline: 2px solid var(--ui-shape-neutral);
}
.TUXRadioStandalone-input:focus-visible {
outline: 2px solid var(--ui-shape-neutral);
}
.TUXRadioStandalone-circleOutside {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
color: var(--ui-shape-neutral-2);
}
/* Light up the outer circle when the input is checked */
.TUXRadioStandalone-input:checked ~ .TUXRadioStandalone-circleOutside {
color: var(--ui-shape-primary);
}
.TUXRadioStandalone-circleInside,
.TUXRadioStandalone-circleDisabled,
.TUXRadioStandalone-check {
position: absolute;
width: 100%;
height: 100%;
color: var(--ui-shape-primary);
pointer-events: none;
visibility: hidden;
}
/* Show up the inner circle/check when the input is checked */
.TUXRadioStandalone-input:checked ~ .TUXRadioStandalone-circleInside,
.TUXRadioStandalone-input:checked ~ .TUXRadioStandalone-check {
visibility: visible;
}
.TUXRadioStandalone-input:disabled ~ .TUXRadioStandalone-circleDisabled {
visibility: visible;
}
.TUXRadio {
display: flex;
align-items: flex-start;
}
.TUXRadio-labelContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
font-family: var(--tux-web-font-body);
font-weight: 400;
line-height: 1.3;
word-wrap: break-word;
}
.TUXRadio[data-size='small'] .TUXRadio-labelContainer {
padding-top: 0px; /* align vertically with the indicator */
}
[dir="ltr"] .TUXRadio[data-size='small'][data-label-position='before'] .TUXRadio-labelContainer {
margin-right: 8px;
}
[dir="rtl"] .TUXRadio[data-size='small'][data-label-position='before'] .TUXRadio-labelContainer {
margin-left: 8px;
}
[dir="ltr"] .TUXRadio[data-size='small'][data-label-position='after'] .TUXRadio-labelContainer {
margin-left: 8px;
}
[dir="rtl"] .TUXRadio[data-size='small'][data-label-position='after'] .TUXRadio-labelContainer {
margin-right: 8px;
}
.TUXRadio[data-size='medium'] .TUXRadio-labelContainer {
padding-top: 2px; /* align vertically with the indicator */
}
[dir="ltr"] .TUXRadio[data-size='medium'][data-label-position='before'] .TUXRadio-labelContainer {
margin-right: 10px;
}
[dir="rtl"] .TUXRadio[data-size='medium'][data-label-position='before'] .TUXRadio-labelContainer {
margin-left: 10px;
}
[dir="ltr"] .TUXRadio[data-size='medium'][data-label-position='after'] .TUXRadio-labelContainer {
margin-left: 10px;
}
[dir="rtl"] .TUXRadio[data-size='medium'][data-label-position='after'] .TUXRadio-labelContainer {
margin-right: 10px;
}
.TUXRadio[data-disabled='true'] .TUXRadio-labelContainer {
opacity: 0.4;
}
.TUXRadio-label {
display: flex;
color: var(--ui-text-1);
cursor: pointer;
}
.TUXRadio[data-disabled='true'] .TUXRadio-label {
cursor: not-allowed;
}
.TUXRadio[data-size='small'] .TUXRadio-label {
font-size: 14px;
}
.TUXRadio[data-size='medium'] .TUXRadio-label {
font-size: 17px;
}
.TUXRadio-description {
margin-top: 4px;
color: var(--ui-text-2);
font-size: 13px;
}
.TUXRadioGroup-fieldset {
border: none;
padding: 0px;
}
.TUXRadioGroup-header {
padding-left: 4px;
padding-right: 4px;
margin-bottom: 8px;
}
.TUXRadioGroup-legend {
margin: 0px;
padding: 0px;
}
.TUXRadioGroup-description {
margin-top: 4px;
}
.TUXRadioGroup-content {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 4px;
padding-right: 4px;
}
.TUXRadioGroup-content > * + * {
margin-top: 16px;
}
.TUXRadioGroup-error {
margin-top: 8px;
display: flex;
align-items: flex-start;
}
[dir="ltr"] .TUXRadioGroup-errorIcon {
margin-right: 4px;
}
[dir="rtl"] .TUXRadioGroup-errorIcon {
margin-left: 4px;
}
.TUXRadioGroup-errorIcon {
flex-shrink: 0;
margin-top: 2px; /* align vertically with the error text */
}
.TUXModal-overlay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px;
background-color: var(--ui-sheet-backdrop-1);
transition: opacity 120ms cubic-bezier(0.33, 0.86, 0.2, 1);
/* This seems to be required for the entry transition to work, even though the sheet should first enter the page in the 'initial' state */
opacity: 0;
/* fix TUXModal scrollable problem on Android devices */
touch-action: none;
}
.TUXModal-overlay[data-transition-status='initial'],
.TUXModal-overlay[data-transition-status='close'] {
opacity: 0;
}
.TUXModal-overlay[data-transition-status='open'] {
opacity: 1;
}
.TUXModal {
position: relative; /* for absolutely positioning the close button */
background-color: var(--ui-sheet-flat-1);
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.12157);
border-radius: 12px;
}
.TUXModal:focus {
outline: none;
}
.TUXModal[data-width='small'] {
width: 100%;
max-width: 360px;
}
.TUXModal[data-width='large'] {
width: 100%;
max-width: 640px;
}
.TUXModalTitle {
font-family: var(--tux-web-font-display);
font-size: 30px;
font-weight: 700;
text-align: center;
}
/* Prefixing with '_' to avoid conflict with tux-h5 */
._TUXNavBar--withBackground {
background: var(--ui-page-flat-1);
}
._TUXNavBar--withBorder {
border-bottom: 1px solid var(--ui-shape-neutral-2);
}
._TUXNavBar-topRow {
display: flex;
align-items: center;
height: 52px;
padding-left: 8px;
padding-right: 8px;
}
._TUXNavBar-titleContainer {
flex: 1;
overflow: hidden; /* allows title to truncate when overflowing */
}
._TUXNavBar-leading {
max-width: 88px; /* space for at most 2 icon buttons */
flex-shrink: 0;
display: flex;
justify-content: flex-start;
}
._TUXNavBar-trailing {
max-width: 88px; /* space for at most 2 icon buttons */
flex-shrink: 0;
display: flex;
justify-content: flex-end;
}
._TUXNavBar-leading--fixed,
._TUXNavBar-trailing--fixed {
width: 88px;
}
.TUXNavBarIconButton {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
height: 44px;
width: 44px;
cursor: pointer;
}
.TUXNavBarTextButton {
height: 44px;
font-size: 16px;
padding-left: 8px;
padding-right: 8px;
cursor: pointer;
}
.TUXNavBarTextButton--primary {
color: var(--ui-shape-primary);
font-weight: 500;
}
.TUXNavBarTextButton--secondary {
color: var(--ui-text-1);
}
.TUXNavBarTextButton:disabled {
color: var(--ui-text-placeholder);
}
[data-tux-color-scheme='system'] .TUXNavBarTextButton:not(:disabled):active {
opacity: 0.2;
}
@media (color-index: 48) {
[data-tux-color-scheme='system'] .TUXNavBarTextButton:not(:disabled):active {
opacity: 0.4;
}
}
@media (color: 48842621) {
[data-tux-color-scheme='system'] .TUXNavBarTextButton:not(:disabled):active {
opacity: 0.4;
}
}
@media (prefers-color-scheme: dark) {
[data-tux-color-scheme='system'] .TUXNavBarTextButton:not(:disabled):active {
opacity: 0.4;
}
}
[data-tux-color-scheme='light'] .TUXNavBarTextButton:not(:disabled):active {
opacity: 0.2;
}
[data-tux-color-scheme='dark'] .TUXNavBarTextButton:not(:disabled):active {
opacity: 0.4;
}
.TUXModalNavBar {
position: relative;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
padding-left: 8px;
padding-right: 8px;
}
.TUXModalNavBar-title {
flex: 1;
text-align: center;
font-size: 17px;
font-weight: 500;
color: var(--ui-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXModalNavBar-leading {
width: 44px; /* space for at most 1 icon buttons */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.TUXModalNavBar-trailing {
width: 44px; /* space for at most 1 icon buttons */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.TUXModalCloseButton {
position: absolute;
/* Position to exactly match where TUXModalNavBar places the close button */
top: 4px;
right: 8px;
}
.TUXModalCloseButton[data-text-direction='rtl'] {
right: unset;
left: 8px;
}
.TUXSheet-overlay {
display: flex;
background-color: var(--ui-sheet-backdrop-1);
transition: opacity 220ms cubic-bezier(0.33, 0.86, 0.2, 1);
/* fix TUXSheet scrollable problem on Android devices */
touch-action: none;
}
.TUXSheet-overlay--portrait {
flex-direction: column;
justify-content: flex-end;
}
.TUXSheet-overlay--landscape-start {
flex-direction: row;
justify-content: flex-start;
}
.TUXSheet-overlay--landscape-end {
flex-direction: row;
justify-content: flex-end;
}
.TUXSheet-overlay[data-transition-status='initial'],
.TUXSheet-overlay[data-transition-status='close'] {
opacity: 0;
}
.TUXSheet-overlay[data-transition-status='open'] {
opacity: 1;
}
/* Used to provide overflow: hidden and prevent the scrollbar from showing when the sheet is animating in from off-screen. */
.TUXSheet-container {
overflow: hidden;
}
.TUXSheet-container--landscape {
height: 100%;
}
.TUXSheet {
height: 100%;
position: relative; /* for absolutely positioning the close button */
display: flex;
flex-direction: column; /* prevent margin collapse when top margin is applied to TUXTitle */
background-color: var(--ui-sheet-grouped-2);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
transition: transform 220ms cubic-bezier(0.33, 0.86, 0.2, 1);
/* bottom safe area in mobile */
padding-bottom: env(safe-area-inset-bottom);
overflow: hidden;
}
.TUXSheet:focus {
outline: none;
}
.TUXSheet--portrait {
transform: translateY(0%);
}
.TUXSheet--portrait[data-transition-status='initial'],
.TUXSheet--portrait[data-transition-status='close'] {
transform: translateY(+100%);
}
.TUXSheet--portrait[data-transition-status='open'] {
transform: translateY(0%);
}
.TUXSheet--landscape-left,
.TUXSheet--landscape-right {
width: min(100vw, 100vh);
transform: translateX(0%);
}
.TUXSheet--landscape-left[data-transition-status='initial'],
.TUXSheet--landscape-left[data-transition-status='close'] {
transform: translateX(-100%);
}
.TUXSheet--landscape-right[data-transition-status='initial'],
.TUXSheet--landscape-right[data-transition-status='close'] {
transform: translateX(100%);
}
.TUXSheet--landscape-left[data-transition-status='open'],
.TUXSheet--landscape-right[data-transition-status='open'] {
transform: translateX(0%);
}
.TUXSheetTitle {
font-family: var(--tux-web-font-display);
font-size: 30px;
font-weight: 700;
text-align: center;
}
.TUXSheetNavBar {
position: relative;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
padding-left: 8px;
padding-right: 8px;
}
.TUXSheetNavBar-title {
flex: 1;
text-align: center;
font-size: 17px;
font-weight: 500;
color: var(--ui-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXSheetNavBar-leading {
width: 88px; /* space for at most 2 icon buttons */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.TUXSheetNavBar-trailing {
width: 88px; /* space for at most 2 icon buttons */
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.TUXSheetCloseButton {
position: absolute;
/* Position to exactly match where TUXSheetNavBar places the close button */
top: 4px;
right: 8px;
}
.TUXSheetCloseButton[data-text-direction='rtl'] {
right: unset;
left: 8px;
}
.TUXBaseAvatar-src {
border-radius: 50%;
}
.TUXBaseAvatar-default {
border-radius: 50%;
}
.TUXBaseAvatar-default--square {
border-radius: 2px;
}
.TUXBaseAvatar-default--square--large {
border-radius: 4px;
}
.TUXAvatar--isLive {
--tux-web-color-avatarBorder: #f3f4f5;
--tux-web-color-avatarLive: #ff1764;
--tux-web-color-avatarLiveText: #ffffff;
position: relative;
box-sizing: content-box;
border-radius: 50%;
}
.TUXAvatar--sized-24--isLive {
width: 26px;
height: 26px;
border: 1px solid var(--tux-web-color-avatarLive);
}
.TUXAvatar--sized-32--isLive {
width: 34px;
height: 34px;
border: 1px solid var(--tux-web-color-avatarLive);
}
.TUXAvatar--sized-36--isLive {
width: 38px;
height: 38px;
border: 1px solid var(--tux-web-color-avatarLive);
}
.TUXAvatar--sized-48--isLive {
width: 50px;
height: 50px;
border: 1px solid var(--tux-web-color-avatarLive);
}
.TUXAvatar--sized-56--isLive {
width: 58px;
height: 58px;
border: 1px solid var(--tux-web-color-avatarLive);
}
.TUXAvatar--sized-64--isLive {
width: 68px;
height: 68px;
border: 2px solid var(--tux-web-color-avatarLive);
}
.TUXAvatar--sized-120--isLive {
width: 124px;
height: 124px;
border: 2px solid var(--tux-web-color-avatarLive);
}
.TUXAvatar--isLive-src-outer-box {
box-sizing: content-box;
border-radius: 50%;
}
.TUXAvatar--isLive .TUXAvatar--isLive-src-outer-box {
border: 1px solid var(--tux-web-color-avatarBorder);
}
.TUXAvatar--sized-64--isLive .TUXAvatar--isLive-src-outer-box {
border: 2px solid var(--tux-web-color-avatarBorder);
}
.TUXAvatar--sized-120--isLive .TUXAvatar--isLive-src-outer-box {
border: 2px solid var(--tux-web-color-avatarBorder);
}
.TUXAvatar-src,
.TUXAvatar--isLive-src {
border-radius: 50%;
}
.TUXAvatar--isLive .TUXAvatar-liveText {
display: flex;
justify-content: center;
align-items: center;
border-radius: 25%;
background-color: var(--tux-web-color-avatarLive);
color: var(--tux-web-color-avatarLiveText);
position: absolute;
border: 1px solid var(--tux-web-color-avatarLiveText);
}
.TUXAvatar--sized-24--isLive .TUXAvatar-liveText {
width: 15px;
height: 8px;
left: 5px;
bottom: -2px;
padding-top: 1px;
font-size: 4px;
}
.TUXAvatar--sized-32--isLive .TUXAvatar-liveText {
width: 18px;
height: 10px;
left: 8px;
bottom: -2px;
padding-top: 1px;
font-size: 6px;
}
.TUXAvatar--sized-36--isLive .TUXAvatar-liveText {
width: 22px;
height: 12px;
left: 8px;
bottom: -2px;
font-size: 8px;
}
.TUXAvatar--sized-48--isLive .TUXAvatar-liveText {
width: 28px;
height: 16px;
left: 11px;
bottom: -3px;
padding-top: 1px;
font-size: 10px;
}
.TUXAvatar--sized-56--isLive .TUXAvatar-liveText {
width: 32px;
height: 18px;
left: 13px;
bottom: -4px;
padding-top: 1px;
font-size: 12px;
}
.TUXAvatar--sized-64--isLive .TUXAvatar-liveText {
width: 38px;
height: 22px;
left: 15px;
bottom: -6px;
padding-top: 1px;
font-size: 14px;
border: 2px solid var(--tux-web-color-avatarLiveText);
}
.TUXAvatar--sized-120--isLive .TUXAvatar-liveText {
width: 72px;
height: 40px;
left: 25px;
bottom: -10px;
padding-top: 1px;
font-size: 24px;
border: 2px solid var(--tux-web-color-avatarLiveText);
}
.TUXDualAvatar {
position: relative;
}
.TUXDualAvatar-back-image {
position: absolute;
right: 0;
top: 0;
}
.TUXDualAvatar-front-image {
position: absolute;
left: 0;
bottom: 0;
}
.TUXAvatarBadge {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.TUXAvatarBadge-label {
box-sizing: border-box;
display: inline-block;
position: relative;
background-color: var(--ui-shape-primary);
background-image: linear-gradient(90deg, rgba(255, 23, 100, 1) 0%, rgba(237, 52, 149, 1) 100%);
border-radius: 2px;
top: -17px;
border: 1px solid var(--ui-shape-text-1-on-primary);
padding-top: 1px;
padding-bottom: 0px;
padding-left: 4px;
padding-right: 4px;
color: var(--ui-shape-text-1-on-primary);
height: auto;
}
.TUXAvatarBadge-label[data-size='large'] {
border-width: 2px;
padding-top: 3px;
padding-bottom: 2px;
padding-left: 8px;
padding-right: 8px;
}
.TUXAvatarBadge-label[data-size='medium'] {
border-width: 2px;
padding-top: 2px;
padding-bottom: 1px;
padding-left: 6px;
padding-right: 6px;
}
.TUXAvatarBadge-label[data-size='small'] {
top: -14px;
}
.TUXAvatarBadge-label[data-size='xsmall'] {
top: -12px;
}
.TUXTooltip-reference {
display: inline-block;
}
.TUXTooltip-tooltip {
display: flex;
min-height: 48px;
min-width: 80px;
padding: 12px;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.TUXTooltip-tooltip--small {
min-height: 36px;
min-width: 48px;
max-width: 240px;
padding-top: 9px;
padding-bottom: 9px;
}
.TUXTooltip-tooltip--large {
max-width: 360px;
}
.TUXTooltip-tooltip--primary {
background-color: var(--ui-shape-secondary-muted);
color: var(--ui-shape-secondary-muted); /* This will set the color of the arrow SVG */
}
.TUXTooltip-tooltip--secondary {
background-color: var(--ui-image-overlay-dark-gray-a85);
color: var(--ui-image-overlay-dark-gray-a85); /* This will set the color of the arrow SVG */
}
[dir="ltr"] .TUXTooltip-leadingIcon {
margin-right: 4px;
}
[dir="rtl"] .TUXTooltip-leadingIcon {
margin-left: 4px;
}
.TUXTooltip-leadingIcon {
margin-bottom: 1px;
}
.TUXTooltip-content {
color: rgba(255, 255, 255, 1);
}
.TUXTooltip-trailingArrow {
font-size: 16px;
color: var(--ui-shape-text-1-on-secondary-muted);
margin-bottom: 1px;
}
[dir="ltr"] .TUXFormField-header {
margin-left: 4px;
}
[dir="rtl"] .TUXFormField-header {
margin-right: 4px;
}
.TUXFormField-header {
margin-bottom: 8px;
}
.TUXFormField-labelRow {
display: flex;
align-items: center;
}
.TUXFormField-label {
word-wrap: break-word;
color: var(--ui-text-1);
}
[dir="ltr"] .TUXFormField-requiredStar {
margin-left: 2px;
}
[dir="rtl"] .TUXFormField-requiredStar {
margin-right: 2px;
}
.TUXFormField-requiredStar {
color: var(--ui-text-primary-display);
font-size: 16px;
font-weight: 500;
}
.TUXFormField-description {
margin-top: 4px;
word-wrap: break-word;
color: var(--ui-text-2);
}
[dir="ltr"] .TUXFormField-footer {
margin-left: 0;
}
[dir="rtl"] .TUXFormField-footer {
margin-right: 0;
}
.TUXFormField-footer {
margin-top: 8px;
display: flex;
justify-content: space-between;
font-size: 13px;
}
[dir="ltr"] .TUXFormField-footer > div:not(:first-child) {
margin-left: 24px;
}
[dir="rtl"] .TUXFormField-footer > div:not(:first-child) {
margin-right: 24px;
}
[dir="ltr"] .TUXFormField-wordCount {
margin-right: 4px;
}
[dir="rtl"] .TUXFormField-wordCount {
margin-left: 4px;
}
.TUXFormField-wordCount {
font-size: 13px;
color: var(--ui-text-3);
}
.TUXFormField-wordCount--max {
color: var(--ui-text-danger);
}
.TUXFormField-error {
display: flex;
color: var(--ui-text-danger);
word-wrap: break-word;
}
[dir="ltr"] .TUXFormField-errorIcon {
margin-right: 4px;
}
[dir="rtl"] .TUXFormField-errorIcon {
margin-left: 4px;
}
.TUXFormField-errorIcon {
display: inline;
padding-top: 2.5px;
padding-bottom: 2.5px;
flex-shrink: 0;
}
.TUXSelect {
width: 360px;
max-width: 100%;
}
.TUXSelect-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
all: unset;
box-sizing: border-box;
width: 100%;
font-size: 16px;
font-family: var(--tux-web-font-body);
font-weight: 400;
display: flex;
align-items: center;
border: 2px solid transparent;
border-radius: 8px;
background-color: var(--ui-shape-neutral-4);
color: var(--ui-text-1);
cursor: pointer;
}
[dir="ltr"] .TUXSelect-button--xsmall {
padding-left: 8px;
}
[dir="rtl"] .TUXSelect-button--xsmall {
padding-right: 8px;
}
[dir="ltr"] .TUXSelect-button--xsmall {
padding-right: 4px;
}
[dir="rtl"] .TUXSelect-button--xsmall {
padding-left: 4px;
}
.TUXSelect-button--xsmall {
height: 28px;
}
[dir="ltr"] .TUXSelect-button--small {
padding-left: 10px;
}
[dir="rtl"] .TUXSelect-button--small {
padding-right: 10px;
}
[dir="ltr"] .TUXSelect-button--small {
padding-right: 6px;
}
[dir="rtl"] .TUXSelect-button--small {
padding-left: 6px;
}
.TUXSelect-button--small {
height: 32px;
}
[dir="ltr"] .TUXSelect-button--medium {
padding-left: 12px;
}
[dir="rtl"] .TUXSelect-button--medium {
padding-right: 12px;
}
[dir="ltr"] .TUXSelect-button--medium {
padding-right: 8px;
}
[dir="rtl"] .TUXSelect-button--medium {
padding-left: 8px;
}
.TUXSelect-button--medium {
height: 40px;
}
[dir="ltr"] .TUXSelect-button--large {
padding-left: 16px;
}
[dir="rtl"] .TUXSelect-button--large {
padding-right: 16px;
}
[dir="ltr"] .TUXSelect-button--large {
padding-right: 12px;
}
[dir="rtl"] .TUXSelect-button--large {
padding-left: 12px;
}
.TUXSelect-button--large {
height: 48px;
}
.TUXSelect-button--disabled {
opacity: 0.4;
}
.TUXSelect-button:focus {
border: 2px solid var(--ui-shape-neutral);
background-color: transparent;
}
.TUXSelect-button--error {
border: 2px solid var(--ui-text-danger-display);
background-color: transparent;
}
.TUXSelect-buttonText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXSelect-buttonText--placeholder {
color: var(--ui-text-placeholder);
}
.TUXSelect-spacer {
flex: 1;
}
.TUXSelect-menuContainer {
outline: none;
}
.TUXSelect-menu {
outline: none;
overflow: hidden;
margin: 0;
padding-left: 0;
padding-right: 0;
padding: 4px;
max-height: 230px;
overflow: auto;
background-color: var(--ui-page-flat-3);
border-radius: 12px;
border: 1px solid var(--ui-shape-neutral-3);
box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0.1);
}
.TUXSelect-menuOption {
display: flex;
align-items: center;
padding: 14px;
border-radius: 8px;
cursor: pointer;
outline: none;
}
.TUXSelect-menuOption--active {
background: var(--ui-shape-neutral-4);
}
.TUXSelect-menuOption--disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--ui-page-flat-3);
}
.TUXInputBox {
display: flex;
align-items: center;
border: 2px solid transparent;
border-radius: 8px;
background-color: var(--ui-shape-neutral-4);
}
.TUXInputBox-focus-ring[focus-within] {
border-color: var(--ui-shape-neutral);
background-color: transparent;
}
.TUXInputBox-focus-ring:focus-within {
border-color: var(--ui-shape-neutral);
background-color: transparent;
}
.TUXInputBox[data-size='xsmall'] {
height: 28px;
padding: 0 6px;
border-radius: 4px;
}
.TUXInputBox[data-size='small'] {
height: 32px;
padding: 0 8px;
border-radius: 5px;
}
.TUXInputBox[data-size='medium'] {
height: 40px;
padding: 0 10px;
border-radius: 6px;
}
.TUXInputBox[data-size='large'] {
height: 48px;
padding: 0 14px;
border-radius: 8px;
}
.TUXInputBox[data-disabled='true'] {
border-color: transparent;
background-color: var(--ui-shape-neutral-4);
opacity: 0.4;
cursor: not-allowed;
}
.TUXInputBox[data-has-error='true'] {
border-color: var(--ui-text-danger-display);
background-color: transparent;
}
.TUXSearchableSelectField {
width: 360px;
max-width: 100%;
}
[dir="ltr"] .TUXSearchableSelect {
text-align: left;
}
[dir="rtl"] .TUXSearchableSelect {
text-align: right;
}
.TUXSearchableSelect {
height: 100%;
flex: 1;
display: inline-flex;
align-items: center;
}
.TUXSearchableSelect::-moz-placeholder {
color: var(--ui-text-placeholder);
}
.TUXSearchableSelect::placeholder {
color: var(--ui-text-placeholder);
}
.TUXSearchableSelect::-moz-selection {
background-color: var(--ui-shape-primary-2);
}
.TUXSearchableSelect::selection {
background-color: var(--ui-shape-primary-2);
}
.TUXSearchableSelect-input {
all: unset;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box; /* add this property back, as it is removed with all: unset */
height: 100%;
width: 0px; /* override default input width */
flex: 1;
font-size: 16px;
font-family: var(--tux-web-font-paragraph);
color: var(--ui-text-1);
caret-color: var(--ui-shape-primary);
}
.TUXSearchableSelect-input:-moz-read-only {
text-overflow: ellipsis;
}
.TUXSearchableSelect-input:read-only {
text-overflow: ellipsis;
}
.TUXSearchableSelect--large .TUXSearchableSelect-input {
font-size: 16px;
}
.TUXSearchableSelect--medium .TUXSearchableSelect-input {
font-size: 16px;
}
.TUXSearchableSelect--small .TUXSearchableSelect-input {
font-size: 15px;
}
.TUXSearchableSelect--xsmall .TUXSearchableSelect-input {
font-size: 14px;
}
[dir="ltr"] .TUXSearchableSelect-prefix {
margin-right: 2px;
}
[dir="rtl"] .TUXSearchableSelect-prefix {
margin-left: 2px;
}
[dir="ltr"] .TUXSearchableSelect-suffix {
margin-left: 2px;
}
[dir="rtl"] .TUXSearchableSelect-suffix {
margin-right: 2px;
}
[dir="ltr"] .TUXSearchableSelect-leadingIconWrapper {
margin-right: 8px;
}
[dir="rtl"] .TUXSearchableSelect-leadingIconWrapper {
margin-left: 8px;
}
.TUXSearchableSelect-leadingIconWrapper {
display: flex;
font-size: 20px;
}
[dir="ltr"] .TUXSearchableSelect-trailingIconWrapper {
margin-left: 8px;
}
[dir="rtl"] .TUXSearchableSelect-trailingIconWrapper {
margin-right: 8px;
}
.TUXSearchableSelect-trailingIconWrapper {
display: flex;
font-size: 20px;
}
[dir="ltr"] .TUXSearchableSelect-loadingIconWrapper {
margin-left: 8px;
}
[dir="rtl"] .TUXSearchableSelect-loadingIconWrapper {
margin-right: 8px;
}
.TUXSearchableSelect-loadingIconWrapper {
display: flex;
}
.TUXSearchableSelect-loadingIcon {
color: var(--ui-text-placeholder);
animation: spin 1s infinite;
}
[dir="ltr"] .TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
margin-left: 8px;
}
[dir="rtl"] .TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
margin-right: 8px;
}
.TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
display: flex;
cursor: pointer;
}
[dir="ltr"] .TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
margin-left: 8px;
}
[dir="ltr"] .TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
margin-left: 8px;
}
[dir="ltr"] .TUXSearchableSelect:focus-within .TUXSearchableSelect-clearButton {
margin-left: 8px;
}
[dir="rtl"] .TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
margin-right: 8px;
}
[dir="rtl"] .TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
margin-right: 8px;
}
[dir="rtl"] .TUXSearchableSelect:focus-within .TUXSearchableSelect-clearButton {
margin-right: 8px;
}
.TUXSearchableSelect[focus-within] .TUXSearchableSelect-clearButton {
display: flex;
cursor: pointer;
}
.TUXSearchableSelect:focus-within .TUXSearchableSelect-clearButton {
display: flex;
cursor: pointer;
}
.TUXSearchableSelect-clearButton:hover,
.TUXSearchableSelect-clearButton:focus {
color: var(--ui-shape-primary);
}
.TUXSearchableSelect-checkMark {
margin: 5px;
}
.TUXSearchableSelect-spacer {
flex: 1;
}
.TUXSearchableSelect-menuContainer {
outline: none;
}
.TUXSearchableSelect-menu {
outline: none;
overflow: hidden;
margin: 0;
padding-left: 0;
padding-right: 0;
padding: 4px;
max-height: 230px;
overflow: auto;
background-color: var(--ui-page-flat-3);
border-radius: 12px;
border: 1px solid var(--ui-shape-neutral-3);
box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0.1);
}
.TUXSearchableSelect-menuOption {
display: flex;
align-items: center;
padding: 14px;
border-radius: 8px;
cursor: pointer;
outline: none;
}
.TUXSearchableSelect-menuOption--active {
background: var(--ui-shape-neutral-4);
}
.TUXSearchableSelect-menuOption--disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--ui-page-flat-3);
}
.TUXSearchableSelect-menuEmpty {
padding: 14px;
color: var(--ui-text-3);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.TUXTextInputCore {
height: 100%;
flex: 1;
display: inline-flex;
align-items: center;
}
.TUXTextInputCore-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box; /* add this property back, as it is removed with all: unset */
height: 100%;
width: 0px; /* override default input width */
flex: 1;
font-size: 16px;
font-family: var(--tux-web-font-body);
background-color: transparent;
color: var(--ui-text-1);
caret-color: var(--ui-shape-primary);
}
.TUXTextInputCore-input::-moz-placeholder {
color: var(--ui-text-placeholder);
}
.TUXTextInputCore-input::placeholder {
color: var(--ui-text-placeholder);
}
.TUXTextInputCore-input:-moz-read-only {
text-overflow: ellipsis;
}
.TUXTextInputCore-input:read-only {
text-overflow: ellipsis;
}
.TUXTextInputCore-input[focus-within] {
outline: none;
}
.TUXTextInputCore-input:focus-within {
outline: none;
}
.TUXTextInputCore-input::-moz-selection {
background-color: var(--ui-shape-primary-2);
}
.TUXTextInputCore-input::selection {
background-color: var(--ui-shape-primary-2);
}
/*
it is a tricky way to make auto-fill selection background color to transparent,
since Chrome will apply certain styles on auto-fill background color after our CSS takes effect,
we would like to delay its effect by 5000s here.
reference: https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
*/
.TUXTextInputCore-input:-webkit-autofill,
.TUXTextInputCore-input:-webkit-autofill:hover,
.TUXTextInputCore-input:-webkit-autofill:focus,
.TUXTextInputCore-input:-webkit-autofill:active {
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s;
}
.TUXTextInputCore--large .TUXTextInputCore-input {
font-size: 16px;
}
.TUXTextInputCore--medium .TUXTextInputCore-input {
font-size: 16px;
}
.TUXTextInputCore--small .TUXTextInputCore-input {
font-size: 15px;
}
.TUXTextInputCore--xsmall .TUXTextInputCore-input {
font-size: 14px;
}
[dir="ltr"] .TUXTextInputCore-prefix {
margin-right: 2px;
}
[dir="rtl"] .TUXTextInputCore-prefix {
margin-left: 2px;
}
[dir="ltr"] .TUXTextInputCore-suffix {
margin-left: 2px;
}
[dir="rtl"] .TUXTextInputCore-suffix {
margin-right: 2px;
}
[dir="ltr"] .TUXTextInputCore-leadingIconWrapper {
margin-right: 2px;
}
[dir="rtl"] .TUXTextInputCore-leadingIconWrapper {
margin-left: 2px;
}
.TUXTextInputCore-leadingIconWrapper {
display: flex;
padding: 2px;
}
.TUXTextInputCore-trailingIconWrapper {
display: flex;
}
.TUXTextInputCore-loadingIcon {
color: var(--ui-text-placeholder);
animation: spin 1s infinite;
}
.TUXTextInputCore-clearButton {
display: flex;
cursor: pointer;
}
.TUXTextInputCore-clearButton:hover,
.TUXTextInputCore-clearButton:focus {
color: var(--ui-shape-primary);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.TUXTextInput {
width: 360px;
max-width: 100%;
}
.TUXTextAreaBox {
display: flex;
align-items: center;
border: 2px solid transparent;
border-radius: 8px;
background-color: var(--ui-shape-neutral-4);
}
/* disable the focus action temporary */
/* .TUXTextAreaBox:focus-within {
border-color: var(--ui-shape-neutral);
background-color: transparent;
} */
.TUXTextAreaBox--error {
border-color: var(--ui-text-danger-display);
background-color: transparent;
}
.TUXTextAreaBox--disabled {
border-color: transparent;
background-color: var(--ui-shape-neutral-4);
opacity: 0.4;
cursor: not-allowed;
}
.TUXTextAreaCore {
position: relative;
width: 100%;
min-height: 98px; /* enough for 3 lines of text plus padding */
font-size: 16px;
line-height: 22px; /* ~1.3 line height, but easier to calculate if we use a whole number of px */
}
.TUXTextAreaCore-hiddenText {
box-sizing: border-box; /* add this property back, as it is removed with all: unset */
word-wrap: break-word; /* add this property back, as it is removed with all: unset */
white-space: pre-wrap;
padding: 16px;
visibility: hidden;
}
.TUXTextAreaCore-textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
outline: none; /* remove default focus style */
background-color: transparent; /* user-agent seems to set this as white by default */
top: 0px;
width: 100%;
height: 100%;
padding: 16px;
resize: none;
color: var(--ui-text-1);
caret-color: var(--ui-shape-primary);
}
.TUXTextAreaCore[data-auto-size='true'] .TUXTextAreaCore-textarea {
/* This should never be able to overflow, but this is used to hide the scroll bar in case it does slightly. */
overflow-y: hidden;
}
.TUXTextAreaCore-textarea::-moz-placeholder {
color: var(--ui-text-placeholder);
}
.TUXTextAreaCore-textarea::placeholder {
color: var(--ui-text-placeholder);
}
.TUXTextAreaCore-textarea::-moz-selection {
background-color: var(--ui-shape-primary-2);
}
.TUXTextAreaCore-textarea::selection {
background-color: var(--ui-shape-primary-2);
}
.TUXTextArea {
width: 360px;
max-width: 100%;
}
.TUXAutocompleteField {
width: 360px;
max-width: 100%;
}
[dir="ltr"] .TUXAutocomplete {
text-align: left;
}
[dir="rtl"] .TUXAutocomplete {
text-align: right;
}
.TUXAutocomplete {
height: 100%;
flex: 1;
display: inline-flex;
align-items: center;
}
.TUXAutocomplete::-moz-placeholder {
color: var(--ui-text-placeholder);
}
.TUXAutocomplete::placeholder {
color: var(--ui-text-placeholder);
}
.TUXAutocomplete::-moz-selection {
background-color: var(--ui-shape-primary-2);
}
.TUXAutocomplete::selection {
background-color: var(--ui-shape-primary-2);
}
.TUXAutocomplete-input {
all: unset;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-sizing: border-box; /* add this property back, as it is removed with all: unset */
height: 100%;
width: 0px; /* override default input width */
flex: 1;
font-size: 16px;
font-family: var(--tux-web-font-paragraph);
color: var(--ui-text-1);
caret-color: var(--ui-shape-primary);
}
.TUXAutocomplete-input:-moz-read-only {
text-overflow: ellipsis;
}
.TUXAutocomplete-input:read-only {
text-overflow: ellipsis;
}
.TUXAutocomplete--large .TUXAutocomplete-input {
font-size: 16px;
}
.TUXAutocomplete--medium .TUXAutocomplete-input {
font-size: 16px;
}
.TUXAutocomplete--small .TUXAutocomplete-input {
font-size: 15px;
}
.TUXAutocomplete--xsmall .TUXAutocomplete-input {
font-size: 14px;
}
[dir="ltr"] .TUXAutocomplete-prefix {
margin-right: 2px;
}
[dir="rtl"] .TUXAutocomplete-prefix {
margin-left: 2px;
}
[dir="ltr"] .TUXAutocomplete-suffix {
margin-left: 2px;
}
[dir="rtl"] .TUXAutocomplete-suffix {
margin-right: 2px;
}
[dir="ltr"] .TUXAutocomplete-leadingIconWrapper {
margin-right: 8px;
}
[dir="rtl"] .TUXAutocomplete-leadingIconWrapper {
margin-left: 8px;
}
.TUXAutocomplete-leadingIconWrapper {
display: flex;
font-size: 20px;
}
[dir="ltr"] .TUXAutocomplete-trailingIconWrapper {
margin-left: 8px;
}
[dir="rtl"] .TUXAutocomplete-trailingIconWrapper {
margin-right: 8px;
}
.TUXAutocomplete-trailingIconWrapper {
display: flex;
font-size: 20px;
}
[dir="ltr"] .TUXAutocomplete-loadingIconWrapper {
margin-left: 8px;
}
[dir="rtl"] .TUXAutocomplete-loadingIconWrapper {
margin-right: 8px;
}
.TUXAutocomplete-loadingIconWrapper {
display: flex;
}
.TUXAutocomplete-loadingIcon {
color: var(--ui-text-placeholder);
animation: spin 1s infinite;
}
.TUXAutocomplete-clearButton {
display: none;
}
[dir="ltr"] .TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
margin-left: 8px;
}
[dir="rtl"] .TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
margin-right: 8px;
}
.TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
display: flex;
cursor: pointer;
}
[dir="ltr"] .TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
margin-left: 8px;
}
[dir="ltr"] .TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
margin-left: 8px;
}
[dir="ltr"] .TUXAutocomplete:focus-within .TUXAutocomplete-clearButton {
margin-left: 8px;
}
[dir="rtl"] .TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
margin-right: 8px;
}
[dir="rtl"] .TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
margin-right: 8px;
}
[dir="rtl"] .TUXAutocomplete:focus-within .TUXAutocomplete-clearButton {
margin-right: 8px;
}
.TUXAutocomplete[focus-within] .TUXAutocomplete-clearButton {
display: flex;
cursor: pointer;
}
.TUXAutocomplete:focus-within .TUXAutocomplete-clearButton {
display: flex;
cursor: pointer;
}
.TUXAutocomplete-clearButton:hover,
.TUXAutocomplete-clearButton:focus {
color: var(--ui-shape-primary);
}
.TUXAutocomplete-checkMark {
margin: 5px;
}
.TUXAutocomplete-spacer {
flex: 1;
}
.TUXAutocomplete-menuContainer {
outline: none;
}
.TUXAutocomplete-menu {
outline: none;
overflow: hidden;
margin: 0;
padding-left: 0;
padding-right: 0;
padding: 4px;
max-height: 230px;
overflow: auto;
background-color: var(--ui-page-flat-3);
border-radius: 12px;
border: 1px solid var(--ui-shape-neutral-3);
box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0.1);
}
.TUXAutocomplete-menuOption {
display: flex;
align-items: center;
padding: 14px;
border-radius: 8px;
cursor: pointer;
outline: none;
}
.TUXAutocomplete-menuOption--active {
background: var(--ui-shape-neutral-4);
}
.TUXAutocomplete-menuOption--disabled {
opacity: 0.4;
cursor: not-allowed;
background: var(--ui-page-flat-3);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.TUXTabBar {
display: flex;
flex-direction: column;
height: 100px;
size: 16px;
}
.TUXTabBar[data-compact='true'] {
display: inline-flex;
width: -moz-fit-content;
width: fit-content;
}
.TUXTabBar-list {
position: relative;
width: 100%;
height: 40px;
display: flex;
}
.TUXTabBar-list::-webkit-scrollbar {
display: none;
}
.TUXTabBar-activeLine {
position: absolute;
bottom: 0px;
height: 2px;
background-color: var(--ui-shape-neutral);
}
.TUXTabBar-underline {
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
background-color: var(--ui-shape-neutral-3);
}
.TUXTabBar-item {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
height: 100%;
flex: 1;
display: flex;
justify-content: center;
}
.TUXTabBar[data-compact='true'] .TUXTabBar-item {
flex: unset;
}
.TUXTabBar-itemTitle {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
color: var(--ui-text-2);
font-size: inherit;
}
.TUXTabBar-itemTitle.focus-visible {
outline: 2px solid var(--ui-shape-neutral);
border-radius: 5px;
}
.TUXTabBar-itemTitle:focus-visible {
outline: 2px solid var(--ui-shape-neutral);
border-radius: 5px;
}
.TUXTabBar-itemTitle--active {
color: var(--ui-text-1);
}
.TUXTabBar-itemTitle--disabled {
cursor: not-allowed;
color: var(--ui-text-3);
}
[dir="ltr"] .TUXTabBar-itemTitle-leadingIcon {
margin-right: 4px;
}
[dir="rtl"] .TUXTabBar-itemTitle-leadingIcon {
margin-left: 4px;
}
[dir="ltr"] .TUXTabBar-itemTitle-trailingArrow {
margin-left: 4px;
}
[dir="rtl"] .TUXTabBar-itemTitle-trailingArrow {
margin-right: 4px;
}
.TUXTabBar-itemTitle-trailingArrow {
font-size: 12px;
}
.TUXTabBar-content {
size: inherit;
}
.TUXTabBar-content.focus-visible {
outline: 2px solid var(--ui-shape-neutral);
border-radius: 5px;
}
.TUXTabBar-content:focus-visible {
outline: 2px solid var(--ui-shape-neutral);
border-radius: 5px;
}
.TUXSegmentedControl {
display: flex;
background-color: var(--ui-shape-neutral-4);
}
.TUXSegmentedControl[data-compact='true'] {
display: inline-flex;
width: -moz-fit-content;
width: fit-content;
}
.TUXSegmentedControl[data-size='s'] {
min-height: 44px;
padding: 3px;
}
.TUXSegmentedControl[data-size='xs'] {
min-height: 36px;
padding: 2px;
}
.TUXSegmentedControl[data-shape='capsule'] {
border-radius: 999px; /* capsule shape */
}
.TUXSegmentedControl[data-size='s'][data-shape='rectangle'] {
border-radius: 8px;
}
.TUXSegmentedControl[data-size='xs'][data-shape='rectangle'] {
border-radius: 6px;
}
.TUXSegmentedControl-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
font-family: var(--tux-web-font-body);
}
.TUXSegmentedControl[data-compact='true'] .TUXSegmentedControl-item {
flex: unset;
}
.TUXSegmentedControl[data-size='s'] .TUXSegmentedControl-item {
min-width: 64px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 14px;
padding-right: 14px;
}
.TUXSegmentedControl[data-size='xs'] .TUXSegmentedControl-item {
min-width: 48px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
.TUXSegmentedControl[data-shape='capsule'] .TUXSegmentedControl-item {
border-radius: 999px; /* capsule shape */
}
.TUXSegmentedControl[data-size='s'][data-shape='rectangle'] .TUXSegmentedControl-item {
border-radius: 5px; /* matches curve of 8px outer border-radius */
}
.TUXSegmentedControl[data-size='xs'][data-shape='rectangle'] .TUXSegmentedControl-item {
border-radius: 4px; /* matches curve of 6px outer border-radius */
}
.TUXSegmentedControl-item[data-active='true'] {
background-color: var(--ui-sheet-flat-3);
background-image: linear-gradient(to right, var(--ui-image-overlay-white-a20), var(--ui-image-overlay-white-a20));
background-blend-mode: normal;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.TUXSegmentedControl-itemTitleContainer {
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ui-text-3);
}
.TUXSegmentedControl-item[data-active='true'] .TUXSegmentedControl-itemTitleContainer {
color: var(--ui-text-1);
}
[dir="ltr"] .TUXSegmentedControl[data-size='s'] .TUXSegmentedControl-itemTitleContainer > * + * {
margin-left: 4px;
}
[dir="rtl"] .TUXSegmentedControl[data-size='s'] .TUXSegmentedControl-itemTitleContainer > * + * {
margin-right: 4px;
}
[dir="ltr"] .TUXSegmentedControl[data-size='xs'] .TUXSegmentedControl-itemTitleContainer > * + * {
margin-left: 3px;
}
[dir="rtl"] .TUXSegmentedControl[data-size='xs'] .TUXSegmentedControl-itemTitleContainer > * + * {
margin-right: 3px;
}
[dir="ltr"] .TUXSegmentedControl-item[data-has-subtitle='true'] .TUXSegmentedControl-itemTitleContainer > * + * {
margin-left: 3px;
}
[dir="rtl"] .TUXSegmentedControl-item[data-has-subtitle='true'] .TUXSegmentedControl-itemTitleContainer > * + * {
margin-right: 3px;
}
.TUXSegmentedControl-itemTitle {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXSegmentedControl[data-size='s'] .TUXSegmentedControl-itemTitle {
font-size: 15px;
}
.TUXSegmentedControl[data-size='xs'] .TUXSegmentedControl-itemTitle {
font-size: 13px;
}
.TUXSegmentedControl-item[data-has-subtitle='true'] .TUXSegmentedControl-itemTitle {
font-size: 14px;
}
.TUXSegmentedControl[data-size='s'] .TUXSegmentedControl-itemIcon {
font-size: 14px;
}
.TUXSegmentedControl[data-size='xs'] .TUXSegmentedControl-itemIcon {
font-size: 12px;
}
.TUXSegmentedControl-item[data-has-subtitle='true'] .TUXSegmentedControl-itemIcon {
font-size: 13px;
}
.TUXSegmentedControl-itemSubtitle {
max-width: 100%;
font-size: 10px;
color: var(--ui-text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXLink:hover {
text-decoration: underline;
}
.TUXLink--disabled {
opacity: 0.4;
cursor: default;
}
.TUXLink--disabled:hover {
text-decoration: none;
}
.TUXForm {
height: auto;
padding-left: 20px;
padding-right: 20px;
}
.TUXFormSection {
display: flex;
flex-direction: column;
}
.TUXFormSection > *:not(:first-child) {
margin-top: 16px;
}
.TUXFormSection-header {
padding-bottom: 8px;
}
.TUXFormSection-title {
display: flex;
flex-direction: row;
padding-top: 16px;
}
.TUXFormSection-subtitle {
margin-top: 4px;
padding-bottom: 8px;
}
.TUXFormSection-footer {
color: var(--ui-text-3);
font-size: 13px;
font-weight: 400;
font-family: var(--tux-web-font-body);
}
.TUXFormSectionDivider {
width: 100%;
border: 0;
border-top: 1px solid var(--ui-shape-neutral-3);
margin-top: 24px;
margin-bottom: 4px;
}
@keyframes TUXSkeleton--background--animation {
0% {
background-color: var(--ui-shape-neutral-2);
}
50.0% {
background-color: var(--ui-shape-neutral-4);
}
100.0% {
background-color: var(--ui-shape-neutral-2);
}
}
.TUXSkeletonRectangle {
background-color: var(--ui-shape-neutral-4);
animation: TUXSkeleton--background--animation 1600ms linear infinite;
}
.TUXTag {
display: inline-flex;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
justify-content: center;
align-items: center;
min-width: 20px;
width: -moz-fit-content;
width: fit-content;
max-width: 160px;
height: -moz-fit-content;
height: fit-content;
border-radius: 4px;
}
.TUXTag--primary {
color: var(--ui-shape-text-1-on-primary);
background-color: var(--ui-shape-primary);
}
.TUXTag--neutral {
color: var(--ui-shape-text-1-on-neutral);
background-color: var(--ui-shape-neutral);
}
.TUXTag--subtle {
color: var(--ui-text-1);
background-color: var(--ui-shape-neutral-4);
}
.TUXTag--overlayWhite {
color: var(--ui-image-overlay-black-a80);
background-color: var(--ui-image-overlay-white);
}
.TUXTag--overlayDarkGray {
color: var(--ui-image-overlay-white);
background-color: var(--ui-image-overlay-dark-gray-a60);
}
[dir="ltr"] .TUXTag--hasLeadingIcon {
padding-left: 2px;
}
[dir="rtl"] .TUXTag--hasLeadingIcon {
padding-right: 2px;
}
[dir="ltr"] .TUXTag--hasTrailingIcon {
padding-right: 2px;
}
[dir="rtl"] .TUXTag--hasTrailingIcon {
padding-left: 2px;
}
.TUXTag-leadingIcon {
display: flex;
padding: 2.5px;
}
.TUXTag-trailingIcon {
display: flex;
padding: 2.5px;
}
.TUXAlertBadge {
position: absolute;
right: 0px;
top: 0px;
min-width: 16px;
height: 16px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--ui-shape-primary);
color: var(--ui-shape-text-1-on-primary);
border-radius: 999px;
transform: translate(50%, -50%);
}
.TUXAlertBadge[data-text-direction='rtl'] {
right: unset;
left: 0px;
transform: translate(-50%, -50%);
}
.TUXAlertBadge--multipleDigits {
padding-left: 4px;
padding-right: 4px;
}
.TUXAlertBadge-reference {
display: inline-block;
position: relative;
}
.TUXAlertBadgeDot {
position: absolute;
right: 0px;
top: 0px;
background-color: var(--ui-shape-primary);
border-radius: 999px;
transform: translate(50%, -50%);
}
.TUXAlertBadgeDot[data-text-direction='rtl'] {
right: unset;
left: 0px;
transform: translate(-50%, -50%);
}
.TUXAlertBadgeDot--small {
width: 4px;
height: 4px;
}
.TUXAlertBadgeDot--large {
width: 8px;
height: 8px;
}
.TUXAlertBadgeDot-reference {
display: inline-block;
position: relative;
}
.TUXAccordion {
padding-left: 16px;
padding-right: 16px;
}
.TUXAccordion-title {
padding-bottom: 8px;
}
.TUXAccordionSection {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
.TUXAccordionSection-header {
display: flex;
cursor: pointer;
}
[dir="ltr"] .TUXAccordionSection-leadingIcon {
margin-right: 8px;
}
[dir="rtl"] .TUXAccordionSection-leadingIcon {
margin-left: 8px;
}
.TUXAccordionSection-leadingIcon {
padding-top: 6px;
padding-bottom: 6px;
font-size: 20px;
color: var(--ui-text-1);
}
.TUXAccordionSection-label {
padding-top: 5.5px;
padding-bottom: 5.5px;
flex: 1;
}
[dir="ltr"] .TUXAccordionSection-trailingArrow {
margin-left: 8px;
}
[dir="rtl"] .TUXAccordionSection-trailingArrow {
margin-right: 8px;
}
.TUXAccordionSection-trailingArrow {
padding-top: 8px;
padding-bottom: 8px;
transform: rotate(0deg);
transition: transform 0.2s;
flex-shrink: 0;
align-self: end;
font-size: 16px;
color: var(--ui-text-3);
}
.TUXAccordionSection-trailingArrow--isOpen {
transform: rotate(180deg);
}
.TUXAccordionSection-content {
padding-bottom: 4px;
}
.TUXAccordionSection[data-text-direction='rtl'] .TUXAccordionSection-trailingArrow--isOpen {
transform: rotate(-180deg);
}
.TUXPopover-popover {
border-radius: 12px;
background-color: var(--ui-sheet-flat-3);
color: var(--ui-sheet-flat-3); /* This will set the color of the arrow SVG */
border: 1px solid rgb(235, 235, 235); /* UIShapeNeutral3 without opacity as it doesn't align with arrow. */
box-shadow: 0 5px 26px rgba(0, 0, 0, 0.1);
}
.TUXPopover-popover--dark {
border-color: rgb(105, 105, 105);
}
.TUXPopover-popover--open {
opacity: 1;
}
.TUXPopover-popover--close {
opacity: 0;
}
.TUXPopover-content {
font-size: 16px;
color: var(--ui-text-1);
}
.TUXMenu {
padding: 4px;
}
.TUXMenuItem {
width: 220px;
height: 50px;
padding-left: 14px;
padding-right: 14px;
border-radius: 8px;
display: flex;
align-items: center;
cursor: pointer;
}
.TUXMenuItem--destructive {
color: var(--ui-text-danger-display);
}
.TUXMenuItem:hover {
background-color: var(--ui-shape-neutral-4);
}
.TUXMenuItem.focus-visible {
outline: 2px solid var(--ui-shape-neutral);
}
.TUXMenuItem:focus-visible {
outline: 2px solid var(--ui-shape-neutral);
}
[dir="ltr"] .TUXMenuItem-leadingIcon {
margin-right: 8px;
}
[dir="rtl"] .TUXMenuItem-leadingIcon {
margin-left: 8px;
}
.TUXMenuItem-leadingIcon {
display: flex;
font-size: 20px;
position: relative;
top: -1px;
}
.TUXMenuItem-label {
flex: 1;
}
[dir="ltr"] .TUXMenuItem-trailingIcon {
margin-left: 8px;
}
[dir="rtl"] .TUXMenuItem-trailingIcon {
margin-right: 8px;
}
.TUXMenuItem-trailingIcon {
font-size: 20px;
}
.TUXMenuSeparator {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--ui-shape-neutral-3);
margin: 3px 12px;
padding: 0;
}
.TUXPinCore {
all: unset;
width: 0px;
height: 100%;
flex: 1;
padding-left: 2px;
padding-right: 2px;
text-align: center;
font-size: 20px;
caret-color: var(--ui-shape-primary);
}
.TUXPinCore:focus {
outline: 2px solid var(--ui-shape-neutral);
border-radius: 8px;
}
.TUXPinCore--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.TUXPinCore--hasError {
outline: 2px solid var(--ui-shape-danger);
border-radius: 8px;
}
/* TODO: fix yellow background color when auto-fill */
/* .TUXPinCore:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0px 9999px var(--ui-shape-neutral-4) !important;
background-color: var(--ui-shape-neutral-4) !important;
background-clip: content-box !important;
} */
.TUXPinItem {
display: flex;
width: 48px;
height: 52px;
border-radius: 8px;
box-sizing: border-box;
justify-content: center;
align-items: center;
background-color: var(--ui-shape-neutral-4);
cursor: pointer;
}
.TUXPinItem--hasError {
background-color: transparent;
}
.TUXPinField {
display: inline-block;
padding-left: 16px;
padding-right: 16px;
}
.TUXPinField-header {
padding-left: 16px;
padding-right: 16px;
}
.TUXPinField-title {
padding-top: 16px;
margin-bottom: 4px;
}
.TUXPinGroup {
display: flex;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
}
[dir="ltr"] .TUXPinGroup > div:not(:first-child) {
margin-left: 6px;
}
[dir="rtl"] .TUXPinGroup > div:not(:first-child) {
margin-right: 6px;
}
.TUXPinField-errorMessage {
display: flex;
padding-left: 16px;
padding-right: 16px;
margin-top: 8px;
}
.TUXPinField-errorIcon {
position: relative;
top: 2px;
}
.TUXChip {
height: 32px;
padding: 8px;
display: flex;
justify-content: center;
align-items: center;
color: var(--ui-text-2);
}
.TUXChip--normalMode {
background-color: var(--ui-shape-neutral-4);
}
.TUXChip[data-shape='capsule'] {
border-radius: 999px; /* capsule shape */
}
.TUXChip[data-shape='rectangle'] {
border-radius: 5px;
}
.TUXChip[data-selected='quiet'] {
color: var(--ui-text-1);
background-color: var(--ui-shape-neutral-4);
}
.TUXChip[data-selected='normal'] {
color: var(--ui-shape-text-1-on-neutral);
background-color: var(--ui-shape-neutral);
}
.TUXChip[data-disabled='true'] {
opacity: 0.34;
}
.TUXChip:active:not([data-disabled='true']) {
opacity: 0.5;
}
.TUXChip-label {
font-size: 14px;
}
.TUXChip-iconContainer {
font-size: 15px;
}
.TUXChip-label {
padding-left: 4px;
padding-right: 4px;
}
.TUXMultiSelectChip {
height: 32px;
min-width: 32px;
padding: 8px;
display: flex;
justify-content: center;
align-items: center;
color: var(--ui-text-2);
background-color: var(--ui-shape-neutral-4);
background-clip: padding-box; /* allows borders to have transparency */
}
.TUXMultiSelectChip[data-selected='true'] {
border: 1.5px solid var(--ui-shape-neutral);
color: var(--ui-text-1);
background-color: var(--ui-page-flat-3);
}
.TUXMultiSelectChip[data-shape='capsule'] {
border-radius: 999px; /* capsule shape */
}
.TUXMultiSelectChip[data-shape='rectangle'] {
border-radius: 5px;
}
.TUXMultiSelectChip[data-disabled='true'] {
opacity: 0.34;
}
.TUXMultiSelectChip:active:not([data-disabled='true']) {
opacity: 0.5;
}
.TUXMultSelectChip-tick {
font-size: 16px;
}
.TUXMultiSelectChip-label {
padding-left: 4px;
padding-right: 4px;
}
.tux-separator {
flex-shrink: 0;
}
.tux-separator-thin--horizontal {
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tux-separator-thin--vertical {
height: 100%;
width: 1px;
transform: scaleX(0.5);
}
.tux-separator-thick--horizontal {
width: 100%;
height: 8px;
}
.tux-separator-thick--vertical {
height: 100%;
width: 8px;
}
.TUXDatePicker {
width: 360px;
max-width: 100%;
}
.TUXDatePicker-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
all: unset;
box-sizing: border-box;
width: 100%;
font-size: 16px;
font-family: var(--tux-web-font-body);
font-weight: 400;
display: flex;
align-items: center;
border: 2px solid transparent;
border-radius: 8px;
background-color: var(--ui-shape-neutral-4);
color: var(--ui-text-1);
cursor: pointer;
}
[dir="ltr"] .TUXDatePicker-button--xsmall {
padding-left: 8px;
}
[dir="rtl"] .TUXDatePicker-button--xsmall {
padding-right: 8px;
}
[dir="ltr"] .TUXDatePicker-button--xsmall {
padding-right: 4px;
}
[dir="rtl"] .TUXDatePicker-button--xsmall {
padding-left: 4px;
}
.TUXDatePicker-button--xsmall {
height: 28px;
}
[dir="ltr"] .TUXDatePicker-button--small {
padding-left: 10px;
}
[dir="rtl"] .TUXDatePicker-button--small {
padding-right: 10px;
}
[dir="ltr"] .TUXDatePicker-button--small {
padding-right: 6px;
}
[dir="rtl"] .TUXDatePicker-button--small {
padding-left: 6px;
}
.TUXDatePicker-button--small {
height: 32px;
}
[dir="ltr"] .TUXDatePicker-button--medium {
padding-left: 12px;
}
[dir="rtl"] .TUXDatePicker-button--medium {
padding-right: 12px;
}
[dir="ltr"] .TUXDatePicker-button--medium {
padding-right: 8px;
}
[dir="rtl"] .TUXDatePicker-button--medium {
padding-left: 8px;
}
.TUXDatePicker-button--medium {
height: 40px;
}
[dir="ltr"] .TUXDatePicker-button--large {
padding-left: 16px;
}
[dir="rtl"] .TUXDatePicker-button--large {
padding-right: 16px;
}
[dir="ltr"] .TUXDatePicker-button--large {
padding-right: 12px;
}
[dir="rtl"] .TUXDatePicker-button--large {
padding-left: 12px;
}
.TUXDatePicker-button--large {
height: 48px;
}
.TUXDatePicker-button--disabled {
opacity: 0.4;
}
.TUXDatePicker-button:focus {
border: 2px solid var(--ui-shape-neutral);
background-color: transparent;
}
.TUXDatePicker-button--error {
border: 2px solid var(--ui-text-danger-display);
background-color: transparent;
}
.TUXDatePicker-buttonText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXDatePicker-buttonText--placeholder {
color: var(--ui-text-placeholder);
}
.TUXDatePicker-spacer {
flex: 1;
}
.TUXDatePicker-menuContainer {
outline: none;
max-width: 382px;
}
.TUXDatePicker-menu {
outline: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: var(--ui-sheet-flat-3);
border-radius: 12px;
border: 1px solid var(--ui-shape-neutral-3);
box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0.1);
}
.TUXDatePicker-menu[data-transition-status='initial'],
.TUXDatePicker-menu[data-transition-status='close'] {
transform: translateY(-10px);
opacity: 0;
}
.TUXDatePicker-menu[data-transition-status='open'] {
transform: translateY(0%);
opacity: 1;
}
.TUXDatePicker-monthSelector {
padding: 16px 20px;
padding-bottom: 8px;
display: flex;
justify-content: space-between;
}
.TUXDatePicker-monthLabel {
font-size: 16px;
font-weight: 500;
}
.TUXCalendar-container,
.TUXCalendarSheet-container {
padding-left: 16px;
padding-right: 16px;
}
.TUXCalendar,
.TUXCalendarSheet {
--cell-width: 50px;
width: 100%;
}
.TUXCalendar-heading,
.TUXCalendarSheet-heading {
padding: 12px;
}
.TUXCalendar-heading--separator {
position: sticky;
top: 85px;
margin-left: -16px;
margin-right: -16px;
}
.TUXCalendar-headingCell,
.TUXCalendarSheet-headingCell {
width: var(--cell-width);
padding: 11px 0;
color: var(--ui-text-3);
text-align: center;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.127px;
}
.TUXCalendar-dateCell,
.TUXCalendarSheet-dateCell {
width: var(--cell-width);
height: var(--cell-width);
padding: 0;
}
.TUXCalendar-dateButton,
.TUXCalendarSheet-dateButton {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
padding: 0;
background-color: transparent;
display: flex;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: 500;
}
.TUXCalendar-dateButton.focus-visible .TUXCalendar-dateCircle,
.TUXCalendarSheet-dateButton.focus-visible .TUXCalendarSheet-dateCircle {
outline: 2px solid var(--ui-shape-neutral);
outline-offset: 2px;
}
.TUXCalendar-dateButton:focus-visible .TUXCalendar-dateCircle,
.TUXCalendarSheet-dateButton:focus-visible .TUXCalendarSheet-dateCircle {
outline: 2px solid var(--ui-shape-neutral);
outline-offset: 2px;
}
.TUXCalendar-backgroundShadeHalf,
.TUXCalendarSheet-backgroundShadeHalf {
flex: 1;
height: 38px;
background-color: var(--ui-shape-primary);
opacity: 0;
}
.TUXCalendar-backgroundShadeHalf--visible,
.TUXCalendarSheet-backgroundShadeHalf--visible {
opacity: 0.12;
}
.TUXCalendar-dateCircle,
.TUXCalendarSheet-dateCircle {
display: flex;
position: absolute;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid transparent;
background-clip: padding-box;
color: var(--ui-text-1);
}
.TUXCalendar-dateButton:hover:not(:disabled) .TUXCalendar-dateCircle:not(.TUXCalendar-dateCircle--active),
.TUXCalendarSheet-dateButton:hover:not(:disabled)
.TUXCalendarSheet-dateCircle:not(.TUXCalendarSheet-dateCircle--active) {
background-color: var(--ui-shape-neutral-4);
}
.TUXCalendar-dateButton:disabled,
.TUXCalendarSheet-dateButton:disabled {
cursor: not-allowed;
}
.TUXCalendar-dateButton:disabled .TUXCalendarSheet-dateCircle,
.TUXCalendarSheet-dateButton:disabled .TUXCalendarSheet-dateCircle {
color: var(--ui-text-placeholder);
}
.TUXCalendar-dateCircle--active,
.TUXCalendarSheet-dateCircle--active {
background-color: var(--ui-shape-primary);
color: var(--ui-shape-text-1-on-primary);
}
.TUXCalendar-dateCircle--today,
.TUXCalendarSheet-dateCircle--today {
border-color: var(--ui-shape-neutral-2);
}
.TUXCalendar-confirm-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px;
position: sticky;
bottom: 0px;
background-color: var(--ui-sheet-flat-3);
}
.TUXDatePicker-sheet-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
background-color: var(--ui-sheet-backdrop-1);
transition: opacity 220ms cubic-bezier(0.33, 0.86, 0.2, 1);
}
.TUXDatePicker-sheet-overlay[data-transition-status='initial'],
.TUXDatePicker-sheet-overlay[data-transition-status='close'] {
opacity: 0;
}
.TUXDatePicker-sheet-overlay[data-transition-status='open'] {
opacity: 1;
}
.TUXDatePicker-sheet-container {
height: 70%;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overscroll-behavior-y: none;
}
.TUXDatePicker-sheet-container::-webkit-scrollbar {
display: none;
}
.TUXDatePicker-sheet {
position: relative; /* for absolutely positioning the close button */
width: 100%;
display: flex;
flex-direction: column; /* prevent margin collapse when top margin is applied to TUXTitle */
background-color: var(--ui-sheet-flat-1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
transition: transform 220ms cubic-bezier(0.33, 0.86, 0.2, 1);
transform: translateY(0%);
}
.TUXDatePicker-sheet:focus {
outline: none;
}
.TUXDatePicker-sheet[data-transition-status='initial'],
.TUXDatePicker-sheet[data-transition-status='close'] {
transform: translateY(+100%);
}
.TUXDatePicker-sheet[data-transition-status='open'] {
transform: translateY(0%);
}
.TUXDatePicker-sheet-navbar {
position: sticky;
top: 0;
background-color: var(--ui-sheet-flat-1);
z-index: 3000;
}
.TUXCalendarSheet-heading {
position: sticky;
top: 52px;
background-color: var(--ui-sheet-flat-1);
z-index: 3000;
}
.TUXCalendarSheet-heading--separator {
position: sticky;
top: 92px;
margin-left: -16px;
margin-right: -16px;
}
.TUXCalendarSheet-month-label {
text-align: center;
padding: 16px 16px 8px 16px;
}
.TUXCalendarSheet-confirm-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px 16px 46px 16px;
position: sticky;
bottom: 0px;
background-color: var(--ui-sheet-flat-1);
z-index: 3000;
}
.TUXCalendar-confirm-panel--separator,
.TUXCalendarSheet-confirm-panel--separator {
position: absolute;
top: 0px;
width: 100%;
}
.TUXCalendar-button-text,
.TUXCalendarSheet-button-text {
margin-bottom: 16px;
}
.TUXCalendar-confirm-button,
.TUXCalendarSheet-confirm-button {
width: 100%;
text-align: center;
}
.TUXActionSheet-header {
text-align: center;
padding: 12px 16px;
color: var(--ui-text-3);
}
.TUXCancelActionButton {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
min-height: 48px;
padding: 12px;
}
.TUXCancelActionButton:disabled {
opacity: 0.4;
}
.TUXCancelActionButton:enabled:active {
background: var(--ui-shape-neutral-4);
}
.TUXCancelActionButton-textContainer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.TUXCancelActionButton-title {
padding: 1px 0;
width: 100%;
}
.TUXCancelActionButton-subtitle {
color: var(--ui-text-3);
margin-top: 1px;
width: 100%;
}
/* Text Action Style */
.TUXTextActionButton {
flex-direction: column;
justify-content: center;
text-align: center;
padding: 12px;
min-height: 48px;
}
.TUXTextActionButton-textContainer {
align-items: center;
text-align: center;
}
/* Icon Action Style */
.TUXIconActionButton {
padding-left: 12px;
padding-right: 12px;
padding-top: 10px;
padding-bottom: 10px;
min-height: 52px;
}
[dir="ltr"] .TUXIconActionButton-iconContainer {
margin-right: 8px;
}
[dir="rtl"] .TUXIconActionButton-iconContainer {
margin-left: 8px;
}
.TUXIconActionButton-iconContainer {
font-size: 20px;
line-height: 0;
}
.TUXIconActionButton-iconContainer--subtitle {
align-self: flex-start;
}
.TUXIconActionButton-iconContainer--title {
align-items: center;
}
[dir="ltr"] .TUXIconActionButton-textContainer {
text-align: left;
}
[dir="rtl"] .TUXIconActionButton-textContainer {
text-align: right;
}
.TUXIconActionButton-textContainer {
align-items: start;
}
/* Common Style */
.TUXActionButton {
display: flex;
width: 100%;
align-items: center;
}
.TUXActionButton:disabled {
opacity: 0.4;
}
.TUXActionButton:enabled:active {
background: var(--ui-shape-neutral-4);
}
.TUXActionButton-textContainer {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.TUXActionButton-title {
padding: 1px 0;
width: 100%;
}
.TUXActionButton-subtitle {
color: var(--ui-text-3);
margin-top: 1px;
width: 100%;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tux-base-dialog {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
transition: opacity 150ms linear, visibility 0ms linear 150ms;
box-sizing: border-box;
position: fixed;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.tux-base-dialog::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: var(--ui-sheet-backdrop-1);
}
.tux-base-dialog--open {
visibility: visible;
opacity: 1;
transition: opacity 150ms linear;
pointer-events: auto;
/* fix TUXDialog scrollable problem on Android devices */
touch-action: none;
}
.tux-base-dialog--close {
pointer-events: none;
}
.tux-base-dialog__container {
position: relative;
}
.tux-base-dialog--open .tux-base-dialog__container {
animation: tux-base-dialog-animation 350ms;
}
.tux-base-dialog__close-button--base {
position: absolute;
padding: 8px;
color: var(--ui-text-1);
}
[dir="ltr"] .tux-base-dialog__close-button {
right: 0;
}
[dir="rtl"] .tux-base-dialog__close-button {
left: 0;
}
.tux-base-dialog__close-button {
font-size: 24px;
}
@keyframes tux-base-dialog-animation {
0% {
transform: scale(0, 0);
}
14.516% {
transform: scale(0.684, 0.684);
}
27.419% {
transform: scale(0.947, 0.947);
}
53.225% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}
.tux-dialog__content-container {
max-width: 360px;
max-height: 480px;
/* width: 84vw; */
overflow: hidden;
display: flex;
flex-direction: column;
color: var(--ui-text-1);
background-color: var(--ui-sheet-flat-3);
}
.tux-dialog__content-image-container {
width: '100%';
}
.tux-dialog__content-title-container {
display: flex;
padding-bottom: 20px;
flex-direction: column;
text-align: center;
min-height: 0;
}
.tux-dialog__content-title {
padding-left: 20px;
padding-right: 20px;
margin-bottom: 12px;
color: var(--ui-text-1);
}
.tux-dialog__content-message {
padding-left: 20px;
padding-right: 20px;
overflow-y: auto;
}
.tux-dialog__content-message-with-title {
color: var(--ui-text-2);
}
.tux-dialog__content-message-without-title {
color: var(--ui-text-1);
}
.tux-dialog__content-action-container {
display: flex;
position: relative;
width: 100%;
flex-shrink: 0;
}
.tux-dialog__content-action-container--horizontal {
flex-direction: row-reverse;
height: 48px;
}
.tux-dialog__content-action-container--vertical {
flex-direction: column;
}
.tux-dialog__content-pt-2 {
padding-top: 2px;
}
.tux-dialog__content-pt-24 {
padding-top: 24px;
}
.tux-dialog__content-pb-8 {
padding-bottom: 8px;
}
.tux-dialog__content-pb-16 {
padding-bottom: 16px;
}
.tux-dialog-action__base {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 2px;
}
.tux-dialog-action__text {
display: block;
padding-left: 8px;
padding-right: 8px;
width: 100%;
height: 48px;
text-align: center;
}
.tux-dialog-action__text--primary {
color: var(--ui-text-1);
}
.tux-dialog-action__text--secondary {
color: var(--ui-text-2);
}
.tux-dialog-action__text--destructive {
color: var(--ui-shape-danger);
}
.tux-dialog-action__text:enabled:active {
background-color: var(--ui-shape-neutral-4);
}
.tux-dialog-action__button-container {
height: 48px;
padding-left: 20px;
padding-right: 20px;
}
.tux-dialog-action__button-container + .tux-dialog-action__button-container {
margin-top: 4px;
}
.tux-dialog-action__button {
display: block;
padding-left: 8px;
padding-right: 8px;
width: 100%;
height: 100%;
text-align: center;
}
.tux-dialog-action__button--primary {
color: var(--ui-image-overlay-white);
background-color: var(--ui-shape-primary);
}
.tux-dialog-action__button--primary:enabled:active {
opacity: 0.75;
}
.tux-dialog-action__button--secondary {
color: var(--ui-text-2);
}
.tux-dialog-action__button--secondary:enabled:active {
background-color: var(--ui-shape-neutral-4);
}
.tux-intro-image__container {
display: flex;
justify-content: center;
}
.tux-intro-image__large-image,
.tux-intro-image__full-bleed-image {
width: 100%;
max-width: 460px;
}
.tux-intro-bullet-message-item__container {
display: flex;
margin-bottom: 10px;
align-items: flex-start;
}
.tux-intro-bullet-message-item__container:last-of-type {
margin-bottom: 0;
}
[dir="ltr"] .tux-intro-bullet-message-item__bullet {
margin-left: 4px;
}
[dir="rtl"] .tux-intro-bullet-message-item__bullet {
margin-right: 4px;
}
[dir="ltr"] .tux-intro-bullet-message-item__bullet {
margin-right: 8px;
}
[dir="rtl"] .tux-intro-bullet-message-item__bullet {
margin-left: 8px;
}
.tux-intro-bullet-message-item__bullet {
height: 4px;
width: 4px;
border-radius: 100%;
flex-shrink: 0;
-webkit-margin-start: 4px;
-webkit-margin-end: 8px;
margin-top: 6px;
background-color: var(--ui-text-1);
}
.tux-intro-check-list-msg-item__container {
display: flex;
margin-bottom: 16px;
align-items: flex-start;
}
.tux-intro-check-list-msg-item__container:last-of-type {
margin-bottom: 0;
}
.tux-intro-check-list-msg-item__icon-container {
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
}
.tux-intro-check-list-msg-item__icon--uncheck {
height: 3px;
width: 8px;
border-radius: 0.5px;
background-color: var(--ui-text-3);
}
.tux-intro-icon-message-item__container {
display: flex;
margin-bottom: 16px;
align-items: center;
}
.tux-intro-icon-message-item__container--multi-line {
align-items: flex-start;
}
.tux-intro-icon-message-item__container:last-child {
margin-bottom: 0;
}
[dir="ltr"] .tux-intro-icon-message-item__icon-container {
margin-right: 12px;
}
[dir="rtl"] .tux-intro-icon-message-item__icon-container {
margin-left: 12px;
}
.tux-intro-icon-message-item__icon-container {
display: flex;
align-items: center;
flex-shrink: 0;
-webkit-margin-end: 12px;
}
.tux-intro-icon-message-item__message--single {
display: flex;
align-items: center;
}
.tux-intro-icon-message-item__message--without-title {
color: var(--ui-text-2);
}
/* need update */
.tux-intro-step-msg-item__container {
display: flex;
margin-bottom: 32px;
}
.tux-intro-step-msg-item--sheet-display.tux-intro-step-msg-item__container {
margin-bottom: 24px;
}
.tux-intro-step-msg-item__container:last-of-type,
.tux-intro-step-msg-item--sheet-display.tux-intro-step-msg-item__container:last-of-type {
margin-bottom: 0;
}
[dir="ltr"] .tux-intro-step-msg-item__dot-container {
margin-right: 4px;
}
[dir="rtl"] .tux-intro-step-msg-item__dot-container {
margin-left: 4px;
}
.tux-intro-step-msg-item__dot-container {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
-webkit-margin-end: 4px;
}
.tux-intro-step-msg-item__dot {
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #bdbdbd;
}
[dir="ltr"] .tux-intro-message__step-message-line {
left: 7.75px;
}
[dir="rtl"] .tux-intro-message__step-message-line {
right: 7.75px;
}
.tux-intro-message__step-message-line {
position: absolute;
top: 8px;
width: 0.5px;
z-index: -1;
background-color: var(--ui-shape-neutral-2);
}
/* hide scrollbar but allow scrolling */
.tux-intro-scroll-body__container {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: auto;
overflow-y: scroll;
box-sizing: content-box;
width: 100%;
height: 100%;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
}
.tux-intro-scroll-body__container::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
.tux-intro-title__h1 {
margin-top: 0;
margin-bottom: 12px;
color: var(--ui-text-1);
}
.tux-intro-title__h1--2lines {
font-size: 22px;
line-height: 26px;
font-weight: bold;
}
.tux-intro-content--px-32 {
padding-left: 32px;
padding-right: 32px;
}
.tux-intro-content__nav-bar {
position: sticky;
top: 0;
height: 52px;
}
.tux-intro-content__footer {
box-sizing: border-box;
position: sticky;
bottom: 0;
}
.tux-intro-content__footer--with-border {
border-top: solid 0.5px var(--ui-shape-neutral-3);
}
.tux-intro-content__cta-layout {
display: grid;
grid-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
grid-row-gap: 6px;
row-gap: 6px;
}
.tux-intro-content__cta-layout--row {
grid-template-columns: repeat(2, 1fr);
}
.tux-intro-nav-bar__container {
display: flex;
height: 52px;
padding-left: 16px;
padding-right: 16px;
justify-content: flex-end;
align-items: center;
}
.tux-intro-nav-bar__header-close-icon {
transition: background-color 250ms linear;
font-size: 0;
padding: 0;
border-radius: 9999px;
width: 24px;
height: 24px;
z-index: 1;
color: var(--ui-text-1);
display: flex;
align-items: center;
justify-content: center;
}
.tux-intro-nav-bar--bg-shape-neutral-4 {
background-color: var(--ui-shape-neutral-4);
}
.tux-intro__container--sheet {
display: flex;
position: relative;
max-height: calc(73vh - 32px);
}
.tux-intro__container--full-screen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-bottom: env(safe-area-inset-bottom);
}
.TUXPrice {
display: inline-flex;
/* price is not influenced by direction */
direction: ltr;
}
.TUXPrice--normal {
align-items: baseline;
}
.TUXPrice--strike {
align-items: center;
text-decoration: line-through;
color: var(--ui-text-placeholder);
}
.TUXPrice-symbol-between {
white-space: pre;
}
.TUXTableCell-host.TUXTableCell-host--clickable:active {
background-color: var(--ui-shape-neutral-4);
}
.TUXTableCell {
padding-left: 16px;
padding-right: 16px;
padding-top: 10px;
padding-bottom: 10px;
}
.TUXTableCell--disabled {
opacity: 0.34;
}
.TUXTableCell-core {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
[dir="ltr"] .TUXTableCell-icon {
margin-right: 8px;
}
[dir="rtl"] .TUXTableCell-icon {
margin-left: 8px;
}
.TUXTableCell-icon {
width: 20px;
height: 20px;
font-size: 20px;
color: var(--ui-text-2);
}
.TUXTableCell-titleContainer {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding-top: 1px;
padding-bottom: 1px;
}
[dir="ltr"] .TUXTableCell-title {
margin-right: 48px;
}
[dir="rtl"] .TUXTableCell-title {
margin-left: 48px;
}
.TUXTableCell-title {
flex: 1 1 0%;
flex-shrink: 0;
color: var(--ui-text-1);
word-break: break-word;
}
[dir="ltr"] .TUXTableCell-subtitle {
margin-left: 0px;
}
[dir="rtl"] .TUXTableCell-subtitle {
margin-right: 0px;
}
.TUXTableCell-subtitle {
color: var(--ui-text-3);
}
[dir="ltr"] .TUXTableCell-subtitle--withIcon {
margin-left: 28px;
}
[dir="rtl"] .TUXTableCell-subtitle--withIcon {
margin-right: 28px;
}
.TUXTableCell-accessory {
display: flex;
flex: none;
}
.TUXTableCell-accessory--hasTextProps {
color: var(--ui-text-2);
}
.TUXTableCell-accessory[data-accessory-type='button'] {
max-width: 120px;
}
.TUXTableCell-accessory[data-accessory-type='label'] {
height: 18px;
max-width: 120px;
}
.TUXTableCell-accessory[data-accessory-type='disclosure'] {
height: 18px;
max-width: 160px;
}
.TUXTableDisclosureCell {
display: flex;
flex-direction: row;
align-items: center;
}
.TUXTableLabelCell {
display: flex;
}
.TUXStatusView-banner {
display: flex;
align-items: flex-end;
height: 180px;
margin-bottom: 8px;
}
.TUXStatusView-banner-image {
width: 100%;
max-height: 100%;
}
.TUXStatusView-icon {
display: flex;
justify-content: center;
height: 72px;
margin-bottom: 8px;
}
.TUXStatusView {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
overflow: visible;
}
.TUXStatusView-title {
margin-top: 8px;
color: var(--ui-text-1);
}
.TUXStatusView-message {
margin-top: 8px;
color: var(--ui-text-3);
}
.TUXStatusViewFixedHeightLayout {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.TUXStatusViewFixedHeightLayout-block {
flex-grow: 0;
flex-shrink: 0;
}
.TUXStatusViewFixedHeightLayout-top-spacing--normal {
flex-basis: calc(40% - 42px);
}
.TUXStatusViewFixedHeightLayout-top-spacing--icon {
flex-basis: calc(40% - 114px);
}
.TUXStatusViewFixedHeightLayout-top-spacing--banner {
flex-basis: calc(40% - 222px);
}
.TUXStatusViewFixedHeightLayout-body--normal {
flex-basis: 168px;
}
.TUXStatusViewFixedHeightLayout-body--icon {
flex-basis: 240px;
}
.TUXStatusViewFixedHeightLayout-body--banner {
flex-basis: 348px;
}
.TUXStatusViewFixedHeightLayout-middle-spacing {
flex: 0 0 calc(30% - 84px);
}
.TUXStatusViewFixedHeightLayout-footer {
flex: 0 0 auto;
display: flex;
justify-content: center;
margin-top: auto;
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}
.TUXStatusViewHugContentLayout {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.TUXStatusViewHugContentLayout-top-spacing {
flex: 2 0 0;
}
.TUXStatusViewHugContentLayout-body {
flex: 0 0 auto;
}
.TUXStatusViewHugContentLayout-body-button {
display: flex;
justify-content: center;
margin-top: 24px;
}
.TUXStatusViewHugContentLayout-bottom-spacing {
flex: 3 0 0;
}
.tux-wheel-picker__container {
overflow: hidden;
width: 100%;
text-align: center;
}
.tux-wheel-picker__item {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 17px;
}
.tux-wheel-picker-columns-layout__container {
display: flex;
align-items: center;
justify-content: space-around;
}
.tux-wheel-picker-columns-layout-item__container {
flex: 1 1 0;
}
@supports (display: grid) {
.tux-wheel-picker-columns-layout__container {
display: grid;
}
}
.tux-wheel-picker-overlay__container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
z-index: 1000;
}
.tux-wheel-picker-overlay__items-chosen {
width: 100%;
background-color: var(--ui-shape-neutral-4);
border-radius: 8px;
}
.tux-wheel-picker-overlay__items-others {
width: 100%;
}
.tux-group-selector__container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: none;
padding-left: 16px;
padding-right: 16px;
background-color: var(--ui-page-flat-1);
}
.tux-group-selector__search-container {
padding-bottom: 4px;
margin-bottom: 8px;
}
.tux-group-selector-section {
cursor: pointer;
}
.tux-group-selector-section_title {
position: sticky;
top: 0;
color: var(--ui-text-3);
background-color: var(--ui-page-flat-1);
}
.tux-group-selector-option-cell {
font-size: 15px;
line-height: 18px;
cursor: pointer;
}
.tux-group-selector-body {
position: relative;
flex: 1;
padding: 0;
scrollbar-width: 0;
overflow: auto;
}
.tux-group-selector-body-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tux-group-selector-body::-webkit-scrollbar {
width: 0;
}
.TUXStickyTopLayout {
position: sticky;
}
.tux-pagination-pc__container {
display: flex;
align-items: center;
}
[dir="ltr"] .tux-pagination-pc__container > button:not(:first-child) {
margin-left: 8px;
}
[dir="rtl"] .tux-pagination-pc__container > button:not(:first-child) {
margin-right: 8px;
}
.tux-pagination-pc__button {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 36px;
min-width: 36px;
display: inline-flex;
justify-content: center;
align-items: center;
padding-top: 0;
padding-bottom: 0;
padding-left: 3px;
padding-right: 3px;
border-width: 1px;
border-style: solid;
border-color: var(--ui-shape-neutral-2);
border-radius: 2px;
font-family: 'TikTokFont', Arial, Tahoma, PingFangSC, sans-serif;
background-color: var(--ui-page-grouped-2);
color: var(--ui-text-1);
cursor: pointer;
background-clip: padding-box;
}
.tux-pagination-pc__button:disabled {
cursor: not-allowed;
color: var(--ui-text-placeholder);
}
.tux-pagination-pc__button:hover:not(:disabled) {
background-color: var(--ui-page-flat-3);
}
.tux-pagination-pc__button:active:not(:disabled) {
background-color: var(--ui-sheet-flat-3);
}
.tux-pagination-pc__ellipses-container {
box-sizing: border-box;
height: 36px;
width: 36px;
padding-bottom: 4px;
display: inline-flex;
justify-content: center;
align-items: flex-start;
}
.tux-pagination-pc__ellipses-icon {
color: var(--ui-text-placeholder);
height: 16px;
width: 16px;
}
.tux-pagination-pc__prev-icon {
box-sizing: border-box;
height: 16px;
width: 16px;
transform: rotate(90deg);
}
[dir='rtl'] .tux-pagination-pc__prev-icon {
transform: rotate(-90deg);
}
.tux-pagination-pc__next-icon {
box-sizing: border-box;
height: 16px;
width: 16px;
transform: rotate(-90deg);
}
[dir='rtl'] .tux-pagination-pc__next-icon {
transform: rotate(90deg);
}
.TUXSelectField {
width: 360px;
max-width: 100%;
}
.TUXSelectField-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
all: unset;
box-sizing: border-box;
width: 100%;
font-size: 16px;
font-family: var(--tux-web-font-body);
font-weight: 400;
display: flex;
align-items: center;
border: 2px solid transparent;
border-radius: 8px;
background-color: var(--ui-shape-neutral-4);
color: var(--ui-text-1);
cursor: pointer;
}
[dir="ltr"] .TUXSelectField-button--xsmall {
padding-left: 8px;
}
[dir="rtl"] .TUXSelectField-button--xsmall {
padding-right: 8px;
}
[dir="ltr"] .TUXSelectField-button--xsmall {
padding-right: 4px;
}
[dir="rtl"] .TUXSelectField-button--xsmall {
padding-left: 4px;
}
.TUXSelectField-button--xsmall {
height: 28px;
}
[dir="ltr"] .TUXSelectField-button--small {
padding-left: 10px;
}
[dir="rtl"] .TUXSelectField-button--small {
padding-right: 10px;
}
[dir="ltr"] .TUXSelectField-button--small {
padding-right: 6px;
}
[dir="rtl"] .TUXSelectField-button--small {
padding-left: 6px;
}
.TUXSelectField-button--small {
height: 32px;
}
[dir="ltr"] .TUXSelectField-button--medium {
padding-left: 12px;
}
[dir="rtl"] .TUXSelectField-button--medium {
padding-right: 12px;
}
[dir="ltr"] .TUXSelectField-button--medium {
padding-right: 8px;
}
[dir="rtl"] .TUXSelectField-button--medium {
padding-left: 8px;
}
.TUXSelectField-button--medium {
height: 40px;
}
[dir="ltr"] .TUXSelectField-button--large {
padding-left: 16px;
}
[dir="rtl"] .TUXSelectField-button--large {
padding-right: 16px;
}
[dir="ltr"] .TUXSelectField-button--large {
padding-right: 12px;
}
[dir="rtl"] .TUXSelectField-button--large {
padding-left: 12px;
}
.TUXSelectField-button--large {
height: 48px;
}
.TUXSelectField-button--disabled {
opacity: 0.4;
}
.TUXSelectField-button:focus {
border: 2px solid var(--ui-shape-neutral);
background-color: transparent;
}
.TUXSelectField-button--error {
border: 2px solid var(--ui-text-danger-display);
background-color: transparent;
}
.TUXSelectField-buttonLabel {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.TUXSelectField-buttonLabel--placeholder {
color: var(--ui-text-placeholder);
}
.TUXSelectField-spacer {
flex: 1;
}
.TUXMultiItemPicker-confirm-panel {
position: sticky;
bottom: 0;
padding: 16px 16px 45px 16px;
border-top: 0.5px solid var(--ui-shape-neutral-3);
}
.TUXMultiItemPicker-confirm-panel-button {
width: 100%;
}
.tux-app-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.tux-app-bar-status-placeholder {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.tux-app-bar-placeholder {
flex-shrink: 0;
padding-bottom: 52px;
}
.TUXFullBleedLoadingPage-layout {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.TUXFullBleedLoadingPage-page {
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
padding-bottom: env(safe-area-inset-bottom);
}
.TUXFullBleedLoadingPage-navbar {
flex: none;
}
.TUXFullBleedLoadingPage-view {
flex: 1;
}
.TUXFullBleedLoadingPage-loading {
display: flex;
justify-content: center;
}