/* [project]/src/app/globals.scss.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } *, :before, :after { box-sizing: border-box; } html, body { background-color: #fff; min-height: 100vh; margin: 0; padding: 0; } /* [project]/src/core/styles/google-fonts.css [app-client] (css) */ @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/google/inter/inter-cyrillic-ext-100-900-fccca918.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/google/inter/inter-cyrillic-100-900-aebf2ab4.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/google/inter/inter-greek-ext-100-900-a2e2c783.woff2") format("woff2"); unicode-range: U+1F??; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/google/inter/inter-greek-100-900-46dd4cdc.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/google/inter/inter-vietnamese-100-900-8db00ff4.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/google/inter/inter-latin-ext-100-900-a28eb6d3.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/google/inter/inter-latin-100-900-c9407645.woff2") format("woff2"); unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter Fallback; src: local(Arial); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } :root { --font-primary: "Inter", "Inter Fallback"; } .font-inter { font-family: Inter, Inter Fallback; font-style: normal; } /* [project]/src/core/components/common/text/text.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } /* [project]/src/core/components/common/input-field/input-field.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .input-field-module-scss-module__DUazwa__container { flex-direction: column; display: flex; } .input-field-module-scss-module__DUazwa__labelWrapper { align-items: center; gap: var(--space-tiny); margin-bottom: var(--space-tiny); display: inline-flex; } .input-field-module-scss-module__DUazwa__labelText { color: var(--color-font-links-labels); font-family: var(--font-family-labels); font-size: var(--font-size-sm); cursor: default; font-weight: 400; line-height: 14px; } .input-field-module-scss-module__DUazwa__required { color: var(--color-danger-600); margin-inline-start: var(--space-micro); } .input-field-module-scss-module__DUazwa__labelIcon { width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .input-field-module-scss-module__DUazwa__labelIcon svg { width: 16px; height: 16px; } .input-field-module-scss-module__DUazwa__labelIcon { cursor: pointer; transition: opacity .2s; } .input-field-module-scss-module__DUazwa__labelIcon:hover { opacity: .7; } .input-field-module-scss-module__DUazwa__tooltipContainer { display: inline-flex; position: relative; } .input-field-module-scss-module__DUazwa__tooltip { padding: var(--space-small); border-radius: var(--radius-sm); color: #fff; font-size: var(--font-size-xs); font-family: var(--font-family-texts); white-space: normal; word-wrap: break-word; z-index: 1000; max-width: 240px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; background: #000000e6; transition: opacity .2s ease-in-out, visibility .2s ease-in-out, transform .2s ease-in-out; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .input-field-module-scss-module__DUazwa__tooltip.input-field-module-scss-module__DUazwa__tooltipVisible { opacity: 1; visibility: visible; transform: translateX(-50%)translateY(0); } .input-field-module-scss-module__DUazwa__tooltip:not(.input-field-module-scss-module__DUazwa__tooltipVisible) { transform: translateX(-50%)translateY(-4px); } .input-field-module-scss-module__DUazwa__tooltipArrow { border-bottom: 6px solid #000000e6; border-left: 6px solid #0000; border-right: 6px solid #0000; width: 0; height: 0; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); } .input-field-module-scss-module__DUazwa__inputWrapper { align-items: center; gap: var(--space-small); transition: border-color .15s, box-shadow .15s, background-color .15s; display: flex; } .input-field-module-scss-module__DUazwa__inputWrapper:focus-within:not(.input-field-module-scss-module__DUazwa__statusDisabled):not(.input-field-module-scss-module__DUazwa__statusError):not(.input-field-module-scss-module__DUazwa__statusSuccess):not(.input-field-module-scss-module__DUazwa__statusInfo) { border-radius: var(--spacing-space-small, 8px); border: 1px solid var(--color-primary-300, #96c0fa); background: #fff; outline: none; box-shadow: 0 8px 16px #96c0fa1f; } .input-field-module-scss-module__DUazwa__sizeXsmall { min-height: 36px; padding: var(--space-compact) var(--space-small); align-items: center; gap: var(--space-small); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: #fff; display: flex; } .input-field-module-scss-module__DUazwa__sizeSmall { min-height: 40px; padding: var(--space-compact) var(--space-small); align-items: center; gap: var(--space-small); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: #fff; display: flex; } .input-field-module-scss-module__DUazwa__sizeMedium { min-height: 44px; padding: var(--space-medium) var(--space-compact); align-items: center; gap: var(--space-small); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: #fff; display: flex; } .input-field-module-scss-module__DUazwa__sizeLarge { min-height: 48px; padding: var(--space-medium) var(--space-medium); align-items: center; gap: var(--space-small); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: #fff; display: flex; } .input-field-module-scss-module__DUazwa__statusDefault { border-color: var(--color-border-default); background: #fff; } .input-field-module-scss-module__DUazwa__statusError { border: 1px solid var(--color-danger-300); background: #fff; box-shadow: 0 8px 16px #ff9d9d1f; } .input-field-module-scss-module__DUazwa__statusError:focus-within { border: 1px solid var(--color-danger-300); outline: none; box-shadow: 0 8px 16px #ff9d9d1f; } .input-field-module-scss-module__DUazwa__statusSuccess { border: 1px solid var(--color-success-300); background: #fff; box-shadow: 0 8px 16px #90e5a31f; } .input-field-module-scss-module__DUazwa__statusSuccess:focus-within { border: 1px solid var(--color-success-300); outline: none; box-shadow: 0 8px 16px #90e5a31f; } .input-field-module-scss-module__DUazwa__statusInfo { border: 1px solid var(--color-primary-300); background: #fff; box-shadow: 0 8px 16px #96c0fa1f; } .input-field-module-scss-module__DUazwa__statusInfo:focus-within { border: 1px solid var(--color-primary-300); outline: none; box-shadow: 0 8px 16px #96c0fa1f; } .input-field-module-scss-module__DUazwa__statusDisabled { border-color: var(--color-border-default); background: var(--color-secondary-50); opacity: .6; pointer-events: none; cursor: not-allowed; } .input-field-module-scss-module__DUazwa__searchVariant, .input-field-module-scss-module__DUazwa__passwordVariant { position: relative; } .input-field-module-scss-module__DUazwa__inputElement { font-family: var(--font-family-texts); background: none; border: none; outline: none; flex: 1; width: 100%; min-width: 0; } .input-field-module-scss-module__DUazwa__inputElement::placeholder { color: var(--color-font-disable); } .input-field-module-scss-module__DUazwa__inputElement:disabled { cursor: not-allowed; } .input-field-module-scss-module__DUazwa__inputElement { color: var(--color-font-headings); } .input-field-module-scss-module__DUazwa__inputElement:focus { color: var(--color-font-headings); outline: none; } .input-field-module-scss-module__DUazwa__inputElement:disabled { color: var(--color-font-disable); } .input-field-module-scss-module__DUazwa__inputElement[type="search"]::-webkit-search-decoration { display: none; } .input-field-module-scss-module__DUazwa__inputElement[type="search"]::-webkit-search-cancel-button { display: none; } .input-field-module-scss-module__DUazwa__inputElement[type="search"]::-webkit-search-results-button { display: none; } .input-field-module-scss-module__DUazwa__inputElement[type="search"]::-webkit-search-results-decoration { display: none; } .input-field-module-scss-module__DUazwa__inputElement[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; } .input-field-module-scss-module__DUazwa__inputElement[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; } .input-field-module-scss-module__DUazwa__inputElement[type="number"] { appearance: textfield; } .input-field-module-scss-module__DUazwa__fontXsmall { font-size: 14px; line-height: 14px; } .input-field-module-scss-module__DUazwa__fontSmall, .input-field-module-scss-module__DUazwa__fontMedium, .input-field-module-scss-module__DUazwa__fontLarge { font-size: 16px; line-height: 20px; } .input-field-module-scss-module__DUazwa__inputIcon { width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .input-field-module-scss-module__DUazwa__inputIcon svg { width: 16px; height: 16px; } .input-field-module-scss-module__DUazwa__searchIcon { width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .input-field-module-scss-module__DUazwa__searchIcon svg { width: 16px; height: 16px; } .input-field-module-scss-module__DUazwa__clearIcon { width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .input-field-module-scss-module__DUazwa__clearIcon svg { width: 16px; height: 16px; } .input-field-module-scss-module__DUazwa__clearIcon { cursor: pointer; transition: opacity .2s; } .input-field-module-scss-module__DUazwa__clearIcon:hover { opacity: .7; } .input-field-module-scss-module__DUazwa__eyeIcon { width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .input-field-module-scss-module__DUazwa__eyeIcon svg { width: 16px; height: 16px; } .input-field-module-scss-module__DUazwa__eyeIcon { cursor: pointer; transition: opacity .2s; } .input-field-module-scss-module__DUazwa__eyeIcon:hover { opacity: .7; } .input-field-module-scss-module__DUazwa__message { margin-top: var(--space-tiny); font-size: var(--font-size-xs); line-height: 14px; font-family: var(--font-family-texts); } .input-field-module-scss-module__DUazwa__messageDefault { color: var(--color-font-links-labels); } .input-field-module-scss-module__DUazwa__messageError { color: var(--color-danger-600); } .input-field-module-scss-module__DUazwa__messageSuccess { color: var(--color-success-600); } .input-field-module-scss-module__DUazwa__messageDisabled { color: var(--color-font-disable); } .input-field-module-scss-module__DUazwa__otpBoxContainer { border: 2px solid var(--color-border-default); border-radius: var(--radius-sm); background: #fff; justify-content: center; align-items: center; transition: all .15s; display: flex; position: relative; } .input-field-module-scss-module__DUazwa__otpBoxContainer:hover:not(.input-field-module-scss-module__DUazwa__otpBoxDisabled) { border-color: var(--color-primary-400); } .input-field-module-scss-module__DUazwa__otpBoxContainer:focus-within:not(.input-field-module-scss-module__DUazwa__otpBoxError):not(.input-field-module-scss-module__DUazwa__otpBoxDisabled) { border: 2px solid var(--color-primary-300, #96c0fa); outline: none; box-shadow: 0 8px 16px #96c0fa1f; } .input-field-module-scss-module__DUazwa__otpBoxContainer.input-field-module-scss-module__DUazwa__sizeSmall { width: 40px; height: 40px; min-height: 40px; } .input-field-module-scss-module__DUazwa__otpBoxContainer.input-field-module-scss-module__DUazwa__sizeMedium { width: 48px; height: 48px; min-height: 48px; } .input-field-module-scss-module__DUazwa__otpBoxContainer.input-field-module-scss-module__DUazwa__sizeLarge { width: 56px; height: 56px; min-height: 56px; } .input-field-module-scss-module__DUazwa__otpBoxError { border-color: var(--color-danger-300); box-shadow: 0 8px 16px #ff9d9d1f; } .input-field-module-scss-module__DUazwa__otpBoxError:focus-within { border-color: var(--color-danger-300); outline: none; box-shadow: 0 8px 16px #ff9d9d1f; } .input-field-module-scss-module__DUazwa__otpBoxDisabled { background: var(--color-secondary-50); border-color: var(--color-border-default); opacity: .6; cursor: not-allowed; } .input-field-module-scss-module__DUazwa__otpBoxInput { text-align: center; width: 100%; height: 100%; font-family: var(--font-family-texts); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); color: var(--color-font-headings); cursor: text; background: none; border: none; outline: none; } .input-field-module-scss-module__DUazwa__otpBoxInput:focus { color: var(--color-font-headings); outline: none; } .input-field-module-scss-module__DUazwa__otpBoxInput::placeholder { color: var(--color-font-disable); } .input-field-module-scss-module__DUazwa__otpBoxInput:disabled { cursor: not-allowed; color: var(--color-font-disable); } @media (prefers-reduced-motion: reduce) { .input-field-module-scss-module__DUazwa__tooltip { animation: none; } .input-field-module-scss-module__DUazwa__inputWrapper, .input-field-module-scss-module__DUazwa__labelIcon, .input-field-module-scss-module__DUazwa__clearIcon, .input-field-module-scss-module__DUazwa__eyeIcon { transition: none; } } [dir="rtl"] .input-field-module-scss-module__DUazwa__labelWrapper, [dir="rtl"] .input-field-module-scss-module__DUazwa__inputWrapper { flex-direction: row-reverse; } [dir="rtl"] .input-field-module-scss-module__DUazwa__tooltip { left: auto; right: 50%; transform: translateX(50%)translateY(-4px); } [dir="rtl"] .input-field-module-scss-module__DUazwa__tooltip.input-field-module-scss-module__DUazwa__tooltipVisible { transform: translateX(50%)translateY(0); } [dir="rtl"] .input-field-module-scss-module__DUazwa__tooltipArrow { left: auto; right: 50%; transform: translateX(50%); } /* [project]/src/core/components/common/button/button.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .button-module-scss-module__QGYYNq__button { justify-content: center; align-items: center; gap: var(--button-gap); font-family: var(--font-family-buttons); font-weight: var(--font-weight-medium); border-radius: var(--button-radius); cursor: pointer; appearance: none; border: 1px solid #0000; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; display: inline-flex; } .button-module-scss-module__QGYYNq__button:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .button-module-scss-module__QGYYNq__button:disabled, .button-module-scss-module__QGYYNq__button[aria-disabled="true"] { cursor: not-allowed; opacity: .6; } .button-module-scss-module__QGYYNq__button { white-space: nowrap; -webkit-user-select: none; user-select: none; min-height: 32px; position: relative; } .button-module-scss-module__QGYYNq__button:active:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled) { transform: translateY(1px); } .button-module-scss-module__QGYYNq__fullWidth { width: 100%; } .button-module-scss-module__QGYYNq__size-xsmall { padding: var(--button-xsmall-padding-top) var(--button-xsmall-padding-right) var(--button-xsmall-padding-bottom) var(--button-xsmall-padding-left); font-size: var(--font-size-sm); line-height: var(--line-height-button); } .button-module-scss-module__QGYYNq__size-xsmall svg, .button-module-scss-module__QGYYNq__size-xsmall img { width: var(--button-xsmall-icon); height: var(--button-xsmall-icon); } .button-module-scss-module__QGYYNq__size-xsmall { min-height: var(--button-height-xsmall); text-transform: none; } .button-module-scss-module__QGYYNq__size-small { padding: var(--button-small-padding-top) var(--button-small-padding-right) var(--button-small-padding-bottom) var(--button-small-padding-left); font-size: var(--font-size-sm); line-height: var(--line-height-button); } .button-module-scss-module__QGYYNq__size-small svg, .button-module-scss-module__QGYYNq__size-small img { width: var(--button-small-icon); height: var(--button-small-icon); } .button-module-scss-module__QGYYNq__size-small { min-height: var(--button-height-small); text-transform: none; } .button-module-scss-module__QGYYNq__size-medium { padding: var(--button-medium-padding-top) var(--button-medium-padding-right) var(--button-medium-padding-bottom) var(--button-medium-padding-left); font-size: var(--font-size-md); line-height: var(--line-height-button); } .button-module-scss-module__QGYYNq__size-medium svg, .button-module-scss-module__QGYYNq__size-medium img { width: var(--button-medium-icon); height: var(--button-medium-icon); } .button-module-scss-module__QGYYNq__size-medium { min-height: var(--button-height-medium); text-transform: capitalize; } .button-module-scss-module__QGYYNq__size-large { padding: var(--button-large-padding-top) var(--button-large-padding-right) var(--button-large-padding-bottom) var(--button-large-padding-left); font-size: var(--font-size-md); line-height: var(--line-height-button); } .button-module-scss-module__QGYYNq__size-large svg, .button-module-scss-module__QGYYNq__size-large img { width: var(--button-large-icon); height: var(--button-large-icon); } .button-module-scss-module__QGYYNq__size-large { min-height: var(--button-height-large); text-transform: capitalize; } .button-module-scss-module__QGYYNq__size-xlarge { padding: var(--button-large-padding-top) var(--button-large-padding-right) var(--button-large-padding-bottom) var(--button-large-padding-left); font-size: var(--font-size-md); line-height: var(--line-height-button); } .button-module-scss-module__QGYYNq__size-xlarge svg, .button-module-scss-module__QGYYNq__size-xlarge img { width: var(--button-large-icon); height: var(--button-large-icon); } .button-module-scss-module__QGYYNq__size-xlarge { min-height: var(--button-height-large); text-transform: capitalize; padding: var(--space-medium) var(--space-xlarge); } .button-module-scss-module__QGYYNq__iconOnly { white-space: normal; justify-content: center; align-items: center; display: inline-flex; padding: 0 !important; } .button-module-scss-module__QGYYNq__iconOnly .button-module-scss-module__QGYYNq__icon { width: 1em; height: 1em; margin: 0; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-small { justify-content: center; align-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-flex; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-small .button-module-scss-module__QGYYNq__icon, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-small svg, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-small img { width: 1em; height: 1em; color: inherit; flex-shrink: 0; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-small { font-size: 16px; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-medium { justify-content: center; align-items: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-flex; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-medium .button-module-scss-module__QGYYNq__icon, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-medium svg, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-medium img { width: 1em; height: 1em; color: inherit; flex-shrink: 0; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-medium { font-size: 20px; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-large { justify-content: center; align-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-large .button-module-scss-module__QGYYNq__icon, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-large svg, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-large img { width: 1em; height: 1em; color: inherit; flex-shrink: 0; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-large { font-size: 20px; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-xlarge { justify-content: center; align-items: center; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; display: inline-flex; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-xlarge .button-module-scss-module__QGYYNq__icon, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-xlarge svg, .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-xlarge img { width: 1em; height: 1em; color: inherit; flex-shrink: 0; } .button-module-scss-module__QGYYNq__iconOnly.button-module-scss-module__QGYYNq__size-xlarge { font-size: 24px; } .button-module-scss-module__QGYYNq__variant-primary { background-color: var(--button-primary-bg-default); color: var(--button-primary-font-default); border-color: #0000; } .button-module-scss-module__QGYYNq__variant-primary:hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-primary-bg-hover); color: var(--button-primary-font-hover); } .button-module-scss-module__QGYYNq__variant-primary:focus:not(:disabled):not([aria-disabled="true"]), .button-module-scss-module__QGYYNq__variant-primary:active:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-primary-bg-focused); color: var(--button-primary-font-focused); } .button-module-scss-module__QGYYNq__variant-primary:disabled, .button-module-scss-module__QGYYNq__variant-primary[aria-disabled="true"] { background-color: var(--button-primary-bg-disabled); color: var(--button-primary-font-disabled); } .button-module-scss-module__QGYYNq__variant-primaryOutlined { background-color: var(--button-primary-outline-bg-default); color: var(--button-primary-outline-font-default); border-color: var(--button-primary-outline-border-default); } .button-module-scss-module__QGYYNq__variant-primaryOutlined:hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-primary-outline-bg-hover); color: var(--button-primary-outline-font-hover); border-color: var(--button-primary-outline-border-hover); } .button-module-scss-module__QGYYNq__variant-primaryOutlined:focus:not(:disabled):not([aria-disabled="true"]), .button-module-scss-module__QGYYNq__variant-primaryOutlined:active:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-primary-outline-bg-focused); color: var(--button-primary-outline-font-focused); border-color: var(--button-primary-outline-border-focused); } .button-module-scss-module__QGYYNq__variant-primaryOutlined:disabled, .button-module-scss-module__QGYYNq__variant-primaryOutlined[aria-disabled="true"] { background-color: var(--button-primary-outline-bg-disabled); color: var(--button-primary-outline-font-disabled); border-color: var(--button-primary-outline-border-disabled); } .button-module-scss-module__QGYYNq__variant-secondary { background-color: var(--button-secondary-outline-bg-default); color: var(--button-secondary-outline-font-default); border-color: var(--button-secondary-outline-border-default); } .button-module-scss-module__QGYYNq__variant-secondary:hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-secondary-outline-bg-hover); color: var(--button-secondary-outline-font-hover); border-color: var(--button-secondary-outline-border-hover); } .button-module-scss-module__QGYYNq__variant-secondary:focus:not(:disabled):not([aria-disabled="true"]), .button-module-scss-module__QGYYNq__variant-secondary:active:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-secondary-outline-bg-focused); color: var(--button-secondary-outline-font-focused); border-color: var(--button-secondary-outline-border-focused); } .button-module-scss-module__QGYYNq__variant-secondary:disabled, .button-module-scss-module__QGYYNq__variant-secondary[aria-disabled="true"] { background-color: var(--button-secondary-outline-bg-disabled); color: var(--button-secondary-outline-font-disabled); border-color: var(--button-secondary-outline-border-disabled); } .button-module-scss-module__QGYYNq__variant-secondarySolid { background-color: var(--button-secondary-bg-default); color: var(--button-secondary-font-default); border-color: #0000; } .button-module-scss-module__QGYYNq__variant-secondarySolid:hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-secondary-bg-hover); color: var(--button-secondary-font-hover); } .button-module-scss-module__QGYYNq__variant-secondarySolid:focus:not(:disabled):not([aria-disabled="true"]), .button-module-scss-module__QGYYNq__variant-secondarySolid:active:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-secondary-bg-focused); color: var(--button-secondary-font-focused); } .button-module-scss-module__QGYYNq__variant-secondarySolid:disabled, .button-module-scss-module__QGYYNq__variant-secondarySolid[aria-disabled="true"] { background-color: var(--button-secondary-bg-disabled); color: var(--button-secondary-font-disabled); } .button-module-scss-module__QGYYNq__variant-link { background-color: var(--button-link-bg-default); color: var(--button-link-font-default); text-underline-offset: 2px; border-color: #0000; text-decoration: underline; } .button-module-scss-module__QGYYNq__variant-link:hover:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-link-bg-hover); color: var(--button-link-font-hover); } .button-module-scss-module__QGYYNq__variant-link:focus:not(:disabled):not([aria-disabled="true"]), .button-module-scss-module__QGYYNq__variant-link:active:not(:disabled):not([aria-disabled="true"]) { background-color: var(--button-link-bg-focused); color: var(--button-link-font-focused); } .button-module-scss-module__QGYYNq__variant-link:disabled, .button-module-scss-module__QGYYNq__variant-link[aria-disabled="true"] { background-color: var(--button-link-bg-disabled); color: var(--button-link-font-disabled); } .button-module-scss-module__QGYYNq__variant-link { gap: var(--space-small); padding-inline: 0; } .button-module-scss-module__QGYYNq__variant-danger { background-color: var(--color-danger-50); color: var(--color-danger-700); border-color: #0000; } .button-module-scss-module__QGYYNq__variant-danger:hover:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-danger[data-state="hover"]:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled) { background-color: var(--color-danger-100); } .button-module-scss-module__QGYYNq__variant-danger:focus-visible:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-danger[data-state="focus"]:not(:disabled):not(.button-module-scss-module__QGYYNq__disabled) { background-color: var(--color-danger-200); } .button-module-scss-module__QGYYNq__variant-danger.button-module-scss-module__QGYYNq__disabled, .button-module-scss-module__QGYYNq__variant-danger:disabled { background-color: var(--color-danger-50); color: var(--color-danger-400); opacity: .6; } .button-module-scss-module__QGYYNq__variant-warning { background-color: var(--color-warning-50); color: var(--color-warning-700); border-color: #0000; } .button-module-scss-module__QGYYNq__variant-warning:hover:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-warning[data-state="hover"]:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled) { background-color: var(--color-warning-100); } .button-module-scss-module__QGYYNq__variant-warning:focus-visible:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-warning[data-state="focus"]:not(:disabled):not(.button-module-scss-module__QGYYNq__disabled) { background-color: var(--color-warning-200); } .button-module-scss-module__QGYYNq__variant-warning.button-module-scss-module__QGYYNq__disabled, .button-module-scss-module__QGYYNq__variant-warning:disabled { background-color: var(--color-warning-50); color: var(--color-warning-400); opacity: .6; } .button-module-scss-module__QGYYNq__variant-success { background-color: var(--color-success-50); color: var(--color-success-700); border-color: #0000; } .button-module-scss-module__QGYYNq__variant-success:hover:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-success[data-state="hover"]:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled) { background-color: var(--color-success-100); } .button-module-scss-module__QGYYNq__variant-success:focus-visible:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-success[data-state="focus"]:not(:disabled):not(.button-module-scss-module__QGYYNq__disabled) { background-color: var(--color-success-200); } .button-module-scss-module__QGYYNq__variant-success.button-module-scss-module__QGYYNq__disabled, .button-module-scss-module__QGYYNq__variant-success:disabled { background-color: var(--color-success-50); color: var(--color-success-400); opacity: .6; } .button-module-scss-module__QGYYNq__variant-ghost { color: var(--color-primary-600); box-shadow: none; background-color: #0000; border-color: #0000; } .button-module-scss-module__QGYYNq__variant-ghost:hover:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-ghost[data-state="hover"]:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled) { background-color: var(--color-primary-50); } .button-module-scss-module__QGYYNq__variant-ghost:focus-visible:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-ghost[data-state="focus"]:not(:disabled):not(.button-module-scss-module__QGYYNq__disabled) { background-color: var(--color-primary-100); box-shadow: 0 0 0 3px var(--color-primary-200); } .button-module-scss-module__QGYYNq__variant-ghost.button-module-scss-module__QGYYNq__disabled, .button-module-scss-module__QGYYNq__variant-ghost:disabled { color: var(--color-primary-400); opacity: .6; } .button-module-scss-module__QGYYNq__variant-textOnly, .button-module-scss-module__QGYYNq__variant-text-only { color: var(--color-font-headings); padding-inline: 0; text-decoration: none; box-shadow: none !important; background-color: #0000 !important; border-color: #0000 !important; } .button-module-scss-module__QGYYNq__variant-textOnly:hover:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-textOnly[data-state="hover"]:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-text-only:hover:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-text-only[data-state="hover"]:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled) { color: var(--color-font-headings); text-decoration: none; box-shadow: none !important; background-color: #0000 !important; border-color: #0000 !important; } .button-module-scss-module__QGYYNq__variant-textOnly:focus-visible:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-textOnly[data-state="focus"]:not(:disabled):not(.button-module-scss-module__QGYYNq__disabled), .button-module-scss-module__QGYYNq__variant-text-only:focus-visible:not(.button-module-scss-module__QGYYNq__disabled):not(:disabled), .button-module-scss-module__QGYYNq__variant-text-only[data-state="focus"]:not(:disabled):not(.button-module-scss-module__QGYYNq__disabled) { text-decoration: underline; text-decoration-thickness: 2px; background-color: #0000 !important; } .button-module-scss-module__QGYYNq__variant-textOnly.button-module-scss-module__QGYYNq__disabled, .button-module-scss-module__QGYYNq__variant-textOnly:disabled, .button-module-scss-module__QGYYNq__variant-text-only.button-module-scss-module__QGYYNq__disabled, .button-module-scss-module__QGYYNq__variant-text-only:disabled { color: var(--color-font-disable); opacity: .6; text-decoration: none; } .button-module-scss-module__QGYYNq__button.button-module-scss-module__QGYYNq__disabled, .button-module-scss-module__QGYYNq__button:disabled { cursor: not-allowed; pointer-events: none; transform: none; } .button-module-scss-module__QGYYNq__loading { cursor: wait; } .button-module-scss-module__QGYYNq__loading .button-module-scss-module__QGYYNq__text { opacity: .85; } .button-module-scss-module__QGYYNq__text { justify-content: center; align-items: center; display: inline-flex; } .button-module-scss-module__QGYYNq__icon { width: 1em; height: 1em; color: inherit; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .button-module-scss-module__QGYYNq__iconStart { margin-inline-end: var(--space-tiny); } .button-module-scss-module__QGYYNq__iconEnd { margin-inline-start: var(--space-tiny); } .button-module-scss-module__QGYYNq__spinner { justify-content: center; align-items: center; display: inline-flex; } .button-module-scss-module__QGYYNq__spinnerIcon { width: var(--space-large); height: var(--space-large); color: currentColor; animation: 1s linear infinite button-module-scss-module__QGYYNq__spin; } .button-module-scss-module__QGYYNq__spinnerTrack { opacity: .2; } .button-module-scss-module__QGYYNq__spinnerFill { opacity: .7; } @keyframes button-module-scss-module__QGYYNq__spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .button-module-scss-module__QGYYNq__buttonError { align-items: center; gap: var(--space-small); padding: var(--space-medium) var(--space-large); border-radius: var(--radius-card-corner); border: 1px solid var(--color-danger-600); background-color: var(--color-danger-50); color: var(--color-danger-700); font-size: var(--font-size-sm); display: flex; } .button-module-scss-module__QGYYNq__errorIcon { font-size: var(--font-size-lg); } .button-module-scss-module__QGYYNq__sr-only { clip: rect(0, 0, 0, 0); border: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .button-module-scss-module__QGYYNq__button { transition: none; } .button-module-scss-module__QGYYNq__spinnerIcon { animation: none; } } /* [project]/src/core/components/common/counter/counter.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .counter-module-scss-module__Kr_20G__counter { justify-content: center; align-items: center; gap: var(--space-tiny); background-color: var(--color-white); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); flex-shrink: 0; width: fit-content; max-width: 126px; transition: border-color .15s, opacity .15s; display: inline-flex; } .counter-module-scss-module__Kr_20G__counter.counter-module-scss-module__Kr_20G__sizeXsmall { height: 36px; padding: var(--space-micro); gap: var(--space-tiny); border-radius: var(--radius-sm); } .counter-module-scss-module__Kr_20G__counter.counter-module-scss-module__Kr_20G__sizeSmall { height: 40px; padding: var(--space-tiny); gap: var(--space-tiny); border-radius: var(--radius-sm); } .counter-module-scss-module__Kr_20G__counter.counter-module-scss-module__Kr_20G__sizeMedium { gap: var(--space-tiny); border-radius: var(--radius-sm); height: 44px; padding: 6px; } .counter-module-scss-module__Kr_20G__counter.counter-module-scss-module__Kr_20G__disabled { cursor: not-allowed; opacity: .6; } .counter-module-scss-module__Kr_20G__counter.counter-module-scss-module__Kr_20G__disabled .counter-module-scss-module__Kr_20G__value { color: var(--color-font-disable); } .counter-module-scss-module__Kr_20G__counter.counter-module-scss-module__Kr_20G__disabled .counter-module-scss-module__Kr_20G__iconButton { cursor: not-allowed; pointer-events: none; } .counter-module-scss-module__Kr_20G__value { font-family: var(--font-family-texts); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-font-disable); text-align: center; -moz-appearance: textfield; background: none; border: none; outline: none; width: auto; min-width: 1ch; margin: 0; padding: 0 2px; } .counter-module-scss-module__Kr_20G__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .counter-module-scss-module__Kr_20G__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .counter-module-scss-module__Kr_20G__value:focus { color: var(--color-font-headings); outline: none; } .counter-module-scss-module__Kr_20G__value:disabled { cursor: not-allowed; } .counter-module-scss-module__Kr_20G__iconButton.button { min-width: auto; min-height: auto; padding: 4px; } /* [project]/src/core/components/common/label/label.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .label-module-scss-module__4Z1xUG__label { white-space: nowrap; border-radius: var(--space-xxlarge); justify-content: center; align-items: center; gap: var(--space-tiny); font-family: var(--font-family-labels); font-weight: var(--font-weight-medium); transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; display: inline-flex; } .label-module-scss-module__4Z1xUG__size-xsmall { min-height: 20px; font-size: var(--font-size-xs); padding: 4px 8px; line-height: 1; } .label-module-scss-module__4Z1xUG__size-xsmall .label-module-scss-module__4Z1xUG__icon { width: 12px; height: 12px; } .label-module-scss-module__4Z1xUG__size-small { min-height: 24px; font-size: var(--font-size-sm); padding: 4px 8px; line-height: 1; } .label-module-scss-module__4Z1xUG__size-small .label-module-scss-module__4Z1xUG__icon { width: 16px; height: 16px; } .label-module-scss-module__4Z1xUG__variant-primary { background-color: var(--color-primary-50); border: 1px solid var(--color-primary-100); color: var(--color-primary-700); box-shadow: inset 0 -2px 4px #3572ef1f; } .label-module-scss-module__4Z1xUG__variant-secondary { background-color: var(--color-secondary-50); border: 1px solid var(--color-secondary-100); color: var(--color-secondary-700); box-shadow: inset 0 -2px 4px #6e78891f; } .label-module-scss-module__4Z1xUG__variant-success { background-color: var(--color-success-50); border: 1px solid var(--color-success-100); color: var(--color-success-700); box-shadow: inset 0 -2px 4px #32b5501f; } .label-module-scss-module__4Z1xUG__variant-warning { background-color: var(--color-warning-50); border: 1px solid var(--color-warning-100); color: var(--color-warning-700); box-shadow: inset 0 -2px 4px #ffd64a1f; } .label-module-scss-module__4Z1xUG__variant-danger { background-color: var(--color-danger-50); border: 1px solid var(--color-danger-100); color: var(--color-danger-700); box-shadow: inset 0 -2px 4px #ff4d4d1f; } .label-module-scss-module__4Z1xUG__icon { flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } /* [project]/src/core/components/common/dropdown/dropdown.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .dropdown-module-scss-module__hMPvpa__dropdown { flex-direction: column; width: fit-content; display: inline-flex; position: relative; } .dropdown-module-scss-module__hMPvpa__dropdown.dropdown-module-scss-module__hMPvpa__fullWidth { width: 100%; } .dropdown-module-scss-module__hMPvpa__dropdown[data-open="true"] { z-index: 60; } .dropdown-module-scss-module__hMPvpa__label { align-items: center; gap: var(--space-tiny); margin-bottom: var(--space-tiny); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-font-headings); font-family: var(--font-family-texts); display: inline-flex; } .dropdown-module-scss-module__hMPvpa__labelIcon { flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__required { color: var(--color-danger-600); margin-left: var(--space-tiny); } .dropdown-module-scss-module__hMPvpa__trigger { justify-content: space-between; align-items: center; gap: var(--space-small); width: 100%; padding: var(--space-small) var(--space-medium); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); min-height: 40px; color: var(--color-font-headings); cursor: pointer; font-size: var(--font-size-sm); font-family: var(--font-family-texts); text-align: left; background: #fff; transition: border-color .15s, box-shadow .15s, background-color .15s; display: flex; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__hasMultiSelect { height: auto; min-height: 40px; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__triggerSizeXsmall { min-height: 36px; padding: var(--space-compact) var(--space-small); font-size: 14px; line-height: 14px; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__triggerSizeSmall { min-height: 40px; padding: var(--space-compact) var(--space-small); font-size: 16px; line-height: 20px; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__triggerSizeMedium { min-height: 44px; padding: var(--space-medium) var(--space-compact); font-size: 16px; line-height: 20px; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__hasMultiSelect.dropdown-module-scss-module__hMPvpa__triggerSizeXsmall { min-height: 36px; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__hasMultiSelect.dropdown-module-scss-module__hMPvpa__triggerSizeSmall { min-height: 40px; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__hasMultiSelect.dropdown-module-scss-module__hMPvpa__triggerSizeMedium { min-height: 44px; } .dropdown-module-scss-module__hMPvpa__trigger:hover:not(:disabled):not(.dropdown-module-scss-module__hMPvpa__triggerActive) { border-color: var(--color-border-active); } .dropdown-module-scss-module__hMPvpa__trigger:focus-visible:not(.dropdown-module-scss-module__hMPvpa__triggerActive) { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .dropdown-module-scss-module__hMPvpa__trigger:disabled { opacity: .6; cursor: not-allowed; background: var(--color-secondary-50); } .dropdown-module-scss-module__hMPvpa__triggerActive, .dropdown-module-scss-module__hMPvpa__triggerActive:hover:not(:disabled) { border: 1px solid var(--color-primary-300); background: #fff; box-shadow: 0 8px 16px #96c0fa1f; } .dropdown-module-scss-module__hMPvpa__triggerContent { align-items: center; gap: var(--space-tiny); flex: 1; min-width: 0; display: flex; } .dropdown-module-scss-module__hMPvpa__trigger.dropdown-module-scss-module__hMPvpa__hasMultiSelect .dropdown-module-scss-module__hMPvpa__triggerContent { align-items: flex-start; } .dropdown-module-scss-module__hMPvpa__triggerText { text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; } .dropdown-module-scss-module__hMPvpa__triggerText.dropdown-module-scss-module__hMPvpa__placeholder { color: var(--color-font-disable); } .dropdown-module-scss-module__hMPvpa__triggerIcons { align-items: center; gap: var(--space-tiny); flex-shrink: 0; display: flex; } .dropdown-module-scss-module__hMPvpa__chevronIcon { color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .dropdown-module-scss-module__hMPvpa__startAdornment { margin-right: var(--space-tiny); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__clearButton { cursor: pointer; width: 16px; height: 16px; color: var(--color-font-disable); font-size: var(--font-size-sm); background: none; border: none; flex-shrink: 0; justify-content: center; align-items: center; padding: 0; line-height: 1; transition: opacity .15s; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__clearButton:hover { opacity: .7; } .dropdown-module-scss-module__hMPvpa__clearButton:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: 2px; } .dropdown-module-scss-module__hMPvpa__loading { cursor: wait; pointer-events: none; } .dropdown-module-scss-module__hMPvpa__loadingSpinner { flex-shrink: 0; justify-content: center; align-items: center; width: 16px; height: 16px; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__spinnerIcon { width: 16px; height: 16px; color: var(--color-font-links-labels); animation: 1s linear infinite dropdown-module-scss-module__hMPvpa__spin; } @keyframes dropdown-module-scss-module__hMPvpa__spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .dropdown-module-scss-module__hMPvpa__menu { top: calc(100% + var(--space-tiny)); z-index: 50; align-items: flex-start; gap: var(--space-small, 8px); padding: var(--space-compact, 10px) var(--space-small, 8px); border-radius: var(--radius-sm, 8px); border: 1px solid var(--color-border-default, #d7dae0); box-shadow: var(--shadow-lg); background: #fff; flex-direction: column; width: 204px; min-width: 204px; animation: .12s ease-out dropdown-module-scss-module__hMPvpa__dropdownSlide; display: flex; position: absolute; left: 0; } .dropdown-module-scss-module__hMPvpa__menu.dropdown-module-scss-module__hMPvpa__fullWidth { width: 100%; } @keyframes dropdown-module-scss-module__hMPvpa__dropdownSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .dropdown-module-scss-module__hMPvpa__searchSection { width: 100%; margin: 0; padding: 0; } .dropdown-module-scss-module__hMPvpa__typeaheadHint { align-items: center; gap: var(--space-tiny); width: 100%; padding: var(--space-tiny) var(--space-small); border-radius: var(--radius-sm); background: var(--color-secondary-50); color: var(--color-font-links-labels); min-width: 0; display: flex; } .dropdown-module-scss-module__hMPvpa__typeaheadHintIcon { color: var(--color-font-disable); flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__typeaheadHintText { text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); flex: 1; overflow: hidden; } .dropdown-module-scss-module__hMPvpa__itemsList { gap: var(--space-tiny); flex-direction: column; width: 100%; margin: 0; padding: 0; list-style: none; display: flex; overflow: hidden auto; } .dropdown-module-scss-module__hMPvpa__item { align-items: center; gap: var(--space-tiny, 4px); border-radius: var(--button-radius, 8px); background: var(--button-secondary-bg-default); color: var(--button-secondary-font-default); cursor: pointer; font-family: var(--font-family-buttons); font-weight: var(--font-weight-medium); border: 1px solid #0000; align-self: stretch; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; display: flex; } .dropdown-module-scss-module__hMPvpa__item:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .dropdown-module-scss-module__hMPvpa__item:hover:not(.dropdown-module-scss-module__hMPvpa__disabled):not(.dropdown-module-scss-module__hMPvpa__selected) { background: var(--button-secondary-bg-hover); color: var(--button-secondary-font-hover); } .dropdown-module-scss-module__hMPvpa__item.dropdown-module-scss-module__hMPvpa__selected { background: var(--button-secondary-bg-focused); color: var(--button-secondary-font-focused); } .dropdown-module-scss-module__hMPvpa__item.dropdown-module-scss-module__hMPvpa__disabled { opacity: .6; cursor: not-allowed; pointer-events: none; } .dropdown-module-scss-module__hMPvpa__item.dropdown-module-scss-module__hMPvpa__focused:not(.dropdown-module-scss-module__hMPvpa__selected) { background: var(--button-secondary-bg-hover); color: var(--button-secondary-font-hover); } .dropdown-module-scss-module__hMPvpa__item.dropdown-module-scss-module__hMPvpa__sizeXsmall { padding: var(--button-xsmall-padding-top) var(--button-xsmall-padding-right) var(--button-xsmall-padding-bottom) var(--button-xsmall-padding-left); min-height: var(--button-height-xsmall); font-size: 14px; line-height: 14px; } .dropdown-module-scss-module__hMPvpa__item.dropdown-module-scss-module__hMPvpa__sizeSmall, .dropdown-module-scss-module__hMPvpa__item.dropdown-module-scss-module__hMPvpa__sizeMedium { padding: var(--button-small-padding-top) var(--button-small-padding-right) var(--button-small-padding-bottom) var(--button-small-padding-left); min-height: var(--button-height-small); font-size: 16px; line-height: 20px; } .dropdown-module-scss-module__hMPvpa__itemContent { align-items: center; gap: var(--space-tiny); flex: 1; min-width: 0; display: flex; } .dropdown-module-scss-module__hMPvpa__itemIcon { flex-shrink: 0; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemIcon svg, .dropdown-module-scss-module__hMPvpa__itemIcon img { stroke-width: 2.25px; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemIcon { flex-shrink: 0; } .dropdown-module-scss-module__hMPvpa__itemLabelContainer { gap: var(--space-tiny); flex-direction: column; flex: 1; min-width: 0; display: flex; } .dropdown-module-scss-module__hMPvpa__itemLabel { white-space: nowrap; text-overflow: ellipsis; min-width: 0; color: inherit; flex: 1; overflow: hidden; } .dropdown-module-scss-module__hMPvpa__itemDescription { font-size: var(--font-size-xs); color: var(--color-font-disable); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .dropdown-module-scss-module__hMPvpa__itemDisabled { opacity: .6; cursor: not-allowed; pointer-events: none; } .dropdown-module-scss-module__hMPvpa__itemCheckbox { flex-shrink: 0; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemCheckbox svg, .dropdown-module-scss-module__hMPvpa__itemCheckbox img { stroke-width: 2.25px; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemCheckbox { border: 1px solid var(--color-border-default); cursor: pointer; background: #fff; border-radius: 4px; justify-content: center; align-items: center; display: flex; } .dropdown-module-scss-module__hMPvpa__itemCheckbox.dropdown-module-scss-module__hMPvpa__checked { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; } .dropdown-module-scss-module__hMPvpa__itemRadioIcon { flex-shrink: 0; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemRadioIcon svg, .dropdown-module-scss-module__hMPvpa__itemRadioIcon img { stroke-width: 2.25px; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemRadioIcon { color: var(--color-border-default); } .dropdown-module-scss-module__hMPvpa__radioChecked { color: var(--color-primary-600); } .dropdown-module-scss-module__hMPvpa__itemFlag { flex-shrink: 0; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemFlag svg, .dropdown-module-scss-module__hMPvpa__itemFlag img { stroke-width: 2.25px; width: 16px; height: 16px; } .dropdown-module-scss-module__hMPvpa__itemFlag { flex-shrink: 0; } .dropdown-module-scss-module__hMPvpa__noResults { padding: var(--space-medium); text-align: center; color: var(--color-font-disable); font-size: var(--font-size-sm); font-style: italic; } .dropdown-module-scss-module__hMPvpa__selectedTagsWrapper { gap: var(--space-small); flex-wrap: wrap; flex: 1; align-items: center; min-width: 0; display: flex; } .dropdown-module-scss-module__hMPvpa__selectedTag { background: var(--color-secondary-100); font-size: var(--font-size-xs); border-radius: 8px; flex-shrink: 0; align-items: center; gap: 4px; padding: 4px 8px; line-height: 1; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__selectedTag.dropdown-module-scss-module__hMPvpa__selectedTagDisabled { opacity: .6; pointer-events: none; } .dropdown-module-scss-module__hMPvpa__tagIcon { flex-shrink: 0; justify-content: center; align-items: center; width: 16px; height: 16px; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__tagRemoveIcon { cursor: pointer; width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; transition: opacity .15s; display: inline-flex; } .dropdown-module-scss-module__hMPvpa__tagRemoveIcon:hover { opacity: .7; } .dropdown-module-scss-module__hMPvpa__tagRemoveIcon:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: 2px; } .dropdown-module-scss-module__hMPvpa__tagRemoveIcon svg { stroke-width: 2.25px; width: 16px; height: 16px; display: block; } .dropdown-module-scss-module__hMPvpa__tagRemoveIcon.dropdown-module-scss-module__hMPvpa__tagRemoveIconDisabled { opacity: .6; cursor: not-allowed; pointer-events: none; } .dropdown-module-scss-module__hMPvpa__moreBadge { height: 20px; padding: var(--space-tiny) var(--space-small); border-radius: var(--radius-sm); background: var(--color-secondary-100); font-size: var(--font-size-xs); color: var(--color-font-headings); flex-shrink: 0; justify-content: center; align-items: center; line-height: 1; display: inline-flex; } /* [project]/src/core/components/common/media-picker/media-picker.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } /* [project]/src/core/components/common/breadcrumb/breadcrumb.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .breadcrumb-module-scss-module__75HEwa__breadcrumb { background: none; border-radius: 0; align-items: center; width: 100%; margin: 0; padding: 0; list-style: none; transition: all .2s ease-in-out; display: flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumb.breadcrumb-module-scss-module__75HEwa__transitioning { opacity: .7; } .breadcrumb-module-scss-module__75HEwa__breadcrumbWrapper { justify-content: space-between; align-items: center; gap: var(--space-medium); width: 100%; display: flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumbList { align-items: center; gap: var(--space-tiny); flex-wrap: wrap; flex: 1; margin: 0; padding: 0; list-style: none; display: flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumbActions { align-items: center; gap: var(--space-medium); flex-shrink: 0; display: flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumbActionButton { align-items: center; gap: var(--space-tiny); padding: var(--space-small) var(--space-medium); background-color: var(--color-white); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); white-space: nowrap; cursor: pointer; text-transform: capitalize; color: var(--color-font-links-labels); font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 500; line-height: 24px; text-decoration: none; transition: all .2s ease-in-out; display: inline-flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumbActionButton:hover { background-color: var(--color-secondary-50); border-color: var(--color-border-active); } .breadcrumb-module-scss-module__75HEwa__breadcrumbActionButton:active { background-color: var(--color-secondary-100); } .breadcrumb-module-scss-module__75HEwa__breadcrumbActionButton:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .breadcrumb-module-scss-module__75HEwa__breadcrumbItem { align-items: center; gap: var(--space-tiny); display: inline-flex; position: relative; } .breadcrumb-module-scss-module__75HEwa__breadcrumbItem:before, .breadcrumb-module-scss-module__75HEwa__breadcrumbItem:after { display: none; } .breadcrumb-module-scss-module__75HEwa__breadcrumbItem .breadcrumb-module-scss-module__75HEwa__selected, .breadcrumb-module-scss-module__75HEwa__breadcrumbItem .breadcrumb-module-scss-module__75HEwa__selected * { font-weight: 600; } .breadcrumb-module-scss-module__75HEwa__breadcrumbLink { align-items: center; gap: var(--space-tiny); white-space: nowrap; cursor: pointer; text-decoration: none; transition: all .2s ease-in-out; display: inline-flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumbLink.breadcrumb-module-scss-module__75HEwa__default { text-transform: none; color: var(--color-font-links-labels); font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; text-decoration: none; } .breadcrumb-module-scss-module__75HEwa__breadcrumbLink.breadcrumb-module-scss-module__75HEwa__default:hover { text-transform: none; color: var(--color-font-headings); font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; text-decoration: none; } .breadcrumb-module-scss-module__75HEwa__breadcrumbLink.breadcrumb-module-scss-module__75HEwa__selected { color: var(--color-font-headings); cursor: default; pointer-events: none; font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 600; line-height: 150%; } .breadcrumb-module-scss-module__75HEwa__breadcrumbLink.breadcrumb-module-scss-module__75HEwa__selected > .breadcrumb-module-scss-module__75HEwa__breadcrumbText, .breadcrumb-module-scss-module__75HEwa__breadcrumbLink.breadcrumb-module-scss-module__75HEwa__selected span { font-weight: 600; } .breadcrumb-module-scss-module__75HEwa__breadcrumbLink:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; border-radius: var(--radius-sm); } .breadcrumb-module-scss-module__75HEwa__breadcrumbSeparator { color: var(--color-secondary-500); -webkit-user-select: none; user-select: none; pointer-events: none; justify-content: center; align-items: center; display: inline-flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumbSeparator svg { display: block; } .breadcrumb-module-scss-module__75HEwa__breadcrumbIcon { color: inherit; justify-content: center; align-items: center; display: inline-flex; } .breadcrumb-module-scss-module__75HEwa__breadcrumbText { white-space: nowrap; text-overflow: ellipsis; max-width: 200px; font-weight: inherit; font-size: inherit; line-height: inherit; font-family: inherit; overflow: hidden; } .breadcrumb-module-scss-module__75HEwa__breadcrumbEllipsis { padding: 0 var(--space-tiny); color: var(--color-secondary-500); text-transform: none; cursor: default; -webkit-user-select: none; user-select: none; align-items: center; font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; text-decoration: none; display: inline-flex; } @media (max-width: 767px) { .breadcrumb-module-scss-module__75HEwa__breadcrumbWrapper { align-items: flex-start; gap: var(--space-small); flex-direction: column; } .breadcrumb-module-scss-module__75HEwa__breadcrumbActions { gap: var(--space-small); width: 100%; overflow-x: auto; } .breadcrumb-module-scss-module__75HEwa__breadcrumbActionButton { padding: var(--space-tiny) var(--space-small); text-transform: none; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 24px; text-decoration: none; } .breadcrumb-module-scss-module__75HEwa__breadcrumbList, .breadcrumb-module-scss-module__75HEwa__breadcrumbItem { gap: var(--space-micro); } .breadcrumb-module-scss-module__75HEwa__breadcrumbLink { text-transform: none; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 160%; text-decoration: none; } .breadcrumb-module-scss-module__75HEwa__breadcrumbText { max-width: 120px; } } @media (min-width: 768px) and (max-width: 1023px) { .breadcrumb-module-scss-module__75HEwa__breadcrumbText { max-width: 150px; } .breadcrumb-module-scss-module__75HEwa__breadcrumbActions { gap: var(--space-small); } } @media (prefers-contrast: high) { .breadcrumb-module-scss-module__75HEwa__breadcrumbLink.breadcrumb-module-scss-module__75HEwa__default:hover, .breadcrumb-module-scss-module__75HEwa__breadcrumbLink.breadcrumb-module-scss-module__75HEwa__default:focus-visible { text-decoration: underline; } .breadcrumb-module-scss-module__75HEwa__breadcrumbSeparator { color: var(--color-secondary-700); } } @media (prefers-reduced-motion: reduce) { .breadcrumb-module-scss-module__75HEwa__breadcrumbLink, .breadcrumb-module-scss-module__75HEwa__breadcrumb { transition: none; } } [dir="rtl"] .breadcrumb-module-scss-module__75HEwa__breadcrumbList, [dir="rtl"] .breadcrumb-module-scss-module__75HEwa__breadcrumbItem, [dir="rtl"] .breadcrumb-module-scss-module__75HEwa__breadcrumbWrapper, [dir="rtl"] .breadcrumb-module-scss-module__75HEwa__breadcrumbActions, [dir="rtl"] .breadcrumb-module-scss-module__75HEwa__breadcrumbActionButton { direction: rtl; } /* [project]/src/core/components/common/alert/alert.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } /* [project]/src/core/components/common/alert/alert-modal.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .alert-modal-module-scss-module__M3WlUa__overlay { z-index: 9999; opacity: 0; background: #00000080; justify-content: center; align-items: center; transition: opacity .3s; display: flex; position: fixed; inset: 0; } .alert-modal-module-scss-module__M3WlUa__overlayVisible { opacity: 1; } .alert-modal-module-scss-module__M3WlUa__card { background: var(--color-white); border: 1px solid var(--color-border-default); border-radius: var(--radius-card-corner); box-shadow: var(--shadow-md); padding: var(--space-xlarge); flex-direction: column; align-items: center; width: 100%; max-width: 352px; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); display: flex; position: relative; transform: scale(.95)translateY(-8px); } .alert-modal-module-scss-module__M3WlUa__cardVisible { transform: scale(1)translateY(0); } .alert-modal-module-scss-module__M3WlUa__closeButton { top: var(--space-xlarge); background: var(--color-white); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); cursor: pointer; width: 32px; height: 32px; color: var(--color-font-links-labels); justify-content: center; align-items: center; padding: 0; transition: background .15s; display: flex; position: absolute; inset-inline-end: var(--space-xlarge); } .alert-modal-module-scss-module__M3WlUa__closeButton:hover { background: var(--color-secondary-50); } .alert-modal-module-scss-module__M3WlUa__content { align-items: center; gap: var(--space-huge); flex-direction: column; width: 100%; display: flex; } .alert-modal-module-scss-module__M3WlUa__iconOuter { padding: var(--space-small); border-radius: var(--radius-full); flex-shrink: 0; justify-content: center; align-items: center; animation: 2.4s ease-in-out infinite alert-modal-module-scss-module__M3WlUa__outerPulse; display: flex; position: relative; } .alert-modal-module-scss-module__M3WlUa__iconOuter-info { background-color: var(--color-primary-50); --pulse-from: var(--color-primary-50); --pulse-to: var(--color-primary-100); } .alert-modal-module-scss-module__M3WlUa__iconOuter-success { background-color: var(--color-success-50); --pulse-from: var(--color-success-50); --pulse-to: var(--color-success-100); } .alert-modal-module-scss-module__M3WlUa__iconOuter-warning { background-color: var(--color-warning-50); --pulse-from: var(--color-warning-50); --pulse-to: var(--color-warning-100); } .alert-modal-module-scss-module__M3WlUa__iconOuter-danger, .alert-modal-module-scss-module__M3WlUa__iconOuter-error { background-color: var(--color-danger-50); --pulse-from: var(--color-danger-50); --pulse-to: var(--color-danger-100); } @keyframes alert-modal-module-scss-module__M3WlUa__outerPulse { 0%, 100% { background-color: var(--pulse-from); transform: scale(1); } 50% { background-color: var(--pulse-to); transform: scale(1.08); } } .alert-modal-module-scss-module__M3WlUa__iconInner { padding: var(--space-small); border-radius: var(--radius-full); justify-content: center; align-items: center; display: flex; } .alert-modal-module-scss-module__M3WlUa__iconInner-info { background-color: var(--color-primary-100); } .alert-modal-module-scss-module__M3WlUa__iconInner-success { background-color: var(--color-success-100); } .alert-modal-module-scss-module__M3WlUa__iconInner-warning { background-color: var(--color-warning-100); } .alert-modal-module-scss-module__M3WlUa__iconInner-danger, .alert-modal-module-scss-module__M3WlUa__iconInner-error { background-color: var(--color-danger-100); } .alert-modal-module-scss-module__M3WlUa__iconWrapper { justify-content: center; align-items: center; width: 32px; height: 32px; display: flex; } .alert-modal-module-scss-module__M3WlUa__messageContainer { align-items: center; gap: var(--space-small); flex-direction: column; width: 100%; display: flex; } .alert-modal-module-scss-module__M3WlUa__title { font-family: var(--font-family-headings); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-loose); color: var(--color-font-headings); text-align: center; word-break: break-word; margin: 0; } .alert-modal-module-scss-module__M3WlUa__description { font-family: var(--font-family-texts); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); color: var(--color-font-body); text-align: center; width: 100%; margin: 0; } .alert-modal-module-scss-module__M3WlUa__buttonContainer { width: 100%; display: flex; } .alert-modal-module-scss-module__M3WlUa__buttonContainerDouble { gap: var(--space-large); } /* [project]/src/core/components/common/phone-input/phone-input.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } /* [project]/src/core/components/common/phone-input-field/phone-input-field.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .PhoneInput { align-items: center; width: 100%; display: flex; } .PhoneInputInput { color: var(--color-secondary-900); box-sizing: border-box; background: none; border: none; outline: none; flex: 1; min-width: 0; font-family: inherit; } .PhoneInputInput::placeholder { color: var(--color-secondary-500); } .PhoneInputInput:disabled { cursor: not-allowed; } .PhoneInputCountry { margin-right: var(--space-small); padding-left: var(--space-small); align-self: stretch; align-items: center; display: flex; position: relative; } .PhoneInputCountry:after { content: ""; background-color: var(--color-secondary-200); width: 1px; height: 60%; margin-left: var(--space-small); display: block; } .PhoneInputCountrySelect { z-index: 1; opacity: 0; cursor: pointer; border: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .PhoneInputCountryIcon { width: 24px; height: 16px; } .PhoneInputCountryIcon img { object-fit: cover; width: 100%; height: 100%; display: block; } .phone-input-field-module-scss-module__GmTg5q__container { gap: var(--space-tiny); direction: ltr; flex-direction: column; width: 100%; display: flex; } .phone-input-field-module-scss-module__GmTg5q__labelWrapper { align-items: center; gap: var(--space-tiny); display: flex; } .phone-input-field-module-scss-module__GmTg5q__label { text-transform: none; color: var(--color-secondary-700); margin: 0; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 140%; text-decoration: none; } .phone-input-field-module-scss-module__GmTg5q__required { color: var(--color-danger-600); margin-left: 2px; } .phone-input-field-module-scss-module__GmTg5q__helpIcon { cursor: help; flex-shrink: 0; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper { align-items: center; gap: var(--space-small); background-color: var(--color-white); border: 1px solid var(--color-secondary-300); border-radius: var(--radius-sm); padding-right: var(--space-small); box-sizing: border-box; transition: all .2s ease-in-out; display: flex; position: relative; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper:hover:not(.phone-input-field-module-scss-module__GmTg5q__disabled) { border-color: var(--color-primary-400); box-shadow: var(--shadow-md); } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__focused { border-color: var(--color-secondary-500); outline: none; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__disabled { background-color: var(--color-secondary-50); cursor: not-allowed; opacity: .6; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__wrong { border-color: var(--color-danger-400); } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__wrong:hover:not(.phone-input-field-module-scss-module__GmTg5q__disabled), .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__wrong.phone-input-field-module-scss-module__GmTg5q__focused { border-color: var(--color-danger-500); box-shadow: 0 8px 16px #ff9d9d1f; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__success { border-color: var(--color-success-400); } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__success:hover:not(.phone-input-field-module-scss-module__GmTg5q__disabled), .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__success.phone-input-field-module-scss-module__GmTg5q__focused { border-color: var(--color-success-500); box-shadow: 0 8px 16px #90e5a31f; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__xsmall { height: 36px; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__xsmall .PhoneInputInput { text-transform: none; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 14px; text-decoration: none; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__xsmall .PhoneInputCountry { height: 36px; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__small { height: 40px; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__small .PhoneInputInput { text-transform: none; font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 20px; text-decoration: none; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__small .PhoneInputCountry { height: 40px; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__medium { height: 44px; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__medium .PhoneInputInput { text-transform: none; font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 20px; text-decoration: none; } .phone-input-field-module-scss-module__GmTg5q__inputWrapper.phone-input-field-module-scss-module__GmTg5q__medium .PhoneInputCountry { height: 44px; } .phone-input-field-module-scss-module__GmTg5q__message { text-transform: none; color: var(--color-secondary-700); margin: 0; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 140%; text-decoration: none; } .phone-input-field-module-scss-module__GmTg5q__message.phone-input-field-module-scss-module__GmTg5q__wrong { color: var(--color-danger-700); } .phone-input-field-module-scss-module__GmTg5q__message.phone-input-field-module-scss-module__GmTg5q__success { color: var(--color-success-700); } @media (max-width: 768px) { .phone-input-field-module-scss-module__GmTg5q__container { width: 100%; } } .phone-input-field-module-scss-module__GmTg5q__sr-only { clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } /* [project]/node_modules/react-phone-number-input/style.css [app-client] (css) */ :root { --PhoneInput-color--focus: #03b2cb; --PhoneInputInternationalIconPhone-opacity: .8; --PhoneInputInternationalIconGlobe-opacity: .65; --PhoneInputCountrySelect-marginRight: .35em; --PhoneInputCountrySelectArrow-width: .3em; --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight); --PhoneInputCountrySelectArrow-borderWidth: 1px; --PhoneInputCountrySelectArrow-opacity: .45; --PhoneInputCountrySelectArrow-color: currentColor; --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus); --PhoneInputCountrySelectArrow-transform: rotate(45deg); --PhoneInputCountryFlag-aspectRatio: 1.5; --PhoneInputCountryFlag-height: 1em; --PhoneInputCountryFlag-borderWidth: 1px; --PhoneInputCountryFlag-borderColor: #00000080; --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus); --PhoneInputCountryFlag-backgroundColor--loading: #0000001a; } .PhoneInput { align-items: center; display: flex; } .PhoneInputInput { flex: 1; min-width: 0; } .PhoneInputCountryIcon { width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio)); height: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--square { width: var(--PhoneInputCountryFlag-height); } .PhoneInputCountryIcon--border { background-color: var(--PhoneInputCountryFlag-backgroundColor--loading); box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor); } .PhoneInputCountryIconImg { width: 100%; height: 100%; display: block; } .PhoneInputInternationalIconPhone { opacity: var(--PhoneInputInternationalIconPhone-opacity); } .PhoneInputInternationalIconGlobe { opacity: var(--PhoneInputInternationalIconGlobe-opacity); } .PhoneInputCountry { margin-right: var(--PhoneInputCountrySelect-marginRight); align-self: stretch; align-items: center; display: flex; position: relative; } .PhoneInputCountrySelect { z-index: 1; opacity: 0; cursor: pointer; border: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .PhoneInputCountrySelect[disabled], .PhoneInputCountrySelect[readonly] { cursor: default; } .PhoneInputCountrySelectArrow { content: ""; width: var(--PhoneInputCountrySelectArrow-width); height: var(--PhoneInputCountrySelectArrow-width); margin-left: var(--PhoneInputCountrySelectArrow-marginLeft); border-style: solid; border-color: var(--PhoneInputCountrySelectArrow-color); border-top-width: 0; border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth); border-left-width: 0; border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth); transform: var(--PhoneInputCountrySelectArrow-transform); opacity: var(--PhoneInputCountrySelectArrow-opacity); display: block; } .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow { opacity: 1; color: var(--PhoneInputCountrySelectArrow-color--focus); } .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border { box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus); } .PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe { opacity: 1; color: var(--PhoneInputCountrySelectArrow-color--focus); } /* [project]/src/core/components/common/spinner/spinner.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } /* [project]/src/core/components/common/rich-text-editor/rich-text-editor.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .rich-text-editor-module-scss-module__S-saBq__richTextEditorContainer { --editor-height-small: 250px; --editor-height-medium: 300px; --editor-height-large: 350px; --editor-padding-small: 10px 14px; --editor-padding-medium: 12px 16px; --editor-padding-large: 14px 18px; --editor-font-size-small: var(--font-size-sm); --editor-font-size-medium: 16px; --editor-font-size-large: var(--font-size-lg); margin-bottom: var(--space-small); font-family: var(--font-family-texts); flex-direction: column; display: flex; } .rich-text-editor-module-scss-module__S-saBq__fullWidth { width: 100%; } .rich-text-editor-module-scss-module__S-saBq__label { color: var(--color-font-body); font-size: 14px; font-weight: 500; line-height: var(--line-height-tight); align-items: center; gap: var(--space-tiny); margin-bottom: 8px; display: flex; } .rich-text-editor-module-scss-module__S-saBq__required { color: var(--color-danger-500); font-weight: var(--font-weight-bold); } .rich-text-editor-module-scss-module__S-saBq__richTextEditor { background: var(--color-white); width: 100%; box-shadow: var(--shadow-sm); resize: vertical; border: none; border-radius: 8px; flex-direction: column; transition: border-color .15s, box-shadow .15s; display: flex; position: relative; overflow: hidden; } .rich-text-editor-module-scss-module__S-saBq__richTextEditor:focus-within { border-color: var(--color-primary-600); box-shadow: 0 0 0 2px rgba(var(--color-primary-600), .15),var(--shadow-md); } .rich-text-editor-module-scss-module__S-saBq__richTextEditor:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .rich-text-editor-module-scss-module__S-saBq__richTextEditor:after { content: ""; cursor: s-resize; z-index: 10; pointer-events: none; background: linear-gradient(-45deg, #0000 0% 20%, #cbd5e1 20% 30%, #0000 30% 40%, #cbd5e1 40% 50%, #0000 50% 60%, #cbd5e1 60% 70%, #0000 70% 80%, #cbd5e1 80% 90%, #0000 90%); width: 12px; height: 12px; position: absolute; bottom: 2px; right: 2px; } .rich-text-editor-module-scss-module__S-saBq__toolbar { gap: var(--space-small); padding: var(--space-medium); background: var(--color-secondary-50); border-bottom: 1px solid var(--color-border-default); flex-wrap: wrap; display: flex; } .rich-text-editor-module-scss-module__S-saBq__customToolbar { z-index: 2; align-items: center; gap: var(--space-tiny); padding: var(--space-medium); background: var(--color-secondary-50); border-bottom: 1px solid var(--color-border-default); border-radius: 8px 8px 0 0; flex-wrap: wrap; display: flex; position: sticky; top: 0; } .rich-text-editor-module-scss-module__S-saBq__toolbarGroup { align-items: center; gap: var(--space-tiny); padding-right: var(--space-small); display: flex; } .rich-text-editor-module-scss-module__S-saBq__toolbarGroup:not(:last-child) { border-right: 1px solid var(--color-border-default); } .rich-text-editor-module-scss-module__S-saBq__toolbarGroup:last-child { padding-right: 0; } .rich-text-editor-module-scss-module__S-saBq__toolbarButton { border-radius: var(--radius-sm); color: #374151; min-width: 36px; height: 36px; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); cursor: pointer; background: #fff; border: 1px solid #0000; justify-content: center; align-items: center; padding: 0 8px; transition: all .15s; display: flex; box-shadow: 0 1px 2px #0000000d; } .rich-text-editor-module-scss-module__S-saBq__toolbarButton:hover { color: #fff; background: #3b82f6; border-color: #2563eb; transform: translateY(-1px); box-shadow: 0 2px 4px #3b82f64d; } .rich-text-editor-module-scss-module__S-saBq__toolbarButton:active { transform: translateY(0); box-shadow: 0 1px 2px #3b82f633; } .rich-text-editor-module-scss-module__S-saBq__toolbarButton:disabled { opacity: .4; cursor: not-allowed; } .rich-text-editor-module-scss-module__S-saBq__toolbarButton:disabled:hover { color: #374151; background: #fff; transform: none; } .rich-text-editor-module-scss-module__S-saBq__toolbarSelect { border: 2px solid var(--color-border-default); border-radius: var(--radius-sm); color: #374151; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; background: #fff; min-width: 140px; padding: 8px 12px; transition: all .15s; box-shadow: 0 1px 2px #0000000d; } .rich-text-editor-module-scss-module__S-saBq__toolbarSelect:hover { border-color: #3b82f6; } .rich-text-editor-module-scss-module__S-saBq__toolbarSelect:focus { border-color: var(--color-primary-600); outline: none; box-shadow: 0 0 0 3px #3b82f61a; } .rich-text-editor-module-scss-module__S-saBq__colorPicker { border: 2px solid var(--color-border-default); border-radius: var(--radius-sm); cursor: pointer; background: #fff; width: 36px; height: 36px; transition: all .15s; box-shadow: 0 1px 2px #0000000d; } .rich-text-editor-module-scss-module__S-saBq__colorPicker:hover { border-color: #3b82f6; transform: translateY(-1px); box-shadow: 0 2px 4px #0000001a; } .rich-text-editor-module-scss-module__S-saBq__colorPicker::-webkit-color-swatch-wrapper { border-radius: var(--radius-sm); border: none; padding: 2px; } .rich-text-editor-module-scss-module__S-saBq__colorPicker::-webkit-color-swatch { border: none; border-radius: 4px; } .rich-text-editor-module-scss-module__S-saBq__quillEditor { flex: 1; min-height: 0; } .rich-text-editor-module-scss-module__S-saBq__quillEditor .ql-container { border: none; height: 100%; } .rich-text-editor-module-scss-module__S-saBq__quillEditor .ql-editor { scrollbar-width: thin; scrollbar-color: var(--color-secondary-300) #0000; height: 100%; min-height: 100%; overflow: auto; } .rich-text-editor-module-scss-module__S-saBq__quillEditor .ql-editor::-webkit-scrollbar { width: 8px; height: 8px; } .rich-text-editor-module-scss-module__S-saBq__quillEditor .ql-editor::-webkit-scrollbar-thumb { background: var(--color-secondary-300); border-radius: var(--radius-sm); } .rich-text-editor-module-scss-module__S-saBq__loadingEditor { color: #6b7280; padding: var(--space-enormous) var(--space-xxlarge); background: #fff; flex-direction: column; justify-content: center; align-items: center; min-height: 200px; display: flex; } .rich-text-editor-module-scss-module__S-saBq__loadingSpinner { border: 3px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; width: 40px; height: 40px; animation: 1s linear infinite rich-text-editor-module-scss-module__S-saBq__spin; } @keyframes rich-text-editor-module-scss-module__S-saBq__spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .rich-text-editor-module-scss-module__S-saBq__statusBar { justify-content: flex-end; gap: var(--space-small); padding: var(--space-small) var(--space-medium); font-size: var(--font-size-sm); color: var(--color-font-disable); background: var(--color-secondary-50); border-top: 1px solid var(--color-border-default); border-radius: 0 0 8px 8px; display: flex; } .rich-text-editor-module-scss-module__S-saBq__statusDivider { opacity: .6; } .rich-text-editor-module-scss-module__S-saBq__error .rich-text-editor-module-scss-module__S-saBq__richTextEditor { border-color: var(--color-danger-500); box-shadow: 0 0 0 2px rgba(var(--color-danger-500), .15),var(--shadow-sm); } .rich-text-editor-module-scss-module__S-saBq__error .rich-text-editor-module-scss-module__S-saBq__richTextEditor:focus-within { border-color: var(--color-danger-500); box-shadow: 0 0 0 2px rgba(var(--color-danger-500), .25),var(--shadow-md); } .rich-text-editor-module-scss-module__S-saBq__success .rich-text-editor-module-scss-module__S-saBq__richTextEditor { border-color: var(--color-success-500); box-shadow: 0 0 0 2px rgba(var(--color-success-500), .15),var(--shadow-sm); } .rich-text-editor-module-scss-module__S-saBq__success .rich-text-editor-module-scss-module__S-saBq__richTextEditor:focus-within { border-color: var(--color-success-500); box-shadow: 0 0 0 2px rgba(var(--color-success-500), .25),var(--shadow-md); } .rich-text-editor-module-scss-module__S-saBq__warning .rich-text-editor-module-scss-module__S-saBq__richTextEditor { border-color: var(--color-warning-500); box-shadow: 0 0 0 2px rgba(var(--color-warning-500), .15),var(--shadow-sm); } .rich-text-editor-module-scss-module__S-saBq__warning .rich-text-editor-module-scss-module__S-saBq__richTextEditor:focus-within { border-color: var(--color-warning-500); box-shadow: 0 0 0 2px rgba(var(--color-warning-500), .25),var(--shadow-md); } .rich-text-editor-module-scss-module__S-saBq__disabled { opacity: .6; cursor: not-allowed; } .rich-text-editor-module-scss-module__S-saBq__disabled .rich-text-editor-module-scss-module__S-saBq__richTextEditor { background: var(--color-secondary-100); border-color: var(--color-border-table); cursor: not-allowed; } .rich-text-editor-module-scss-module__S-saBq__focused .rich-text-editor-module-scss-module__S-saBq__richTextEditor { border-color: var(--color-primary-600); box-shadow: 0 0 0 2px rgba(var(--color-primary-600), .15),var(--shadow-md); } .rich-text-editor-module-scss-module__S-saBq__message { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); margin-top: var(--space-tiny); line-height: var(--line-height-tight); } .rich-text-editor-module-scss-module__S-saBq__message--error { color: var(--color-danger-500); } .rich-text-editor-module-scss-module__S-saBq__message--success { color: var(--color-success-500); } .rich-text-editor-module-scss-module__S-saBq__message--warning { color: var(--color-warning-500); } .rich-text-editor-module-scss-module__S-saBq__message--helper { color: var(--color-font-disable); } .rich-text-editor-module-scss-module__S-saBq__size-small .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__customToolbar, .rich-text-editor-module-scss-module__S-saBq__size-small .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__toolbar { padding: var(--editor-padding-small); gap: var(--space-tiny); } .rich-text-editor-module-scss-module__S-saBq__size-small .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__toolbarButton { min-width: 32px; height: 32px; font-size: var(--editor-font-size-small); } .rich-text-editor-module-scss-module__S-saBq__size-small .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__toolbarSelect { min-width: 110px; font-size: var(--editor-font-size-small); padding: 6px 10px; } .rich-text-editor-module-scss-module__S-saBq__size-small .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__colorPicker { width: 32px; height: 32px; } .rich-text-editor-module-scss-module__S-saBq__size-small .rich-text-editor-module-scss-module__S-saBq__label { font-size: 10px; } .rich-text-editor-module-scss-module__S-saBq__size-large .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__customToolbar, .rich-text-editor-module-scss-module__S-saBq__size-large .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__toolbar { padding: var(--editor-padding-large); gap: var(--space-medium); } .rich-text-editor-module-scss-module__S-saBq__size-large .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__toolbarButton { min-width: 40px; height: 40px; font-size: var(--editor-font-size-large); } .rich-text-editor-module-scss-module__S-saBq__size-large .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__toolbarSelect { min-width: 150px; font-size: var(--editor-font-size-large); padding: 10px 14px; } .rich-text-editor-module-scss-module__S-saBq__size-large .rich-text-editor-module-scss-module__S-saBq__richTextEditor .rich-text-editor-module-scss-module__S-saBq__colorPicker { width: 40px; height: 40px; } .rich-text-editor-module-scss-module__S-saBq__size-large .rich-text-editor-module-scss-module__S-saBq__label { font-size: var(--font-size-sm); } @media (max-width: 640px) { .rich-text-editor-module-scss-module__S-saBq__richTextEditorContainer { margin-bottom: 4px; } .rich-text-editor-module-scss-module__S-saBq__toolbar, .rich-text-editor-module-scss-module__S-saBq__customToolbar { gap: var(--space-tiny); padding: var(--space-small); } .rich-text-editor-module-scss-module__S-saBq__toolbarGroup { flex-wrap: wrap; } .rich-text-editor-module-scss-module__S-saBq__toolbarGroup:not(:last-child) { border-right: 1px solid var(--color-border-default); padding-right: var(--space-tiny); } .rich-text-editor-module-scss-module__S-saBq__toolbarButton { min-width: 32px; height: 32px; font-size: 13px; } .rich-text-editor-module-scss-module__S-saBq__toolbarSelect { min-width: 110px; padding: 6px 10px; font-size: 13px; } .rich-text-editor-module-scss-module__S-saBq__colorPicker { width: 32px; height: 32px; } .rich-text-editor-module-scss-module__S-saBq__label { margin-bottom: 8px; font-size: 14px; } } @media (prefers-contrast: high) { .rich-text-editor-module-scss-module__S-saBq__richTextEditor { border-width: 2px; } } @media (prefers-reduced-motion: reduce) { .rich-text-editor-module-scss-module__S-saBq__richTextEditor, .rich-text-editor-module-scss-module__S-saBq__toolbarButton, .rich-text-editor-module-scss-module__S-saBq__toolbarSelect, .rich-text-editor-module-scss-module__S-saBq__colorPicker { transition: none; } .rich-text-editor-module-scss-module__S-saBq__toolbarButton:hover, .rich-text-editor-module-scss-module__S-saBq__colorPicker:hover { transform: none; } .rich-text-editor-module-scss-module__S-saBq__loadingSpinner { animation: none; } } .rich-text-editor-module-scss-module__S-saBq__hiddenFileInput { display: none; } /* [project]/src/core/components/common/rich-text-display/rich-text-display.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay { font-family: var(--font-family-texts); font-size: var(--font-size-sm); line-height: var(--line-height-loose); color: var(--color-font-body); word-wrap: break-word; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay[dir="ltr"] { text-align: left; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay[dir="rtl"] { text-align: right; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay p { margin: 0 0 .75em; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay p:last-child { margin-bottom: 0; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay strong, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay b { font-weight: var(--font-weight-semibold); } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay em, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay i { font-style: italic; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay u { text-underline-offset: 2px; text-decoration: underline; text-decoration-thickness: 1px; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay s { opacity: .7; text-decoration: line-through; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay ul, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay ol { margin: .75em 0; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay ul li, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay ol li { margin-bottom: .5em; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay ul li:last-child, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay ol li:last-child { margin-bottom: 0; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay[dir="ltr"] ul, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay[dir="ltr"] ol { padding-left: 2em; padding-right: 0; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay[dir="rtl"] ul, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay[dir="rtl"] ol { padding-left: 0; padding-right: 2em; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay a { color: var(--color-primary-600); text-decoration: none; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay a:hover { text-decoration: underline; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay blockquote { border-inline-start: 3px solid var(--color-border-default); color: var(--color-font-body); margin: .75em 0; padding-inline-start: var(--space-medium); } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay img { border-radius: var(--radius-sm); max-width: 100%; height: auto; } :is(.rich-text-display-module-scss-module__8EkNOq__richTextDisplay.ql-size-small, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay .ql-size-small) { font-size: .75em; } :is(.rich-text-display-module-scss-module__8EkNOq__richTextDisplay.ql-size-large, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay .ql-size-large) { font-size: 1.5em; } :is(.rich-text-display-module-scss-module__8EkNOq__richTextDisplay.ql-size-huge, .rich-text-display-module-scss-module__8EkNOq__richTextDisplay .ql-size-huge) { font-size: 2.5em; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay .ql-align-center { text-align: center; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay .ql-align-right { text-align: right; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay .ql-align-justify { text-align: justify; } .rich-text-display-module-scss-module__8EkNOq__richTextDisplay pre { background: var(--color-secondary-100); padding: var(--space-medium); border-radius: var(--radius-sm); overflow-x: auto; } /* [project]/src/core/components/common/toggle-switch/toggle-switch.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .toggle-switch-module-scss-module__r0KJ7q__switch { cursor: pointer; width: 44px; height: 24px; padding: 0 var(--space-tiny); border: none; border-radius: 9999px; outline: none; align-items: center; transition: background-color .18s, box-shadow .18s; display: inline-flex; position: relative; } .toggle-switch-module-scss-module__r0KJ7q__marketplace { width: 38px; height: 22px; padding: 0 3px; } .toggle-switch-module-scss-module__r0KJ7q__marketplace.toggle-switch-module-scss-module__r0KJ7q__on { background-color: var(--color-primary-400); } .toggle-switch-module-scss-module__r0KJ7q__marketplace.toggle-switch-module-scss-module__r0KJ7q__off { background-color: var(--color-secondary-200); } .toggle-switch-module-scss-module__r0KJ7q__marketplace .toggle-switch-module-scss-module__r0KJ7q__knob { width: 16px; height: 16px; } .toggle-switch-module-scss-module__r0KJ7q__marketplace.toggle-switch-module-scss-module__r0KJ7q__on .toggle-switch-module-scss-module__r0KJ7q__knob { transform: translateX(16px); } [dir="rtl"] .toggle-switch-module-scss-module__r0KJ7q__marketplace.toggle-switch-module-scss-module__r0KJ7q__on .toggle-switch-module-scss-module__r0KJ7q__knob { transform: translateX(-16px); } .toggle-switch-module-scss-module__r0KJ7q__on { background-color: var(--color-primary-600); box-shadow: inset 0 0 0 2px #0000000f; } .toggle-switch-module-scss-module__r0KJ7q__off { background-color: var(--color-secondary-300); box-shadow: inset 0 0 0 2px #0000000f; } .toggle-switch-module-scss-module__r0KJ7q__disabled { opacity: .6; cursor: not-allowed; } .toggle-switch-module-scss-module__r0KJ7q__knob { background-color: var(--color-white); width: 18px; height: 18px; box-shadow: var(--shadow-sm); border-radius: 50%; transition: transform .18s; transform: translateX(0); } .toggle-switch-module-scss-module__r0KJ7q__on .toggle-switch-module-scss-module__r0KJ7q__knob { transform: translateX(18px); } [dir="rtl"] .toggle-switch-module-scss-module__r0KJ7q__on .toggle-switch-module-scss-module__r0KJ7q__knob { transform: translateX(-18px); } @media (prefers-reduced-motion: reduce) { .toggle-switch-module-scss-module__r0KJ7q__switch, .toggle-switch-module-scss-module__r0KJ7q__knob { transition: none; } } /* [project]/src/core/components/common/table/table.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } @keyframes table-module-scss-module__VH0AQW__rotate { 100% { transform: rotate(360deg); } } @keyframes table-module-scss-module__VH0AQW__dash { 0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90 150; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 90 150; stroke-dashoffset: -124px; } } .table-module-scss-module__VH0AQW__tableWrapper { background-color: var(--color-white); border-radius: var(--radius-card-corner); border: 1px solid var(--tabel-color-border-outside, var(--color-border-default)); width: 100%; box-shadow: var(--shadow-sm); overflow: hidden; } .table-module-scss-module__VH0AQW__tableWrapper .table-module-scss-module__VH0AQW__pagination { z-index: 10; position: relative; overflow: visible; } .table-module-scss-module__VH0AQW__tableWrapper .table-module-scss-module__VH0AQW__pageSizeDropdownWrapper { overflow: visible; } .table-module-scss-module__VH0AQW__tableContainer { width: 100%; max-height: var(--max-height, none); overflow: auto; } .table-module-scss-module__VH0AQW__tableContainer.table-module-scss-module__VH0AQW__stickyHeader .table-module-scss-module__VH0AQW__tableHeader { z-index: 10; background-color: var(--tabel-color-header-default, var(--color-secondary-50)); position: sticky; top: 0; } .table-module-scss-module__VH0AQW__table { border-collapse: collapse; width: 100%; font-size: var(--font-size-sm); color: var(--color-font-body); font-family: var(--font-family-texts); } .table-module-scss-module__VH0AQW__table.table-module-scss-module__VH0AQW__bordered th, .table-module-scss-module__VH0AQW__table.table-module-scss-module__VH0AQW__bordered td { border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); } .table-module-scss-module__VH0AQW__table.table-module-scss-module__VH0AQW__bordered th:last-child, .table-module-scss-module__VH0AQW__table.table-module-scss-module__VH0AQW__bordered td:last-child { border-right: none; } .table-module-scss-module__VH0AQW__table.table-module-scss-module__VH0AQW__hover .table-module-scss-module__VH0AQW__tableRow:hover { background-color: var(--tabel-color-row-hover, var(--color-secondary-50)); } .table-module-scss-module__VH0AQW__table.table-module-scss-module__VH0AQW__dense th, .table-module-scss-module__VH0AQW__table.table-module-scss-module__VH0AQW__dense td { padding: var(--space-small) var(--space-medium); } .table-module-scss-module__VH0AQW__tableHeader { background-color: var(--tabel-color-header-default, var(--color-secondary-50)); border-bottom: 1px solid var(--tabel-color-header-border-default, var(--color-border-table)); } .table-module-scss-module__VH0AQW__tableHeader th { padding: var(--tabel-size-header-cell-padding-top, var(--space-medium)) var(--tabel-size-header-cell-padding-right, var(--space-xlarge)); text-align: left; font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); color: var(--color-font-links-labels); white-space: nowrap; border-right: 1px solid var(--tabel-color-header-border-default, var(--color-border-table)); height: var(--tabel-size-header-cell-min-height, 48px); vertical-align: middle; border-bottom: none; } .table-module-scss-module__VH0AQW__tableHeader th:first-child { border-right: 1px solid var(--tabel-color-header-border-default, var(--color-border-table)); } .table-module-scss-module__VH0AQW__tableHeader th:last-child { border-right: none; } .table-module-scss-module__VH0AQW__tableHeader th.table-module-scss-module__VH0AQW__checkboxCell { text-align: center; height: var(--tabel-size-header-cell-min-height, 48px); max-width: var(--tabel-size-column-width-checkbox, 64px); background: var(--tabel-color-header-default, var(--color-secondary-50)); border: 0 solid var(--tabel-color-header-border-default, var(--color-border-table)); padding: 0; display: table-cell; border-right: 1px solid var(--tabel-color-header-border-default, var(--color-border-table)) !important; } .table-module-scss-module__VH0AQW__headerCell { -webkit-user-select: none; user-select: none; text-align: left; width: var(--col-width, auto); position: relative; } .table-module-scss-module__VH0AQW__headerCell[data-align="center"] { text-align: center; } .table-module-scss-module__VH0AQW__headerCell[data-align="right"] { text-align: right; } .table-module-scss-module__VH0AQW__headerCell.table-module-scss-module__VH0AQW__sortable { cursor: pointer; } .table-module-scss-module__VH0AQW__headerCellActive { background-color: var(--tabel-color-header-active, var(--color-primary-50)) !important; } .table-module-scss-module__VH0AQW__headerCellActive span { color: var(--color-primary-600); font-weight: var(--font-weight-medium); } .table-module-scss-module__VH0AQW__headerContent { align-items: center; gap: var(--space-small); display: flex; } .table-module-scss-module__VH0AQW__sortIcon { margin-left: var(--space-tiny); opacity: .4; align-items: center; transition: opacity .15s; display: inline-flex; } .table-module-scss-module__VH0AQW__sortIcon svg { width: var(--space-large); height: var(--space-large); color: var(--color-font-links-labels); transition: color .15s; } .table-module-scss-module__VH0AQW__sortIconActive { opacity: 1; } .table-module-scss-module__VH0AQW__sortIconActive svg { color: var(--color-primary-600) !important; } .table-module-scss-module__VH0AQW__headerCell.table-module-scss-module__VH0AQW__sortable:hover .table-module-scss-module__VH0AQW__sortIcon { opacity: .8; } .table-module-scss-module__VH0AQW__headerCell.table-module-scss-module__VH0AQW__sortable:hover .table-module-scss-module__VH0AQW__sortIcon svg { color: var(--color-font-headings); } .table-module-scss-module__VH0AQW__headerCell.table-module-scss-module__VH0AQW__sortable:hover .table-module-scss-module__VH0AQW__sortIconActive { opacity: 1; } .table-module-scss-module__VH0AQW__tableRow { border-bottom: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); background-color: var(--tabel-color-row-default, #fff0); height: var(--tabel-size-row-cell-min-height, 64px); transition: background-color .15s; } .table-module-scss-module__VH0AQW__tableRow:last-child { border-bottom: none; } .table-module-scss-module__VH0AQW__tableRow.table-module-scss-module__VH0AQW__selected { background-color: var(--tabel-color-row-selected, var(--color-secondary-50)); } .table-module-scss-module__VH0AQW__tableCell { padding: var(--tabel-size-row-cell-padding-top, var(--space-medium)) var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); vertical-align: middle; border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); height: var(--tabel-size-row-cell-min-height, 64px); } .table-module-scss-module__VH0AQW__tableCell:first-child { border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); color: var(--color-font-headings); } .table-module-scss-module__VH0AQW__tableCell:last-child { border-right: none; } .table-module-scss-module__VH0AQW__tableCell:has(.table-module-scss-module__VH0AQW__productNameCell) { padding: 0; } .table-module-scss-module__VH0AQW__tableCell[style*="text-align: center"] { height: var(--tabel-size-row-cell-min-height, 64px); border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); border-bottom: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); padding: 0; } .table-module-scss-module__VH0AQW__tableCell[style*="text-align: center"] .table-module-scss-module__VH0AQW__cellContent { height: var(--tabel-size-row-cell-min-height, 64px); padding: var(--tabel-size-row-cell-padding-top, var(--space-medium)) var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); justify-content: center; align-items: center; gap: var(--space-small); width: 100%; display: flex; } .table-module-scss-module__VH0AQW__cellContent { min-height: 20px; color: inherit; justify-content: flex-start; align-items: center; display: flex; } .table-module-scss-module__VH0AQW__cellContent.table-module-scss-module__VH0AQW__editable { cursor: text; padding: var(--space-tiny) var(--space-small); border-radius: var(--radius-sm); } .table-module-scss-module__VH0AQW__cellContent.table-module-scss-module__VH0AQW__editable:hover { background-color: var(--color-secondary-100); } .table-module-scss-module__VH0AQW__cellContent [class*="label"] { margin: 0 auto; } .table-module-scss-module__VH0AQW__tableCell[style*="text-align: center"] .table-module-scss-module__VH0AQW__cellContent { justify-content: center; } .table-module-scss-module__VH0AQW__cellContent:has(.table-module-scss-module__VH0AQW__productNameCell) { align-items: center; width: 100%; height: 100%; padding: 0; display: flex; } .table-module-scss-module__VH0AQW__productNameCell { width: 100%; height: 100%; min-height: var(--tabel-size-row-cell-min-height, 64px); max-height: var(--tabel-size-row-cell-min-height, 64px); padding: var(--tabel-size-row-cell-padding-top, var(--space-medium)) var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); align-items: center; gap: var(--space-small); box-sizing: border-box; display: flex; } .table-module-scss-module__VH0AQW__productImageWrapper { width: var(--tabel-size-image-width, 40px); height: var(--tabel-size-image-height, 40px); min-width: var(--tabel-size-image-width, 40px); max-width: var(--tabel-size-image-width, 40px); min-height: var(--tabel-size-image-height, 40px); max-height: var(--tabel-size-image-height, 40px); box-sizing: content-box; flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .table-module-scss-module__VH0AQW__productImage { width: var(--tabel-size-image-width, 40px); height: var(--tabel-size-image-height, 40px); min-width: var(--tabel-size-image-width, 40px); max-width: var(--tabel-size-image-width, 40px); min-height: var(--tabel-size-image-height, 40px); max-height: var(--tabel-size-image-height, 40px); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); object-fit: cover; aspect-ratio: 1; background: 50% / cover no-repeat, #fff3; flex-shrink: 0; display: block; } .table-module-scss-module__VH0AQW__productImagePlaceholder { width: var(--tabel-size-image-width, 40px); height: var(--tabel-size-image-height, 40px); min-width: var(--tabel-size-image-width, 40px); max-width: var(--tabel-size-image-width, 40px); min-height: var(--tabel-size-image-height, 40px); max-height: var(--tabel-size-image-height, 40px); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); aspect-ratio: 1; background: #d3d3d3; justify-content: center; align-items: center; display: flex; } .table-module-scss-module__VH0AQW__productNameTextContainer { gap: var(--space-tiny); flex-direction: column; flex: 1; min-width: 0; display: flex; } .table-module-scss-module__VH0AQW__productNameText { font-family: var(--font-family-headings); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-loose); color: var(--color-font-headings); text-overflow: ellipsis; white-space: nowrap; margin: 0; overflow: hidden; } .table-module-scss-module__VH0AQW__productIdText { font-family: var(--font-family-headings); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-loose); color: var(--color-font-body); text-overflow: ellipsis; white-space: nowrap; margin: 0; overflow: hidden; } .table-module-scss-module__VH0AQW__editCell { position: relative; } .table-module-scss-module__VH0AQW__editInput { width: 100%; padding: var(--space-tiny) var(--space-small); border: 1px solid var(--color-primary-600); border-radius: var(--radius-sm); font-size: inherit; font-family: var(--font-family-texts); background-color: var(--color-white); outline: none; } .table-module-scss-module__VH0AQW__editInput:focus { border-color: var(--color-primary-600); box-shadow: 0 0 0 2px #3572ef1a; } .table-module-scss-module__VH0AQW__editError { margin-top: var(--space-tiny); padding: var(--space-tiny) var(--space-small); background-color: var(--color-danger-50); color: var(--color-danger-600); border-radius: var(--radius-sm); font-size: var(--font-size-xs); white-space: nowrap; box-shadow: var(--shadow-sm); z-index: 10; position: absolute; top: 100%; left: 0; } .table-module-scss-module__VH0AQW__checkboxCell { border: 0 solid var(--tabel-color-row-border-default, var(--color-border-table)); vertical-align: middle; width: auto; padding: 0; } .table-module-scss-module__VH0AQW__tableHeader .table-module-scss-module__VH0AQW__checkboxCell { text-align: center; height: var(--tabel-size-header-cell-min-height, 48px); max-width: var(--tabel-size-column-width-checkbox, 64px); background: var(--tabel-color-header-default, var(--color-secondary-50)); border: 0 solid var(--tabel-color-header-border-default, var(--color-border-table)); padding: 0; display: table-cell; border-right: 1px solid var(--tabel-color-header-border-default, var(--color-border-table)) !important; } .table-module-scss-module__VH0AQW__tableRow .table-module-scss-module__VH0AQW__checkboxCell, td.table-module-scss-module__VH0AQW__checkboxCell { height: var(--tabel-size-row-cell-min-height, 64px); max-width: var(--tabel-size-column-width-checkbox, 64px); border: 0 solid var(--tabel-color-row-border-default, var(--color-border-table)); border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)) !important; } .table-module-scss-module__VH0AQW__checkboxCellContent { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; } .table-module-scss-module__VH0AQW__tableHeader .table-module-scss-module__VH0AQW__checkboxCell .table-module-scss-module__VH0AQW__checkboxCellContent { height: var(--tabel-size-header-cell-min-height, 48px); padding: var(--tabel-size-header-cell-padding-top, var(--space-medium)) var(--tabel-size-header-cell-padding-right, var(--space-xlarge)); gap: var(--space-large); } .table-module-scss-module__VH0AQW__tableRow .table-module-scss-module__VH0AQW__checkboxCell .table-module-scss-module__VH0AQW__checkboxCellContent, td.table-module-scss-module__VH0AQW__checkboxCell .table-module-scss-module__VH0AQW__checkboxCellContent { height: var(--tabel-size-row-cell-min-height, 64px); padding: var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); gap: var(--space-tiny); } .table-module-scss-module__VH0AQW__checkbox { cursor: pointer; width: 18px; height: 18px; accent-color: var(--color-primary-600); } .table-module-scss-module__VH0AQW__checkbox:focus { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .table-module-scss-module__VH0AQW__customCheckbox { aspect-ratio: 1; cursor: pointer; flex-shrink: 0; justify-content: center; align-items: center; width: 16px; height: 16px; transition: color .15s; display: inline-flex; position: relative; } .table-module-scss-module__VH0AQW__customCheckbox:focus { outline: none; } .table-module-scss-module__VH0AQW__customCheckbox.table-module-scss-module__VH0AQW__disabled { cursor: not-allowed; opacity: .5; } .table-module-scss-module__VH0AQW__customCheckbox.table-module-scss-module__VH0AQW__checked .table-module-scss-module__VH0AQW__checkboxIcon path { fill: var(--color-font-disable); } .table-module-scss-module__VH0AQW__customCheckbox:hover .table-module-scss-module__VH0AQW__checkIcon svg { color: var(--color-primary-600) !important; } .table-module-scss-module__VH0AQW__checkIcon { aspect-ratio: 1; width: 16px; height: 16px; display: block; } .table-module-scss-module__VH0AQW__checkIcon svg { transition: color .15s; color: var(--color-primary-600) !important; } .table-module-scss-module__VH0AQW__tableHeader .table-module-scss-module__VH0AQW__customCheckbox:focus { outline: none; } .table-module-scss-module__VH0AQW__checkboxIcon { aspect-ratio: 1; width: 16px; height: 16px; display: block; } .table-module-scss-module__VH0AQW__checkboxIcon svg { transition: color .15s; color: var(--color-primary-600) !important; } .table-module-scss-module__VH0AQW__indeterminateLine { display: none; } .table-module-scss-module__VH0AQW__actionCell { width: var(--tabel-size-column-width-action, 144px); padding: var(--space-small) var(--space-large); text-align: center; } .table-module-scss-module__VH0AQW__actionButtons { justify-content: center; align-items: center; gap: var(--space-small); display: flex; } .table-module-scss-module__VH0AQW__viewButton, .table-module-scss-module__VH0AQW__editButton { background: var(--color-white) !important; border: 1px solid var(--color-border-default) !important; border-radius: var(--radius-md) !important; } .table-module-scss-module__VH0AQW__viewButton:hover, .table-module-scss-module__VH0AQW__editButton:hover { background: var(--color-secondary-50) !important; } :is(.table-module-scss-module__VH0AQW__viewButton svg, .table-module-scss-module__VH0AQW__editButton svg) { color: var(--color-font-links-labels) !important; } .table-module-scss-module__VH0AQW__deleteButton { background: var(--color-white) !important; border: 1px solid var(--color-border-default) !important; border-radius: var(--radius-md) !important; } .table-module-scss-module__VH0AQW__deleteButton svg { transition: color .15s; color: var(--color-font-links-labels) !important; } .table-module-scss-module__VH0AQW__deleteButton:hover { background: var(--color-secondary-50) !important; } .table-module-scss-module__VH0AQW__deleteButton:hover svg { color: var(--color-danger-600) !important; } .table-module-scss-module__VH0AQW__pagination { padding: var(--space-large) var(--space-xlarge); border-top: 1px solid var(--color-border-default); background-color: var(--color-white); z-index: 1; isolation: isolate; justify-content: space-between; align-items: center; display: flex; position: relative; overflow: visible; } .table-module-scss-module__VH0AQW__paginationInfo { align-items: center; gap: var(--space-xxlarge); color: var(--color-font-links-labels); font-size: var(--font-size-sm); display: flex; overflow: visible; } .table-module-scss-module__VH0AQW__pageSizeSelector { align-items: center; gap: var(--space-small); display: flex; overflow: visible; } .table-module-scss-module__VH0AQW__pageSizeDropdownWrapper { z-index: 1001; isolation: isolate; position: relative; } .table-module-scss-module__VH0AQW__pageSizeDropdownTrigger { padding: var(--space-tiny) var(--space-small); justify-content: center; align-items: center; gap: var(--space-tiny); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: var(--color-white); box-shadow: var(--shadow-sm); cursor: pointer; font-size: var(--font-size-sm); color: var(--color-font-links-labels); font-family: var(--font-family-texts); width: auto; min-width: fit-content; transition: all .15s; display: flex; } .table-module-scss-module__VH0AQW__pageSizeDropdownTrigger:hover:not(:disabled) { border-color: var(--color-border-active); } .table-module-scss-module__VH0AQW__pageSizeDropdownTrigger:focus { outline: none; } .table-module-scss-module__VH0AQW__pageSizeDropdownTrigger:disabled { opacity: .6; cursor: not-allowed; } .table-module-scss-module__VH0AQW__pageSizeDropdownTrigger span { line-height: 24px; } .table-module-scss-module__VH0AQW__pageSizeDropdownMenu { bottom: calc(100% + var(--space-tiny)); z-index: 1002; background: var(--color-white); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); min-width: 100%; box-shadow: var(--shadow-lg); padding: var(--space-tiny); gap: var(--space-tiny); flex-direction: column; display: flex; position: absolute; inset-inline-start: 0; } .table-module-scss-module__VH0AQW__pageSizeDropdownItem { padding: var(--space-tiny) var(--space-small); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-sm); color: var(--color-font-links-labels); font-family: var(--font-family-texts); text-align: left; background: none; border: none; line-height: 24px; transition: background-color .15s; } .table-module-scss-module__VH0AQW__pageSizeDropdownItem:hover { background-color: var(--color-secondary-50); } .table-module-scss-module__VH0AQW__pageSizeDropdownItem.table-module-scss-module__VH0AQW__active { background-color: var(--color-secondary-100); color: var(--color-font-headings); font-weight: var(--font-weight-medium); } .table-module-scss-module__VH0AQW__paginationControls { align-items: center; gap: var(--space-small); display: flex; } .table-module-scss-module__VH0AQW__pageNumbers { align-items: center; gap: var(--space-tiny); display: flex; } .table-module-scss-module__VH0AQW__pageNumber { border: 1px solid var(--color-border-default); background-color: var(--color-white); border-radius: var(--radius-sm); min-width: 32px; height: 32px; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-font-links-labels); cursor: pointer; box-shadow: var(--shadow-sm); justify-content: center; align-items: center; padding: 0; transition: all .15s; display: flex; } .table-module-scss-module__VH0AQW__pageNumber:hover:not(:disabled):not(.table-module-scss-module__VH0AQW__active) { background-color: var(--color-white); border-color: var(--color-border-default); } .table-module-scss-module__VH0AQW__pageNumber.table-module-scss-module__VH0AQW__active { background-color: var(--color-secondary-100); border-color: var(--color-border-default); color: var(--color-font-headings); font-weight: var(--font-weight-regular); box-shadow: var(--shadow-sm); } .table-module-scss-module__VH0AQW__pageNumber:focus { outline: none; } .table-module-scss-module__VH0AQW__pageNumber:disabled { opacity: .5; cursor: not-allowed; } .table-module-scss-module__VH0AQW__paginationDots { color: var(--color-font-links-labels); -webkit-user-select: none; user-select: none; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0; display: flex; } .table-module-scss-module__VH0AQW__loadingContainer { padding: var(--space-enormous) var(--space-xxlarge); color: var(--color-font-links-labels); flex-direction: column; justify-content: center; align-items: center; display: flex; } .table-module-scss-module__VH0AQW__loadingContainer span { margin-top: var(--space-large); font-size: var(--font-size-sm); } .table-module-scss-module__VH0AQW__spinner { width: 40px; height: 40px; } .table-module-scss-module__VH0AQW__spinnerIcon { animation: 1.4s linear infinite table-module-scss-module__VH0AQW__rotate; } .table-module-scss-module__VH0AQW__spinnerPath { stroke: var(--color-primary-600); stroke-linecap: round; animation: 1.4s ease-in-out infinite table-module-scss-module__VH0AQW__dash; } .table-module-scss-module__VH0AQW__emptyContainer { padding: var(--space-enormous) var(--space-xxlarge); flex-direction: column; justify-content: center; align-items: center; display: flex; } .table-module-scss-module__VH0AQW__emptyIcon { margin-bottom: var(--space-large); opacity: .5; } .table-module-scss-module__VH0AQW__emptyMessage { font-size: var(--font-size-md); color: var(--color-font-links-labels); text-align: center; } @media (max-width: 768px) { .table-module-scss-module__VH0AQW__pagination { gap: var(--space-large); flex-direction: column; } .table-module-scss-module__VH0AQW__paginationInfo { align-items: center; gap: var(--space-medium); text-align: center; flex-direction: column; width: 100%; } .table-module-scss-module__VH0AQW__paginationControls .table-module-scss-module__VH0AQW__paginationButton { font-size: 0 !important; } :is(.table-module-scss-module__VH0AQW__paginationControls .table-module-scss-module__VH0AQW__paginationButton [class*="icon"], .table-module-scss-module__VH0AQW__paginationControls .table-module-scss-module__VH0AQW__paginationButton svg) { margin: 0 !important; font-size: 16px !important; } .table-module-scss-module__VH0AQW__paginationControls .table-module-scss-module__VH0AQW__paginationButton { justify-content: center !important; align-items: center !important; width: 32px !important; min-width: 32px !important; padding: 0 !important; display: inline-flex !important; } .table-module-scss-module__VH0AQW__table { font-size: var(--font-size-xs); } .table-module-scss-module__VH0AQW__tableHeader th { padding: var(--space-small) var(--space-medium); font-size: 11px; } .table-module-scss-module__VH0AQW__tableCell { padding: var(--space-small) var(--space-medium); } } /* [project]/src/core/components/common/media-picker-uploader/media-picker-uploader.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .media-picker-uploader-module-scss-module__k0HSla__container { box-sizing: border-box; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23d7dae0' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); border: none; border-radius: 12px; flex-direction: column; align-items: center; gap: 24px; width: 304px; height: 319px; padding: 24px; display: flex; } .media-picker-uploader-module-scss-module__k0HSla__emptyState { cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 24px; width: 100%; height: 100%; display: flex; } .media-picker-uploader-module-scss-module__k0HSla__placeholderImage { width: 58px; height: 48px; } .media-picker-uploader-module-scss-module__k0HSla__emptyStateText { color: #484e5c; text-align: center; margin: 0; font-family: Nunito Sans, sans-serif; font-size: 16px; font-weight: 400; } .media-picker-uploader-module-scss-module__k0HSla__populatedState { flex-direction: column; gap: 24px; width: 100%; height: 100%; display: flex; } .media-picker-uploader-module-scss-module__k0HSla__mainPreview { background-color: #f5f5f5; border-radius: 8px; width: 256px; height: 116px; padding-top: 35px; padding-left: 24px; padding-right: 24px; position: relative; overflow: hidden; } .media-picker-uploader-module-scss-module__k0HSla__mainPreview img { border-radius: 8px; } .media-picker-uploader-module-scss-module__k0HSla__hiddenInput { opacity: 0; pointer-events: none; width: 0; height: 0; position: absolute; left: -9999px; overflow: hidden; } .media-picker-uploader-module-scss-module__k0HSla__dragOver { background-color: #3b82f60d; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%233b82f6' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); } .media-picker-uploader-module-scss-module__k0HSla__disabled { opacity: .6; cursor: not-allowed; pointer-events: none; } .media-picker-uploader-module-scss-module__k0HSla__thumbnailContainer { flex-flow: wrap; align-content: flex-start; align-items: flex-start; gap: 8px; width: 100%; max-height: 136px; display: flex; overflow: hidden auto; } .media-picker-uploader-module-scss-module__k0HSla__thumbnailContainer::-webkit-scrollbar { width: 4px; } .media-picker-uploader-module-scss-module__k0HSla__thumbnailContainer::-webkit-scrollbar-track { background: none; } .media-picker-uploader-module-scss-module__k0HSla__thumbnailContainer::-webkit-scrollbar-thumb { background-color: #0003; border-radius: 2px; } .media-picker-uploader-module-scss-module__k0HSla__thumbnail { cursor: grab; border-radius: 8px; flex-shrink: 0; width: 40px; height: 40px; position: relative; overflow: hidden; } .media-picker-uploader-module-scss-module__k0HSla__thumbnail:after { content: ""; pointer-events: none; background-color: #fff0; width: 100%; height: 100%; transition: background-color .2s; position: absolute; top: 0; left: 0; } .media-picker-uploader-module-scss-module__k0HSla__thumbnail:hover:after { background-color: #fff3; } .media-picker-uploader-module-scss-module__k0HSla__thumbnail:active { cursor: grabbing; } .media-picker-uploader-module-scss-module__k0HSla__thumbnailImage { border-radius: 8px; } .media-picker-uploader-module-scss-module__k0HSla__removeButton { color: #fff; cursor: pointer; z-index: 1; background-color: #0009; border: none; border-radius: 50%; justify-content: center; align-items: center; width: 16px; height: 16px; padding: 0; font-size: 12px; line-height: 1; display: flex; position: absolute; top: 2px; right: 2px; } .media-picker-uploader-module-scss-module__k0HSla__removeButton:hover { background-color: #000c; } .media-picker-uploader-module-scss-module__k0HSla__addMoreButton { cursor: pointer; background-color: #0000; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23d7dae0' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); border: none; border-radius: 8px; flex-shrink: 0; justify-content: center; align-items: center; width: 40px; height: 40px; margin-left: 5.6px; display: flex; } .media-picker-uploader-module-scss-module__k0HSla__addMoreButton:hover { background-color: #3b82f60d; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%233b82f6' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); } .media-picker-uploader-module-scss-module__k0HSla__addMoreIcon { color: #484e5c; font-size: 20px; } .media-picker-uploader-module-scss-module__k0HSla__loadingOverlay { z-index: 2; background-color: #00000080; border-radius: 8px; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; top: 0; left: 0; } .media-picker-uploader-module-scss-module__k0HSla__loadingSpinner { border: 2px solid #ffffff4d; border-top-color: #fff; border-radius: 50%; width: 16px; height: 16px; animation: .8s linear infinite media-picker-uploader-module-scss-module__k0HSla__spin; } .media-picker-uploader-module-scss-module__k0HSla__loadingSpinnerLarge { border-width: 3px; width: 32px; height: 32px; } @keyframes media-picker-uploader-module-scss-module__k0HSla__spin { to { transform: rotate(360deg); } } /* [project]/src/core/components/ui/modal/modal.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .modal-module-scss-module__wSVoNq__xsmall { width: min(400px, 100vw - 32px); max-width: calc(100vw - 32px); } .modal-module-scss-module__wSVoNq__small { width: min(640px, 100vw - 32px); max-width: calc(100vw - 32px); } .modal-module-scss-module__wSVoNq__medium { width: min(880px, 100vw - 32px); max-width: calc(100vw - 32px); } .modal-module-scss-module__wSVoNq__large { width: min(1120px, 100vw - 32px); max-width: calc(100vw - 32px); } .modal-module-scss-module__wSVoNq__overlay { z-index: 2000; opacity: 0; background-color: var(--overlay-bg-hidden, #0f172a00); -webkit-backdrop-filter: blur(); justify-content: center; align-items: center; padding: 16px; transition: opacity .5s cubic-bezier(.16, 1, .3, 1), background-color .5s cubic-bezier(.16, 1, .3, 1), -webkit-backdrop-filter .5s cubic-bezier(.16, 1, .3, 1), backdrop-filter .5s cubic-bezier(.16, 1, .3, 1); display: flex; position: fixed; inset: 0; } .modal-module-scss-module__wSVoNq__overlayVisible { opacity: 1; background-color: var(--overlay-bg-visible, #0f172a73); -webkit-backdrop-filter: blur(16px); } .modal-module-scss-module__wSVoNq__container { border: 1px solid var(--modal-border, #ffffff4d); background: var(--modal-surface, #fffffff2); -webkit-backdrop-filter: blur(40px) saturate(150%); height: min(820px, 100vh - 48px); max-height: calc(100vh - 48px); box-shadow: 0 4px 24px -8px var(--modal-shadow-1, #0f172a14),0 16px 48px -12px var(--modal-shadow-2, #0f172a26),0 32px 64px -16px var(--modal-shadow-3, #0f172a33),inset 0 1px 1px 0 #fffc; opacity: 0; transform-origin: center; will-change: opacity,transform; isolation: isolate; border-radius: 28px; outline: none; flex-direction: column; transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.34, 1.56, .64, 1); display: flex; position: relative; overflow: hidden; transform: translateY(24px)scale(.96); } .modal-module-scss-module__wSVoNq__containerVisible { opacity: 1; transform: translateY(0)scale(1); } .modal-module-scss-module__wSVoNq__solid { border-color: var(--color-border-default); background: var(--color-white); -webkit-backdrop-filter: none; } .modal-module-scss-module__wSVoNq__solid .modal-module-scss-module__wSVoNq__header, .modal-module-scss-module__wSVoNq__solid .modal-module-scss-module__wSVoNq__body, .modal-module-scss-module__wSVoNq__solid .modal-module-scss-module__wSVoNq__footer { background: var(--color-white); -webkit-backdrop-filter: none; } .modal-module-scss-module__wSVoNq__solid .modal-module-scss-module__wSVoNq__title { -webkit-text-fill-color: currentColor; background: none; } .modal-module-scss-module__wSVoNq__marketplace { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; width: min(520px, 100vw - 32px); height: min(721px, 100vh - 32px); box-shadow: 0 4px 12px #0f17291a, 0 24px 48px -8px #0f172933; } .modal-module-scss-module__wSVoNq__marketplace .modal-module-scss-module__wSVoNq__header { -webkit-backdrop-filter: none; background: #fff; border-bottom-color: #e5e7eb; padding: 20px 20px 16px 24px; } .modal-module-scss-module__wSVoNq__marketplace .modal-module-scss-module__wSVoNq__title { color: #1f2937; letter-spacing: 0; -webkit-text-fill-color: currentColor; background: none; font-size: 18px; font-weight: 600; } .modal-module-scss-module__wSVoNq__marketplace .modal-module-scss-module__wSVoNq__subtitle { color: #6b7280; font-size: 13px; font-weight: 400; } .modal-module-scss-module__wSVoNq__marketplace .modal-module-scss-module__wSVoNq__closeButton { width: 32px; height: 32px; box-shadow: none; background: none; border: 0; border-radius: 8px; } .modal-module-scss-module__wSVoNq__marketplace .modal-module-scss-module__wSVoNq__closeButton:hover { color: #1f2937; box-shadow: none; background: #f7f8f8; border-color: #0000; transform: none; } .modal-module-scss-module__wSVoNq__marketplace .modal-module-scss-module__wSVoNq__body { padding: 0; } .modal-module-scss-module__wSVoNq__marketplace .modal-module-scss-module__wSVoNq__footer { -webkit-backdrop-filter: none; min-height: 72px; box-shadow: none; background: #fff; border-top-color: #e5e7eb; padding: 16px 24px; } .modal-module-scss-module__wSVoNq__header { z-index: 20; background: linear-gradient(180deg, var(--modal-surface, #fffffff2) 0%, var(--modal-surface, #ffffffbf) 100%); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--modal-divider, #e2e8f099); justify-content: space-between; align-items: center; gap: 16px; padding: 24px 32px 20px; display: flex; position: sticky; top: 0; } .modal-module-scss-module__wSVoNq__titleGroup { flex-direction: column; flex: auto; gap: 4px; min-inline-size: 0; display: flex; } .modal-module-scss-module__wSVoNq__title { white-space: nowrap; text-overflow: ellipsis; max-inline-size: 100%; color: var(--modal-title, #0f172a); letter-spacing: -.02em; background: linear-gradient(135deg, #0f172a 0%, #334155 100%); -webkit-text-fill-color: #0000; -webkit-background-clip: text; margin: 0; font-family: Inter, Outfit, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; display: block; overflow: hidden; } .modal-module-scss-module__wSVoNq__subtitle { min-inline-size: 0; color: var(--modal-subtitle, #64748b); -webkit-text-fill-color: currentColor; letter-spacing: -.01em; overflow-wrap: anywhere; flex-wrap: wrap; align-items: center; gap: 8px; font-family: Inter, Outfit, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; display: flex; } .modal-module-scss-module__wSVoNq__closeButton { border: 1px solid var(--close-border, #e2e8f0cc); background: var(--close-bg, #f8fafccc); width: 38px; height: 38px; color: var(--close-color, #64748b); cursor: pointer; border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; transition: all .25s cubic-bezier(.16, 1, .3, 1); display: inline-flex; box-shadow: 0 2px 8px -2px #0f172a0d; } .modal-module-scss-module__wSVoNq__closeButton:hover { background: var(--close-bg-hover, #ef4444); color: var(--close-color-hover, #fff); border-color: var(--close-border-hover, #ef4444); transform: rotate(90deg)scale(1.05); box-shadow: 0 4px 12px -2px #ef444440; } .modal-module-scss-module__wSVoNq__closeButton:active { transform: rotate(90deg)scale(.95); } .modal-module-scss-module__wSVoNq__closeButton:focus-visible { box-shadow: 0 0 0 4px var(--close-focus-ring, #ef444426); outline: none; } .modal-module-scss-module__wSVoNq__body { z-index: 1; background: var(--modal-body-bg, transparent); flex-direction: column; flex: auto; min-height: 0; padding: 32px; display: flex; position: relative; overflow: visible; } .modal-module-scss-module__wSVoNq__bodyInner { overscroll-behavior: contain; scrollbar-gutter: stable; flex: auto; min-height: 0; overflow: visible auto; } .modal-module-scss-module__wSVoNq__bodyInner::-webkit-scrollbar { width: 6px; } .modal-module-scss-module__wSVoNq__bodyInner::-webkit-scrollbar-track { background: none; } .modal-module-scss-module__wSVoNq__bodyInner::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #94a3b880); background-clip: padding-box; border: 1px solid #0000; border-radius: 999px; transition: background-color .2s; } .modal-module-scss-module__wSVoNq__bodyInner::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #64748bcc); background-clip: padding-box; border: 1px solid #0000; } .modal-module-scss-module__wSVoNq__bodyInner > * { position: relative; } :is(.modal-module-scss-module__wSVoNq__body .select__menu, .modal-module-scss-module__wSVoNq__body .select__menu-portal, .modal-module-scss-module__wSVoNq__body .react-select__menu, .modal-module-scss-module__wSVoNq__body .react-select__menu-portal, .modal-module-scss-module__wSVoNq__body [data-radix-popper-content-wrapper], .modal-module-scss-module__wSVoNq__body [role="listbox"]) { z-index: 4000; } .modal-module-scss-module__wSVoNq__footer { z-index: 20; background: linear-gradient(0deg, var(--modal-surface, #fffffff2) 0%, var(--modal-surface, #fffc) 100%); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--modal-divider, #e2e8f099); justify-content: flex-end; align-items: center; gap: 16px; padding: 20px 32px 24px; display: flex; position: sticky; bottom: 0; box-shadow: 0 -8px 32px -8px #0f172a0d; } @media (max-width: 1024px) { .modal-module-scss-module__wSVoNq__large { width: min(960px, 100vw - 32px); max-width: calc(100vw - 32px); } } @media (max-width: 768px) { .modal-module-scss-module__wSVoNq__overlay { align-items: flex-end; padding: 0; } .modal-module-scss-module__wSVoNq__container { border-bottom: none; border-left: none; border-right: none; border-radius: 28px 28px 0 0; width: 100%; max-width: 100vw; height: 94vh; max-height: 94vh; transition: transform .5s cubic-bezier(.32, .72, 0, 1); transform: translateY(100%); } .modal-module-scss-module__wSVoNq__containerVisible { transform: translateY(0); } .modal-module-scss-module__wSVoNq__header, .modal-module-scss-module__wSVoNq__body, .modal-module-scss-module__wSVoNq__footer { padding-left: 24px; padding-right: 24px; } .modal-module-scss-module__wSVoNq__header { padding-top: 20px; padding-bottom: 20px; } .modal-module-scss-module__wSVoNq__body { padding-top: 24px; padding-bottom: 24px; } .modal-module-scss-module__wSVoNq__footer { padding-top: 20px; padding-bottom: 24px; } } /* [project]/src/core/components/common/media-picker-uploader/components/image-cropper-modal/image-cropper-modal.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .image-cropper-modal-module-scss-module__LBAvQW__container { flex-direction: column; gap: 20px; padding: 20px; display: flex; } .image-cropper-modal-module-scss-module__LBAvQW__cropperContainer { background: #000; border-radius: 8px; width: 100%; height: 320px; position: relative; overflow: hidden; } .image-cropper-modal-module-scss-module__LBAvQW__cropper { background: #000; width: 100%; height: 100%; } .image-cropper-modal-module-scss-module__LBAvQW__cropperBackground { background: #000; } .image-cropper-modal-module-scss-module__LBAvQW__processingOverlay { z-index: 10; background: #000000b3; border-radius: 8px; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0; } .image-cropper-modal-module-scss-module__LBAvQW__spinner { border: 4px solid #ffffff4d; border-top-color: var(--color-white); border-radius: 50%; width: 40px; height: 40px; animation: .8s linear infinite image-cropper-modal-module-scss-module__LBAvQW__spin; } @keyframes image-cropper-modal-module-scss-module__LBAvQW__spin { to { transform: rotate(360deg); } } .image-cropper-modal-module-scss-module__LBAvQW__controlsSection { flex-direction: column; gap: 16px; display: flex; } .image-cropper-modal-module-scss-module__LBAvQW__sliderControl { flex-direction: column; gap: 6px; display: flex; } .image-cropper-modal-module-scss-module__LBAvQW__sliderLabel { color: var(--color-secondary-950); justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; display: flex; } .image-cropper-modal-module-scss-module__LBAvQW__sliderValue { color: var(--color-secondary-600); font-size: 14px; font-weight: 400; } .image-cropper-modal-module-scss-module__LBAvQW__slider { appearance: none; background: var(--color-secondary-200); cursor: pointer; width: 100%; height: 4px; accent-color: var(--color-primary-600); border-radius: 2px; outline: none; } .image-cropper-modal-module-scss-module__LBAvQW__slider:disabled { opacity: .5; cursor: not-allowed; } .image-cropper-modal-module-scss-module__LBAvQW__aspectRatioSection { flex-direction: column; gap: 12px; display: flex; } .image-cropper-modal-module-scss-module__LBAvQW__aspectRatioButtons { flex-wrap: wrap; gap: 8px; display: flex; } .image-cropper-modal-module-scss-module__LBAvQW__transformButtons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; display: grid; } .image-cropper-modal-module-scss-module__LBAvQW__aspectRatioButton, .image-cropper-modal-module-scss-module__LBAvQW__transformButton { border: 1px solid var(--color-secondary-200); background: var(--color-white); color: var(--color-secondary-600); cursor: pointer; border-radius: 6px; padding: 8px 16px; font-family: inherit; font-size: 14px; font-weight: 500; transition: all .2s; } .image-cropper-modal-module-scss-module__LBAvQW__aspectRatioButton:hover:not(:disabled), .image-cropper-modal-module-scss-module__LBAvQW__transformButton:hover:not(:disabled) { border-color: var(--color-primary-600); background: var(--color-primary-50); } .image-cropper-modal-module-scss-module__LBAvQW__aspectRatioButton:disabled, .image-cropper-modal-module-scss-module__LBAvQW__transformButton:disabled { opacity: .5; cursor: not-allowed; } .image-cropper-modal-module-scss-module__LBAvQW__aspectRatioButton.image-cropper-modal-module-scss-module__LBAvQW__active, .image-cropper-modal-module-scss-module__LBAvQW__active.image-cropper-modal-module-scss-module__LBAvQW__transformButton { border-color: var(--color-primary-600); background: var(--color-primary-600); color: var(--color-white); } .image-cropper-modal-module-scss-module__LBAvQW__transformButton { text-align: center; white-space: nowrap; justify-content: center; align-items: center; gap: 8px; min-height: 38px; display: inline-flex; } .image-cropper-modal-module-scss-module__LBAvQW__transformButton:active:not(:disabled) { transform: scale(.98); } .image-cropper-modal-module-scss-module__LBAvQW__orientationToggle { border: 1px solid var(--color-secondary-200); background: var(--color-white); color: var(--color-secondary-700); cursor: pointer; border-radius: 999px; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; transition: all .2s; display: inline-flex; } .image-cropper-modal-module-scss-module__LBAvQW__orientationToggle:hover:not(:disabled) { border-color: var(--color-primary-600); color: var(--color-primary-700); background: var(--color-primary-50); } .image-cropper-modal-module-scss-module__LBAvQW__orientationToggle:active:not(:disabled) { transform: scale(.98); } .image-cropper-modal-module-scss-module__LBAvQW__orientationToggle:disabled { opacity: .6; cursor: not-allowed; } .image-cropper-modal-module-scss-module__LBAvQW__footer { justify-content: space-between; align-items: center; gap: 12px; display: flex; } .image-cropper-modal-module-scss-module__LBAvQW__footerActions { gap: 12px; display: flex; } @media (max-width: 768px) { .image-cropper-modal-module-scss-module__LBAvQW__container { gap: 14px; padding: 14px; } .image-cropper-modal-module-scss-module__LBAvQW__cropperContainer { height: 260px; } .image-cropper-modal-module-scss-module__LBAvQW__footer { flex-direction: column; align-items: stretch; } .image-cropper-modal-module-scss-module__LBAvQW__footerActions { flex-wrap: wrap; justify-content: flex-end; width: 100%; } .image-cropper-modal-module-scss-module__LBAvQW__transformButtons { grid-template-columns: 1fr; } .image-cropper-modal-module-scss-module__LBAvQW__orientationToggle { margin-inline-start: auto; } } /* [project]/src/core/components/common/stat-card/stat-card.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .stat-card-module-scss-module__A6Bh6G__container { padding: var(--space-large-plus); border-radius: var(--radius-card-corner); border: 1px solid var(--color-border-default); background: var(--color-white); box-shadow: var(--shadow-md); flex-direction: column; display: flex; } .stat-card-module-scss-module__A6Bh6G__header { justify-content: space-between; align-items: center; gap: var(--space-large); margin-bottom: var(--space-xlarge); flex-direction: row; display: flex; } .stat-card-module-scss-module__A6Bh6G__title { font-family: var(--typeface-headings, Inter); font-size: var(--font-size-lg); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--fonts-body, #414651); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .stat-card-module-scss-module__A6Bh6G__value { font-family: var(--typeface-headings, Inter); font-size: var(--font-size-2xl); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); color: var(--fonts-headings, #25272c); } .stat-card-module-scss-module__A6Bh6G__iconBox.stat-card-module-scss-module__A6Bh6G__primary { padding: var(--space-medium); align-items: center; gap: var(--space-compact); border-radius: var(--radius-md); border: 1px solid var(--color-primary-200); background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%); color: var(--color-primary-600); flex-shrink: 0; display: flex; box-shadow: inset 0 0 6px #0000000a, 0 4px 8px #0000000a; } .stat-card-module-scss-module__A6Bh6G__iconBox.stat-card-module-scss-module__A6Bh6G__secondary { padding: var(--space-medium); align-items: center; gap: var(--space-compact); border-radius: var(--radius-md); border: 1px solid var(--color-secondary-200); background: linear-gradient(180deg, var(--color-secondary-50) 0%, var(--color-secondary-100) 100%); color: var(--color-secondary-700); flex-shrink: 0; display: flex; box-shadow: inset 0 0 6px #0000000a, 0 4px 8px #0000000a; } .stat-card-module-scss-module__A6Bh6G__iconBox.stat-card-module-scss-module__A6Bh6G__tertiary { padding: var(--space-medium); align-items: center; gap: var(--space-compact); border-radius: var(--radius-md); border: 1px solid var(--color-tertiary-200); background: linear-gradient(180deg, var(--color-tertiary-50) 0%, var(--color-tertiary-100) 100%); color: var(--color-tertiary-600); flex-shrink: 0; display: flex; box-shadow: inset 0 0 6px #0000000a, 0 4px 8px #0000000a; } .stat-card-module-scss-module__A6Bh6G__iconBox.stat-card-module-scss-module__A6Bh6G__warning { padding: var(--space-medium); align-items: center; gap: var(--space-compact); border-radius: var(--radius-md); border: 1px solid var(--color-warning-200); background: linear-gradient(180deg, var(--color-warning-50) 0%, var(--color-warning-100) 100%); color: var(--color-warning-700); flex-shrink: 0; display: flex; box-shadow: inset 0 0 6px #0000000a, 0 4px 8px #0000000a; } .stat-card-module-scss-module__A6Bh6G__content { align-items: center; gap: var(--space-small); flex-direction: row; display: flex; } .stat-card-module-scss-module__A6Bh6G__trendBadge.stat-card-module-scss-module__A6Bh6G__up { color: var(--color-success-700); align-items: center; gap: .5px; display: flex; } .stat-card-module-scss-module__A6Bh6G__trendBadge.stat-card-module-scss-module__A6Bh6G__down { color: var(--color-danger-700); align-items: center; gap: .5px; display: flex; } .stat-card-module-scss-module__A6Bh6G__trendIconCircle.stat-card-module-scss-module__A6Bh6G__up { padding: var(--space-tiny); background: var(--color-success-50); color: var(--color-success-700); justify-content: center; align-items: center; gap: var(--space-compact); border-radius: 1000px; display: flex; } .stat-card-module-scss-module__A6Bh6G__trendIconCircle.stat-card-module-scss-module__A6Bh6G__down { padding: var(--space-tiny); background: var(--color-danger-50); color: var(--color-danger-700); justify-content: center; align-items: center; gap: var(--space-compact); border-radius: 1000px; display: flex; } .stat-card-module-scss-module__A6Bh6G__trendValue { font-family: var(--typeface-headings, Inter); font-size: var(--font-size-lg); font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); } .stat-card-module-scss-module__A6Bh6G__trendValue.stat-card-module-scss-module__A6Bh6G__up { color: var(--color-palette-success-700, #1f7634); } .stat-card-module-scss-module__A6Bh6G__trendValue.stat-card-module-scss-module__A6Bh6G__down { color: var(--color-palette-danger-700, #c80d0d); } .stat-card-module-scss-module__A6Bh6G__overview { margin-top: var(--space-small); font-size: var(--font-size-sm); color: var(--color-font-disable); } /* [project]/src/core/components/common/calendar/calendar.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .calendar-module-scss-module__YnCkgW__container { inline-size: 320px; padding-block: var(--space-xlarge); padding-inline: var(--space-xlarge); gap: var(--space-xlarge); border-radius: var(--radius-lg); background-color: var(--color-white); flex-direction: column; display: flex; } .calendar-module-scss-module__YnCkgW__header { padding-block: var(--space-tiny); padding-inline: var(--space-tiny); border-radius: var(--radius-md); background-color: var(--color-secondary-50); justify-content: space-between; align-items: center; display: flex; } .calendar-module-scss-module__YnCkgW__headerLabel { font-family: var(--font-family-texts); letter-spacing: var(--letter-spacing-normal); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); color: var(--color-font-headings); } .calendar-module-scss-module__YnCkgW__headerLabel.calendar-module-scss-module__YnCkgW__clickable { cursor: pointer; -webkit-user-select: none; user-select: none; } .calendar-module-scss-module__YnCkgW__headerLabel.calendar-module-scss-module__YnCkgW__clickable:hover { opacity: .8; } .calendar-module-scss-module__YnCkgW__headerLabel.calendar-module-scss-module__YnCkgW__clickable:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: var(--radius-xs); } .calendar-module-scss-module__YnCkgW__navButton { border-radius: var(--radius-sm); cursor: pointer; block-size: 32px; inline-size: 32px; color: var(--color-font-links-labels); background-color: #0000; border: none; justify-content: center; align-items: center; transition: background-color .15s, color .15s; display: flex; } .calendar-module-scss-module__YnCkgW__navButton:hover { background-color: var(--color-secondary-100); color: var(--color-font-headings); } .calendar-module-scss-module__YnCkgW__navButton:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .calendar-module-scss-module__YnCkgW__navButton:hover { background-color: var(--color-white); } .calendar-module-scss-module__YnCkgW__daysRow { border-block-end: 1px solid var(--color-border-table); grid-template-columns: repeat(7, 1fr); gap: 0; padding-block-end: var(--space-small); display: grid; } .calendar-module-scss-module__YnCkgW__dayNameCell { font-family: var(--font-family-texts); letter-spacing: var(--letter-spacing-normal); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--color-font-links-labels); justify-content: center; align-items: center; min-block-size: 24px; min-inline-size: 32px; display: flex; } .calendar-module-scss-module__YnCkgW__datesGrid { grid-template-columns: repeat(7, 1fr); gap: 4px 0; display: grid; } .calendar-module-scss-module__YnCkgW__dateCell { font-family: var(--font-family-texts); letter-spacing: var(--letter-spacing-normal); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); color: var(--color-font-body); cursor: pointer; background-color: #0000; border: none; border-radius: 0; justify-content: center; align-items: center; block-size: 32px; inline-size: 100%; padding: 0; transition: background-color .15s, border-radius .15s; display: flex; } .calendar-module-scss-module__YnCkgW__dateCell:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .calendar-module-scss-module__YnCkgW__dateCell { min-width: 32px; min-height: 32px; } .calendar-module-scss-module__YnCkgW__dateCell:hover, .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__selected { border: 0 solid var(--border-table, #edeef1); background: var(--color-palette-secondary-100, #edeef1); border-radius: 8px; } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__selected { font-weight: var(--font-weight-medium); } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__otherMonth { color: var(--color-font-disable); } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__today { font-weight: var(--font-weight-semibold); color: var(--color-primary-800); } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__rangeStart, .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__rangeEnd, .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__inRange { background-color: var(--color-palette-secondary-100, #edeef1); color: var(--fonts-headings, #25272c); z-index: 1; border-radius: 0; block-size: 32px; position: relative; } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__rangeStart { border-start-start-radius: 8px; border-end-start-radius: 8px; } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__rangeEnd { border-start-end-radius: 8px; border-end-end-radius: 8px; } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__singleDayRange { background-color: var(--color-palette-secondary-100, #edeef1); color: var(--fonts-headings, #25272c); border-radius: 8px; block-size: 32px; } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__inRange:nth-child(7n), .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__rangeStart:nth-child(7n) { border-start-end-radius: 8px; border-end-end-radius: 8px; } .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__inRange:nth-child(7n+1), .calendar-module-scss-module__YnCkgW__dateCell.calendar-module-scss-module__YnCkgW__rangeEnd:nth-child(7n+1) { border-start-start-radius: 8px; border-end-start-radius: 8px; } .calendar-module-scss-module__YnCkgW__selectionGrid { gap: var(--space-small); flex-wrap: wrap; align-items: flex-start; inline-size: 100%; max-inline-size: 320px; display: flex; } .calendar-module-scss-module__YnCkgW__selectionItem { min-block-size: 32px; max-block-size: 32px; min-inline-size: 62px; max-inline-size: 62px; padding-block: var(--space-tiny); padding-inline: var(--space-small); border-radius: var(--radius-sm); background-color: var(--color-white); cursor: pointer; font-family: var(--font-family-texts); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-button); color: var(--color-secondary-700); border: none; justify-content: center; align-items: center; transition: background-color .15s; display: flex; } .calendar-module-scss-module__YnCkgW__selectionItem:hover, .calendar-module-scss-module__YnCkgW__selectionItem.calendar-module-scss-module__YnCkgW__selected { border: 0 solid var(--border-table, #edeef1); background: var(--color-palette-secondary-100, #edeef1); border-radius: 8px; justify-content: center; align-items: center; min-block-size: 32px; inline-size: 32px; min-inline-size: 32px; display: flex; } .calendar-module-scss-module__YnCkgW__selectionItem.calendar-module-scss-module__YnCkgW__selected { font-weight: var(--font-weight-medium); } .calendar-module-scss-module__YnCkgW__selectionItem:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* [project]/src/core/components/common/badge/badge.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .badge-module-scss-module__eaayhq__badge { border-radius: var(--radius-sm); font-weight: var(--font-weight-medium); text-align: center; white-space: nowrap; justify-content: center; align-items: center; transition: all .15s; display: inline-flex; } .badge-module-scss-module__eaayhq__sm { font-size: var(--font-size-xs); padding: 2px 6px; line-height: 1.2; } .badge-module-scss-module__eaayhq__md { font-size: var(--font-size-sm); padding: 4px 8px; line-height: 1.3; } .badge-module-scss-module__eaayhq__lg { font-size: var(--font-size-md); padding: 6px 12px; line-height: 1.4; } .badge-module-scss-module__eaayhq__success { background-color: var(--color-success-50); color: var(--color-success-600); border: 1px solid #28a74533; } .badge-module-scss-module__eaayhq__warning { background-color: var(--color-warning-50); color: var(--color-warning-600); border: 1px solid #f9a00733; } .badge-module-scss-module__eaayhq__error { background-color: var(--color-danger-50); color: var(--color-danger-600); border: 1px solid #ed151533; } .badge-module-scss-module__eaayhq__info { background-color: var(--color-primary-50); color: var(--color-primary-600); border: 1px solid #2b5be533; } .badge-module-scss-module__eaayhq__neutral { background-color: var(--color-secondary-100); color: var(--color-secondary-700); border: 1px solid var(--color-secondary-200); } /* [project]/src/core/components/common/card/card.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .card-module-scss-module__YYK-Oa__card { background-color: var(--color-white); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); flex-direction: column; display: flex; } .card-module-scss-module__YYK-Oa__header { padding: var(--space-medium) var(--space-large); border-bottom: 1px solid var(--color-border-subtle); } .card-module-scss-module__YYK-Oa__title { font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); color: var(--color-font-headings); margin: 0; } .card-module-scss-module__YYK-Oa__description { font-size: var(--font-size-small); color: var(--color-font-secondary); margin-top: var(--space-xsmall); } .card-module-scss-module__YYK-Oa__content { padding: var(--space-large); flex-grow: 1; } .card-module-scss-module__YYK-Oa__actions { padding: var(--space-medium) var(--space-large); border-top: 1px solid var(--color-border-subtle); justify-content: flex-end; gap: var(--space-medium); display: flex; } /* [project]/src/core/components/common/category-chips/category-chips.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .category-chips-module-scss-module__sbIPrW__categoryChipsContainer { justify-content: center; gap: var(--space-medium); flex-wrap: wrap; width: 100%; max-width: 900px; margin: 0 auto; display: flex; } .category-chips-module-scss-module__sbIPrW__chip { padding: var(--space-small) var(--space-xlarge); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background-color: var(--color-white); color: var(--color-font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-family-texts); cursor: pointer; outline: none; transition: all .3s; } .category-chips-module-scss-module__sbIPrW__chip:hover { border-color: var(--color-primary-600); background-color: var(--color-primary-50); color: var(--color-primary-600); transform: translateY(-2px); } .category-chips-module-scss-module__sbIPrW__chip:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .category-chips-module-scss-module__sbIPrW__chip:active { transform: translateY(0); } .category-chips-module-scss-module__sbIPrW__chipActive { border-color: var(--color-primary-600); background-color: var(--color-primary-600); color: var(--color-white); } .category-chips-module-scss-module__sbIPrW__chipActive:hover { background-color: var(--color-primary-700); border-color: var(--color-primary-700); color: var(--color-white); } /* [project]/src/core/components/common/collapse-card/collapse-card.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .collapse-card-module-scss-module__ISYqKW__collapseCard { border-radius: var(--border-radius-top-left, var(--radius-card-corner)) var(--border-radius-top-right, var(--radius-card-corner)) var(--border-radius-bottom-right, var(--radius-card-corner)) var(--border-radius-bottom-left, var(--radius-card-corner)); background: var(--color-white); width: 100%; position: relative; } .collapse-card-module-scss-module__ISYqKW__collapseCard.collapse-card-module-scss-module__ISYqKW__topBorder { border-top: 1px solid var(--color-border-default); } .collapse-card-module-scss-module__ISYqKW__collapseCard.collapse-card-module-scss-module__ISYqKW__bottomBorder { border-bottom: 1px solid var(--color-border-default); } .collapse-card-module-scss-module__ISYqKW__collapseCard.collapse-card-module-scss-module__ISYqKW__leftBorder { border-left: 1px solid var(--color-border-default); } .collapse-card-module-scss-module__ISYqKW__collapseCard.collapse-card-module-scss-module__ISYqKW__rightBorder { border-right: 1px solid var(--color-border-default); } .collapse-card-module-scss-module__ISYqKW__header { padding: var(--space-medium) var(--space-xlarge); cursor: pointer; -webkit-user-select: none; user-select: none; border-radius: var(--border-radius-top-left, var(--radius-card-corner)) var(--border-radius-top-right, var(--radius-card-corner)) var(--border-radius-bottom-right, var(--radius-card-corner)) var(--border-radius-bottom-left, var(--radius-card-corner)); justify-content: space-between; align-items: center; display: flex; } .collapse-card-module-scss-module__ISYqKW__header:hover { background-color: var(--color-secondary-50); } .collapse-card-module-scss-module__ISYqKW__header.collapse-card-module-scss-module__ISYqKW__headerBorder { border-bottom: 1px solid var(--color-border-default); border-radius: var(--border-radius-top-left, var(--radius-card-corner)) var(--border-radius-top-right, var(--radius-card-corner)) 0 0; } .collapse-card-module-scss-module__ISYqKW__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-font-headings); margin: 0; } .collapse-card-module-scss-module__ISYqKW__content { padding: var(--space-xlarge); gap: var(--space-large-plus); flex-direction: column; display: flex; } .collapse-card-module-scss-module__ISYqKW__content.collapse-card-module-scss-module__ISYqKW__hidden { display: none; } @media (max-width: 768px) { .collapse-card-module-scss-module__ISYqKW__content { gap: var(--space-large); } } /* [project]/src/core/components/common/collapsible-table/collapsible-table.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } @keyframes collapsible-table-module-scss-module__dLA-6W__rotate { 100% { transform: rotate(360deg); } } @keyframes collapsible-table-module-scss-module__dLA-6W__dash { 0% { stroke-dasharray: 1 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90 150; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 90 150; stroke-dashoffset: -124px; } } .collapsible-table-module-scss-module__dLA-6W__tableWrapper { background-color: var(--color-white); border-radius: var(--radius-card-corner); border: 1px solid var(--tabel-color-border-outside, var(--color-border-default)); width: 100%; box-shadow: var(--shadow-sm); overflow: visible; } .collapsible-table-module-scss-module__dLA-6W__tableContainer { width: 100%; overflow: visible; } .collapsible-table-module-scss-module__dLA-6W__tableContainer.collapsible-table-module-scss-module__dLA-6W__stickyHeader .collapsible-table-module-scss-module__dLA-6W__tableHeader { z-index: 10; background-color: var(--tabel-color-header-default, var(--color-secondary-50)); position: sticky; top: 0; } .collapsible-table-module-scss-module__dLA-6W__table { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: var(--font-size-sm); color: var(--color-font-body); font-family: var(--font-family-texts); } .collapsible-table-module-scss-module__dLA-6W__table.collapsible-table-module-scss-module__dLA-6W__bordered th, .collapsible-table-module-scss-module__dLA-6W__table.collapsible-table-module-scss-module__dLA-6W__bordered td { border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); } .collapsible-table-module-scss-module__dLA-6W__table.collapsible-table-module-scss-module__dLA-6W__bordered th:last-child, .collapsible-table-module-scss-module__dLA-6W__table.collapsible-table-module-scss-module__dLA-6W__bordered td:last-child { border-right: none; } .collapsible-table-module-scss-module__dLA-6W__table.collapsible-table-module-scss-module__dLA-6W__hover .collapsible-table-module-scss-module__dLA-6W__parentRow:hover { background-color: var(--tabel-color-row-hover, var(--color-secondary-50)); } .collapsible-table-module-scss-module__dLA-6W__table.collapsible-table-module-scss-module__dLA-6W__dense th, .collapsible-table-module-scss-module__dLA-6W__table.collapsible-table-module-scss-module__dLA-6W__dense td { padding: var(--space-small) var(--space-medium); } .collapsible-table-module-scss-module__dLA-6W__tableHeader { background-color: var(--tabel-color-header-default, var(--color-secondary-50)); border-bottom: 1px solid var(--tabel-color-header-border-default, var(--color-border-table)); } .collapsible-table-module-scss-module__dLA-6W__tableHeader th { padding: var(--tabel-size-header-cell-padding-top, var(--space-medium)) var(--tabel-size-header-cell-padding-right, var(--space-xlarge)); text-align: left; font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); color: var(--color-font-links-labels); white-space: normal; overflow-wrap: anywhere; border-right: 1px solid var(--tabel-color-header-border-default, var(--color-border-table)); height: var(--tabel-size-header-cell-min-height, 48px); vertical-align: middle; border-bottom: none; } .collapsible-table-module-scss-module__dLA-6W__tableHeader th:last-child { border-right: none; } .collapsible-table-module-scss-module__dLA-6W__headerCell { -webkit-user-select: none; user-select: none; position: relative; } .collapsible-table-module-scss-module__dLA-6W__headerCell.collapsible-table-module-scss-module__dLA-6W__sortable { cursor: pointer; } .collapsible-table-module-scss-module__dLA-6W__headerContent { align-items: flex-start; gap: var(--space-tiny); white-space: normal; flex-wrap: wrap; min-width: 0; display: flex; overflow: hidden; } .collapsible-table-module-scss-module__dLA-6W__sortIcon { margin-left: var(--space-tiny); opacity: .5; flex-shrink: 0; align-items: center; display: inline-flex; } .collapsible-table-module-scss-module__dLA-6W__sortIcon svg { width: 14px; height: 14px; color: var(--color-font-links-labels); transition: color .15s; } .collapsible-table-module-scss-module__dLA-6W__expandButton { color: var(--color-font-headings); flex-shrink: 0; margin-inline-start: auto; box-shadow: none !important; background: none !important; border: none !important; } .collapsible-table-module-scss-module__dLA-6W__expandButton:hover { background: none !important; } .collapsible-table-module-scss-module__dLA-6W__parentRow { border-bottom: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); background-color: var(--tabel-color-row-default, #fff0); height: var(--tabel-size-row-cell-min-height, 64px); cursor: pointer; transition: background-color .15s; } .collapsible-table-module-scss-module__dLA-6W__parentRow.collapsible-table-module-scss-module__dLA-6W__expanded { background-color: #0000; border-bottom-color: #0000; } .collapsible-table-module-scss-module__dLA-6W__parentRow.collapsible-table-module-scss-module__dLA-6W__selected { background-color: var(--tabel-color-row-selected, var(--color-secondary-50)); } .collapsible-table-module-scss-module__dLA-6W__parentRow:last-child:not(.collapsible-table-module-scss-module__dLA-6W__expanded) { border-bottom: none; } .collapsible-table-module-scss-module__dLA-6W__tableCell { padding: var(--tabel-size-row-cell-padding-top, var(--space-medium)) var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); vertical-align: middle; border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); height: var(--tabel-size-row-cell-min-height, 64px); overflow-wrap: anywhere; } .collapsible-table-module-scss-module__dLA-6W__tableCell:last-child { border-right: none; } .collapsible-table-module-scss-module__dLA-6W__cellContent { width: 100%; min-width: 0; min-height: 20px; color: inherit; white-space: normal; flex-wrap: wrap; justify-content: flex-start; align-items: center; display: flex; } .collapsible-table-module-scss-module__dLA-6W__childrenContainer { background-color: var(--color-secondary-50); } .collapsible-table-module-scss-module__dLA-6W__childrenInner { padding: 0; } .collapsible-table-module-scss-module__dLA-6W__childrenTable { border-collapse: collapse; table-layout: fixed; width: 100%; color: var(--color-font-body); font-size: 14px; font-family: var(--font-family-texts); } .collapsible-table-module-scss-module__dLA-6W__childrenHeader { background-color: #00000008; } .collapsible-table-module-scss-module__dLA-6W__childrenHeader th { padding: var(--space-micro) var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); text-align: left; font-weight: var(--font-weight-regular); color: var(--color-font-links-labels); white-space: normal; overflow-wrap: anywhere; border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); border-bottom: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); vertical-align: middle; text-transform: uppercase; letter-spacing: .03em; height: 24px; font-size: 11px; } .collapsible-table-module-scss-module__dLA-6W__childrenHeader th:last-child { border-right: none; } .collapsible-table-module-scss-module__dLA-6W__childRow { border-bottom: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); background-color: #0000; height: 32px; transition: background-color .15s; } .collapsible-table-module-scss-module__dLA-6W__childRow:hover { background-color: #00000005; } .collapsible-table-module-scss-module__dLA-6W__childRow:last-child { border-bottom: none; } .collapsible-table-module-scss-module__dLA-6W__childCell { padding: var(--space-micro) var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); vertical-align: middle; border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)); overflow-wrap: anywhere; height: 40px; font-size: 14px; } .collapsible-table-module-scss-module__dLA-6W__childCell:last-child { border-right: none; } .collapsible-table-module-scss-module__dLA-6W__childCellContent { width: 100%; min-width: 0; min-height: 14px; color: inherit; white-space: normal; flex-wrap: wrap; justify-content: flex-start; align-items: center; display: flex; } .collapsible-table-module-scss-module__dLA-6W__childrenDivider { border-bottom: 1px solid var(--color-border-table); } .collapsible-table-module-scss-module__dLA-6W__variantIndicator { align-items: center; gap: var(--space-small); font-size: var(--font-size-xs); color: var(--color-font-links-labels); padding: var(--space-small) var(--space-xlarge); font-weight: var(--font-weight-medium); display: flex; } .collapsible-table-module-scss-module__dLA-6W__checkboxCell { width: auto; max-width: var(--tabel-size-column-width-checkbox, 64px); border: 0 solid var(--tabel-color-row-border-default, var(--color-border-table)); vertical-align: middle; padding: 0; border-right: 1px solid var(--tabel-color-row-border-default, var(--color-border-table)) !important; } .collapsible-table-module-scss-module__dLA-6W__checkboxCellContent { width: 100%; height: 100%; padding: var(--tabel-size-row-cell-padding-right, var(--space-xlarge)); justify-content: center; align-items: center; gap: var(--space-tiny); display: flex; } .collapsible-table-module-scss-module__dLA-6W__actionCell { padding: var(--space-small) var(--space-medium); text-align: center; white-space: nowrap; } .collapsible-table-module-scss-module__dLA-6W__actionButtons { justify-content: center; align-items: center; gap: var(--space-small); display: flex; } .collapsible-table-module-scss-module__dLA-6W__editButton { background: var(--color-white) !important; border: 1px solid var(--color-border-default) !important; border-radius: var(--radius-md) !important; } .collapsible-table-module-scss-module__dLA-6W__editButton:hover { background: var(--color-secondary-50) !important; } .collapsible-table-module-scss-module__dLA-6W__editButton svg { color: var(--color-font-links-labels) !important; } .collapsible-table-module-scss-module__dLA-6W__deleteButton { background: var(--color-white) !important; border: 1px solid var(--color-border-default) !important; border-radius: var(--radius-md) !important; } .collapsible-table-module-scss-module__dLA-6W__deleteButton svg { transition: color .15s; color: var(--color-font-links-labels) !important; } .collapsible-table-module-scss-module__dLA-6W__deleteButton:hover { background: var(--color-secondary-50) !important; } .collapsible-table-module-scss-module__dLA-6W__deleteButton:hover svg { color: var(--color-danger-600) !important; } .collapsible-table-module-scss-module__dLA-6W__loadingContainer { padding: var(--space-enormous) var(--space-xxlarge); color: var(--color-font-links-labels); flex-direction: column; justify-content: center; align-items: center; display: flex; } .collapsible-table-module-scss-module__dLA-6W__loadingContainer span { margin-top: var(--space-large); font-size: var(--font-size-sm); } .collapsible-table-module-scss-module__dLA-6W__spinner { width: 40px; height: 40px; } .collapsible-table-module-scss-module__dLA-6W__spinnerIcon { animation: 1.4s linear infinite collapsible-table-module-scss-module__dLA-6W__rotate; } .collapsible-table-module-scss-module__dLA-6W__spinnerPath { stroke: var(--color-primary-600); stroke-linecap: round; animation: 1.4s ease-in-out infinite collapsible-table-module-scss-module__dLA-6W__dash; } .collapsible-table-module-scss-module__dLA-6W__emptyContainer { padding: var(--space-enormous) var(--space-xxlarge); flex-direction: column; justify-content: center; align-items: center; display: flex; } .collapsible-table-module-scss-module__dLA-6W__emptyIcon { margin-bottom: var(--space-large); opacity: .5; } .collapsible-table-module-scss-module__dLA-6W__emptyMessage { font-size: var(--font-size-md); color: var(--color-font-links-labels); text-align: center; } .collapsible-table-module-scss-module__dLA-6W__pagination { z-index: 10; position: relative; overflow: visible; } @media (max-width: 768px) { .collapsible-table-module-scss-module__dLA-6W__table { font-size: var(--font-size-xs); } .collapsible-table-module-scss-module__dLA-6W__tableHeader th { padding: var(--space-small) var(--space-medium); font-size: 11px; } .collapsible-table-module-scss-module__dLA-6W__tableCell { padding: var(--space-small) var(--space-medium); } .collapsible-table-module-scss-module__dLA-6W__childCell { padding: var(--space-tiny) var(--space-small); } .collapsible-table-module-scss-module__dLA-6W__childrenInner { padding: 0; } } /* [project]/src/core/components/common/combobox/Combobox.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .Combobox-module-scss-module__VaI_7q__container { flex-direction: column; width: fit-content; display: flex; position: relative; } .Combobox-module-scss-module__VaI_7q__container.Combobox-module-scss-module__VaI_7q__fullWidth { width: 100%; } .Combobox-module-scss-module__VaI_7q__labelWrapper { align-items: center; gap: var(--space-tiny); margin-bottom: var(--space-tiny); display: inline-flex; } .Combobox-module-scss-module__VaI_7q__label { color: var(--color-font-links-labels); font-family: var(--font-family-labels); font-size: var(--font-size-sm); cursor: default; cursor: pointer; font-weight: 400; line-height: 14px; } .Combobox-module-scss-module__VaI_7q__labelIcon { width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .Combobox-module-scss-module__VaI_7q__labelIcon svg { width: 16px; height: 16px; } .Combobox-module-scss-module__VaI_7q__labelIcon { cursor: pointer; transition: opacity .2s; } .Combobox-module-scss-module__VaI_7q__labelIcon:hover { opacity: .7; } .Combobox-module-scss-module__VaI_7q__labelIcon { justify-content: center; align-items: center; display: inline-flex; } .Combobox-module-scss-module__VaI_7q__inputWrapper { align-items: center; gap: var(--space-small); cursor: text; transition: border-color .15s, box-shadow .15s, background-color .15s; display: flex; } .Combobox-module-scss-module__VaI_7q__inputWrapper:focus-within:not(.Combobox-module-scss-module__VaI_7q__disabled):not(.Combobox-module-scss-module__VaI_7q__error):not(.Combobox-module-scss-module__VaI_7q__success) { border-radius: var(--spacing-space-small, 8px); border: 1px solid var(--color-primary-300, #96c0fa); background: #fff; outline: none; box-shadow: 0 8px 16px #96c0fa1f; } .Combobox-module-scss-module__VaI_7q__inputWrapper.Combobox-module-scss-module__VaI_7q__disabled { opacity: .6; cursor: not-allowed; background: var(--color-secondary-50); pointer-events: none; } .Combobox-module-scss-module__VaI_7q__inputWrapper.Combobox-module-scss-module__VaI_7q__error, .Combobox-module-scss-module__VaI_7q__inputWrapper.Combobox-module-scss-module__VaI_7q__error:focus-within { border: 1px solid var(--color-danger-300); box-shadow: 0 8px 16px #ff9d9d1f; } .Combobox-module-scss-module__VaI_7q__inputWrapper.Combobox-module-scss-module__VaI_7q__success, .Combobox-module-scss-module__VaI_7q__inputWrapper.Combobox-module-scss-module__VaI_7q__success:focus-within { border: 1px solid var(--color-success-300); box-shadow: 0 8px 16px #90e5a31f; } .Combobox-module-scss-module__VaI_7q__sizeSmall { min-height: 40px; padding: var(--space-compact) var(--space-small); align-items: center; gap: var(--space-small); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: #fff; display: flex; } .Combobox-module-scss-module__VaI_7q__sizeMedium { min-height: 44px; padding: var(--space-medium) var(--space-compact); align-items: center; gap: var(--space-small); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: #fff; display: flex; } .Combobox-module-scss-module__VaI_7q__sizeLarge { min-height: 48px; padding: var(--space-medium) var(--space-medium); } .Combobox-module-scss-module__VaI_7q__input { font-family: var(--font-family-texts); background: none; border: none; outline: none; flex: 1; width: 100%; min-width: 0; } .Combobox-module-scss-module__VaI_7q__input:disabled { cursor: not-allowed; } .Combobox-module-scss-module__VaI_7q__input { color: var(--color-font-headings); } .Combobox-module-scss-module__VaI_7q__input:focus { outline: none; } .Combobox-module-scss-module__VaI_7q__input::placeholder { color: var(--color-font-disable); } .Combobox-module-scss-module__VaI_7q__input:disabled { color: var(--color-font-disable); cursor: not-allowed; } .Combobox-module-scss-module__VaI_7q__startAdornment, .Combobox-module-scss-module__VaI_7q__endAdornment { color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .Combobox-module-scss-module__VaI_7q__clearButton { width: 16px; height: 16px; color: var(--color-font-links-labels); flex-shrink: 0; justify-content: center; align-items: center; display: flex; } .Combobox-module-scss-module__VaI_7q__clearButton svg { width: 16px; height: 16px; } .Combobox-module-scss-module__VaI_7q__clearButton { cursor: pointer; transition: opacity .2s; } .Combobox-module-scss-module__VaI_7q__clearButton:hover { opacity: .7; } .Combobox-module-scss-module__VaI_7q__clearButton { font-size: 14px; } .Combobox-module-scss-module__VaI_7q__clearButton:hover { color: var(--color-danger-600); } .Combobox-module-scss-module__VaI_7q__loadingSpinner { border: 2px solid var(--color-secondary-200); border-top-color: var(--color-primary-600); border-radius: 50%; width: 16px; height: 16px; animation: .8s linear infinite Combobox-module-scss-module__VaI_7q__spin; } @keyframes Combobox-module-scss-module__VaI_7q__spin { to { transform: rotate(360deg); } } .Combobox-module-scss-module__VaI_7q__chevron { color: var(--color-font-links-labels); justify-content: center; align-items: center; transition: transform .2s; display: flex; } .Combobox-module-scss-module__VaI_7q__chevron.Combobox-module-scss-module__VaI_7q__open { transform: rotate(180deg); } .Combobox-module-scss-module__VaI_7q__menu { top: calc(100% + var(--space-tiny)); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); width: 100%; max-height: 250px; box-shadow: var(--shadow-lg); z-index: 1000; padding: var(--space-tiny); background: #fff; flex-direction: column; gap: 2px; display: flex; position: absolute; left: 0; overflow-y: auto; } .Combobox-module-scss-module__VaI_7q__option { align-items: center; gap: var(--space-tiny, 4px); border-radius: var(--button-radius, 8px); background: var(--button-secondary-bg-default); color: var(--button-secondary-font-default); cursor: pointer; font-family: var(--font-family-buttons); font-weight: var(--font-weight-medium); border: 1px solid #0000; align-self: stretch; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; display: flex; } .Combobox-module-scss-module__VaI_7q__option:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } .Combobox-module-scss-module__VaI_7q__option { cursor: pointer; } .Combobox-module-scss-module__VaI_7q__option:hover:not(.Combobox-module-scss-module__VaI_7q__disabled):not(.Combobox-module-scss-module__VaI_7q__selected), .Combobox-module-scss-module__VaI_7q__option.Combobox-module-scss-module__VaI_7q__focused { background: var(--button-secondary-bg-hover); color: var(--button-secondary-font-hover); } .Combobox-module-scss-module__VaI_7q__option.Combobox-module-scss-module__VaI_7q__selected { background: var(--button-secondary-bg-focused); color: var(--button-secondary-font-focused); } .Combobox-module-scss-module__VaI_7q__option.Combobox-module-scss-module__VaI_7q__disabled { opacity: .5; cursor: not-allowed; } .Combobox-module-scss-module__VaI_7q__noOptions { padding: var(--space-medium); text-align: center; color: var(--color-font-disable); font-size: var(--font-size-sm); } .Combobox-module-scss-module__VaI_7q__helperText { margin-top: var(--space-tiny); font-size: var(--font-size-xs); line-height: 14px; font-family: var(--font-family-texts); } .Combobox-module-scss-module__VaI_7q__helperText.Combobox-module-scss-module__VaI_7q__error { color: var(--color-danger-600); } .Combobox-module-scss-module__VaI_7q__helperText.Combobox-module-scss-module__VaI_7q__success { color: var(--color-success-600); } /* [project]/src/core/components/common/font-family-selector/font-family-selector.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .font-family-selector-module-scss-module__ker39G__container { font-family: var(--font-family-texts); flex-direction: column; gap: 12px; display: flex; } .font-family-selector-module-scss-module__ker39G__fullWidth { width: 100%; } /* [project]/src/core/components/common/pagination/pagination.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .pagination-module-scss-module__ABzxBa__paginationContainer { justify-content: center; align-items: center; gap: var(--space-large); padding: var(--space-xlarge) 0; margin: 0 auto; display: flex; } .pagination-module-scss-module__ABzxBa__paginationButton { padding: var(--space-medium) var(--space-xlarge); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background-color: var(--color-white); color: var(--color-font-headings); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-family-texts); cursor: pointer; outline: none; transition: all .3s; } .pagination-module-scss-module__ABzxBa__paginationButton:hover:not(:disabled) { border-color: var(--color-primary-600); background-color: var(--color-primary-50); color: var(--color-primary-600); } .pagination-module-scss-module__ABzxBa__paginationButton:disabled { opacity: .5; cursor: not-allowed; } .pagination-module-scss-module__ABzxBa__paginationButton:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .pagination-module-scss-module__ABzxBa__pageNumbers { align-items: center; gap: var(--space-small); display: flex; } .pagination-module-scss-module__ABzxBa__pageButton { min-width: 40px; height: 40px; padding: var(--space-small) var(--space-medium); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background-color: var(--color-white); color: var(--color-font-headings); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-family: var(--font-family-texts); cursor: pointer; outline: none; transition: all .3s; } .pagination-module-scss-module__ABzxBa__pageButton:hover { border-color: var(--color-primary-600); background-color: var(--color-primary-50); color: var(--color-primary-600); transform: translateY(-2px); } .pagination-module-scss-module__ABzxBa__pageButton:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .pagination-module-scss-module__ABzxBa__pageButtonActive { border-color: var(--color-primary-600); background-color: var(--color-primary-600); color: var(--color-white); } .pagination-module-scss-module__ABzxBa__pageButtonActive:hover { background-color: var(--color-primary-500); border-color: var(--color-primary-500); color: var(--color-white); } .pagination-module-scss-module__ABzxBa__ellipsis { padding: var(--space-small); color: var(--color-font-disable); font-size: var(--font-size-sm); -webkit-user-select: none; user-select: none; } @media (max-width: 640px) { .pagination-module-scss-module__ABzxBa__paginationContainer { gap: var(--space-small); } .pagination-module-scss-module__ABzxBa__paginationButton { padding: var(--space-small) var(--space-large); font-size: var(--font-size-xs); } .pagination-module-scss-module__ABzxBa__pageButton { min-width: 36px; height: 36px; padding: var(--space-tiny) var(--space-small); font-size: var(--font-size-xs); } } /* [project]/src/core/components/common/search-bar/search-bar.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .search-bar-module-scss-module__J3Ow8G__searchBarContainer { flex-direction: column; width: 100%; display: flex; } .search-bar-module-scss-module__J3Ow8G__searchLabel { align-items: center; gap: var(--space-tiny); margin-bottom: var(--space-tiny); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-font-headings); font-family: var(--font-family-texts); display: inline-flex; } .search-bar-module-scss-module__J3Ow8G__searchInput { width: 100%; max-width: 600px; padding: var(--space-medium) var(--space-large); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); font-size: var(--font-size-md); font-family: var(--font-family-texts); color: var(--color-font-headings); background-color: var(--color-white); outline: none; transition: box-shadow .3s, border-color .3s; } .search-bar-module-scss-module__J3Ow8G__searchInput::placeholder { color: var(--color-font-disable); } .search-bar-module-scss-module__J3Ow8G__searchInput:focus { border-color: var(--color-border-active); box-shadow: 0 0 0 3px #2b5be51a,var(--shadow-lg); } .search-bar-module-scss-module__J3Ow8G__searchInput:hover:not(:focus) { border-color: var(--color-secondary-300); } @media (max-width: 768px) { .search-bar-module-scss-module__J3Ow8G__searchInput { max-width: 100%; } } /* [project]/src/core/components/common/select-card/select-card.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .select-card-module-scss-module__I2BdaG__card { gap: var(--space-medium); padding: var(--space-medium); border-radius: var(--radius-card-corner); border: 1px solid var(--color-border-table); background: var(--color-white); cursor: pointer; box-sizing: border-box; flex-direction: column; width: 100%; max-width: 380px; transition: all .2s ease-in-out; display: flex; } .select-card-module-scss-module__I2BdaG__card:hover { background: linear-gradient(125.09deg, var(--color-white) 29.893%, var(--color-primary-100) 100%); border-color: var(--color-border-default); box-shadow: var(--shadow-md); } .select-card-module-scss-module__I2BdaG__card:hover .select-card-module-scss-module__I2BdaG__action .select-card-module-scss-module__I2BdaG__actionText { color: var(--color-font-headings); } .select-card-module-scss-module__I2BdaG__card:focus { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .select-card-module-scss-module__I2BdaG__card:active { transform: scale(.98); } .select-card-module-scss-module__I2BdaG__iconContainer { border: 1px solid var(--color-primary-200); background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-primary-100) 100%); width: 50px; height: 50px; box-shadow: var(--shadow-md),inset 0px 0px 6px 0px #0000000a; border-radius: 12px; flex-shrink: 0; justify-content: center; align-items: center; padding: 13px; display: flex; } .select-card-module-scss-module__I2BdaG__iconContainer svg { width: 24px; height: 24px; color: var(--color-primary-600); } .select-card-module-scss-module__I2BdaG__iconContainer span { color: var(--color-text-secondary); font-size: 14px; font-weight: 400; line-height: 24px; } .select-card-module-scss-module__I2BdaG__primary .select-card-module-scss-module__I2BdaG__iconContainer { background: linear-gradient(#f0f5fe 0%, #dce8fd 100%); border-color: #c1d8fc; } .select-card-module-scss-module__I2BdaG__primary .select-card-module-scss-module__I2BdaG__iconContainer svg { color: #2e90fa; } .select-card-module-scss-module__I2BdaG__warning .select-card-module-scss-module__I2BdaG__iconContainer { background: linear-gradient(#fffbeb 0%, #fff4c6 100%); border-color: #ffe680; } .select-card-module-scss-module__I2BdaG__warning .select-card-module-scss-module__I2BdaG__iconContainer svg { color: #f79009; } .select-card-module-scss-module__I2BdaG__success .select-card-module-scss-module__I2BdaG__iconContainer { background: linear-gradient(#f1fcf2 0%, #dff9e4 100%); border-color: #c1f1cb; } .select-card-module-scss-module__I2BdaG__success .select-card-module-scss-module__I2BdaG__iconContainer svg { color: #12b76a; } .select-card-module-scss-module__I2BdaG__content { gap: var(--space-tiny); flex-direction: column; width: 100%; display: flex; } .select-card-module-scss-module__I2BdaG__title { text-transform: none; color: var(--color-font-headings); white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: Inter, sans-serif; font-size: 1.25rem; font-style: normal; font-weight: 500; line-height: 160%; text-decoration: none; } .select-card-module-scss-module__I2BdaG__description { text-transform: none; color: var(--color-font-links-labels); white-space: pre-wrap; word-wrap: break-word; margin: 0; font-family: Inter, sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 150%; text-decoration: none; } .select-card-module-scss-module__I2BdaG__action { align-items: center; gap: var(--space-tiny); padding: var(--space-tiny) var(--space-small); border-radius: 8px; transition: all .2s ease-in-out; display: flex; } .select-card-module-scss-module__I2BdaG__actionText { text-transform: none; color: var(--color-font-links-labels); text-transform: lowercase; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 24px; text-decoration: none; transition: color .2s ease-in-out; } [dir="rtl"] .select-card-module-scss-module__I2BdaG__action { flex-direction: row-reverse; } [dir="rtl"] .select-card-module-scss-module__I2BdaG__card { text-align: right; } @media (max-width: 768px) { .select-card-module-scss-module__I2BdaG__card { width: 100%; max-width: 380px; } } /* [project]/src/core/components/common/skeleton/skeleton.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .skeleton-module-scss-module__b4iuOq__skeleton { background: linear-gradient(90deg, var(--color-secondary-100) 25%, var(--color-secondary-50) 50%, var(--color-secondary-100) 75%); border-radius: var(--radius-sm); background-size: 200% 100%; animation: 1.4s ease-in-out infinite skeleton-module-scss-module__b4iuOq__shimmer; } .skeleton-module-scss-module__b4iuOq__text { border-radius: var(--radius-sm); height: 1rem; } .skeleton-module-scss-module__b4iuOq__circular { border-radius: 50%; } @keyframes skeleton-module-scss-module__b4iuOq__shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* [project]/src/core/components/common/tabs/tabs.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .tabs-module-scss-module__1BL1Oa__tabs { gap: var(--space-small); margin-bottom: var(--space-medium); display: flex; } .tabs-module-scss-module__1BL1Oa__tab { padding: var(--space-medium) var(--space-large); cursor: pointer; align-items: center; gap: var(--space-small); border-radius: var(--radius-md); color: var(--color-font-secondary); font-weight: var(--font-weight-medium); transition: all .2s ease-in-out; display: flex; } .tabs-module-scss-module__1BL1Oa__tab:hover { color: var(--color-font-primary); background-color: var(--color-secondary-100); } .tabs-module-scss-module__1BL1Oa__active { color: var(--color-primary-600); background-color: var(--color-primary-50); } .tabs-module-scss-module__1BL1Oa__active:hover { color: var(--color-primary-700); background-color: var(--color-primary-100); } .tabs-module-scss-module__1BL1Oa__icon { font-size: var(--font-size-large); } /* [project]/src/core/components/common/template-card/template-card.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .template-card-module-scss-module__0i69KW__templateCard { background-color: var(--color-white); border: none; border-radius: 1rem; flex-direction: column; height: 100%; transition: transform .3s, box-shadow .3s; display: flex; overflow: hidden; box-shadow: 0 2px 8px #00000014; } .template-card-module-scss-module__0i69KW__templateCard:hover { transform: translateY(-4px); box-shadow: 0 8px 24px #0000001f; } .template-card-module-scss-module__0i69KW__templateCard:hover .template-card-module-scss-module__0i69KW__templateImage { transform: translateY(-40%); } .template-card-module-scss-module__0i69KW__imageContainer { background-color: var(--color-secondary-100); border-radius: 1rem 1rem 0 0; width: 100%; height: 280px; position: relative; overflow: hidden; } .template-card-module-scss-module__0i69KW__imageContainer:hover .template-card-module-scss-module__0i69KW__imageOverlay { opacity: 1; visibility: visible; } .template-card-module-scss-module__0i69KW__imageContainer:hover .template-card-module-scss-module__0i69KW__previewButton { opacity: 1; transform: translate(-50%, -50%)scale(1); } .template-card-module-scss-module__0i69KW__templateImage { object-fit: cover; object-position: top; will-change: transform; width: 100%; height: auto; transition: transform 2s ease-in-out; display: block; } .template-card-module-scss-module__0i69KW__imageOverlay { opacity: 0; visibility: hidden; z-index: 2; background: linear-gradient(#0000 0%, #0000001a 40%, #00000080 100%); justify-content: center; align-items: center; width: 100%; height: 100%; transition: opacity .3s ease-in-out, visibility .3s ease-in-out; display: flex; position: absolute; top: 0; left: 0; } .template-card-module-scss-module__0i69KW__previewButton { opacity: 0; color: var(--color-font-headings); font-size: .9rem; font-weight: var(--font-weight-medium); font-family: var(--font-family-texts); cursor: pointer; white-space: nowrap; z-index: 3; background-color: #eff6fff2; border: none; border-radius: .6rem; align-items: center; gap: .5rem; padding: .75rem 1.5rem; transition: all .3s ease-in-out; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)scale(.9); box-shadow: 0 4px 12px #00000026; } .template-card-module-scss-module__0i69KW__previewButton:hover { background-color: #dbeafefa; transform: translate(-50%, -50%)scale(1.05); box-shadow: 0 6px 16px #0003; } .template-card-module-scss-module__0i69KW__previewButton:active { transform: translate(-50%, -50%)scale(1); } .template-card-module-scss-module__0i69KW__previewButton:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .template-card-module-scss-module__0i69KW__eyeIcon { flex-shrink: 0; } .template-card-module-scss-module__0i69KW__cardContent { flex-direction: column; flex-grow: 1; gap: .75rem; padding: 1.2rem; display: flex; } .template-card-module-scss-module__0i69KW__cardTitle { font-size: 1.1rem; font-weight: var(--font-weight-bold); color: var(--color-font-headings); line-height: var(--line-height-tight); margin: 0; } .template-card-module-scss-module__0i69KW__cardDescription { color: var(--color-font-body); -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; -webkit-box-orient: vertical; flex-grow: 1; margin: 0; font-size: .9rem; line-height: 1.4; display: -webkit-box; overflow: hidden; } .template-card-module-scss-module__0i69KW__cardCategories { flex-wrap: wrap; gap: .5rem; margin: 0; display: flex; } .template-card-module-scss-module__0i69KW__categoryBadge { font-size: .75rem; font-weight: var(--font-weight-medium); text-transform: capitalize; cursor: default; color: #2563eb; background-color: #3b82f60f; border: 1.5px solid #3b82f64d; border-radius: .375rem; align-items: center; padding: .25rem .65rem; transition: all .3s; display: inline-flex; } .template-card-module-scss-module__0i69KW__categoryBadge:hover { border-color: #3b82f680; transform: scale(1.05); box-shadow: 0 2px 8px #00000014; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="bold"] { color: #dc2626; background-color: #ef444414; border: 1.5px solid #ef44444d; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="bold"]:hover { border-color: #ef444480; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="classic"] { color: #7c3aed; background-color: #8b5cf614; border: 1.5px solid #8b5cf64d; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="classic"]:hover { border-color: #8b5cf680; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="creative"] { color: #db2777; background-color: #ec489914; border: 1.5px solid #ec48994d; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="creative"]:hover { border-color: #ec489980; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="elegant"] { color: #d97706; background-color: #d9770614; border: 1.5px solid #d977064d; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="elegant"]:hover { border-color: #d9770680; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="minimal"] { color: #4b5563; background-color: #6b728014; border: 1.5px solid #6b72804d; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="minimal"]:hover { border-color: #6b728080; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="modern"] { color: #2563eb; background-color: #3b82f614; border: 1.5px solid #3b82f64d; } .template-card-module-scss-module__0i69KW__categoryBadge[data-category="modern"]:hover { border-color: #3b82f680; } .template-card-module-scss-module__0i69KW__useButton { border-radius: var(--radius-md); background-color: var(--color-primary-600); width: 100%; color: var(--color-white); font-size: .9rem; font-weight: var(--font-weight-medium); font-family: var(--font-family-texts); cursor: pointer; border: none; outline: none; margin-top: 1rem; padding: .75rem 1.5rem; transition: background-color .3s, transform .15s; } .template-card-module-scss-module__0i69KW__useButton:hover { background-color: var(--color-primary-500); transform: translateY(-1px); } .template-card-module-scss-module__0i69KW__useButton:active { transform: translateY(0); } .template-card-module-scss-module__0i69KW__useButton:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; } .template-card-module-scss-module__0i69KW__useButton:disabled { color: #e5e7eb; cursor: not-allowed; opacity: .6; background-color: #6b7280; transform: none; } .template-card-module-scss-module__0i69KW__useButton:disabled:hover { background-color: #6b7280; transform: none; } .template-card-module-scss-module__0i69KW__useButton:disabled:active { transform: none; } .template-card-module-scss-module__0i69KW__currentBadge { text-align: center; font-size: .78rem; font-weight: var(--font-weight-medium); color: var(--color-primary-600); margin-top: 1rem; padding: .35rem 0; display: block; } .template-card-module-scss-module__0i69KW__changeColorButton { color: var(--color-primary-600); border: 1.5px solid var(--color-primary-600); background-color: #0000; } .template-card-module-scss-module__0i69KW__changeColorButton:hover { background-color: var(--color-primary-50, #3b82f60f); transform: translateY(-1px); } .template-card-module-scss-module__0i69KW__dashboardCard { border: 1px solid var(--color-secondary-200); background-color: var(--color-white); box-shadow: 0 10px 25px #0f172a14; } .template-card-module-scss-module__0i69KW__dashboardCard:hover { box-shadow: 0 18px 30px #0f172a1f; } /* [project]/src/core/components/common/template-grid/template-grid.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .template-grid-module-scss-module__xiZh0a__templateGrid { width: 100%; max-width: 1400px; padding: 0 var(--space-large); grid-template-columns: 1fr; gap: 2rem; margin: 0 auto; display: grid; } @media (min-width: 768px) and (max-width: 1199px) { .template-grid-module-scss-module__xiZh0a__templateGrid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (min-width: 1200px) { .template-grid-module-scss-module__xiZh0a__templateGrid { padding: 0 var(--space-xlarge); grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .template-grid-module-scss-module__xiZh0a__dashboardLayout { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); width: 100%; max-width: 1200px; padding: 0; } @media (max-width: 767px) { .template-grid-module-scss-module__xiZh0a__dashboardLayout { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 1199px) { .template-grid-module-scss-module__xiZh0a__dashboardLayout { grid-template-columns: repeat(2, minmax(280px, 1fr)); } } .template-grid-module-scss-module__xiZh0a__emptyState { justify-content: center; align-items: center; width: 100%; min-height: 300px; display: flex; } .template-grid-module-scss-module__xiZh0a__emptyMessage { font-size: var(--font-size-lg); color: var(--color-font-disable); text-align: center; } /* [project]/src/core/components/common/variants-table/variants-table.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .variants-table-module-scss-module__oUnONG__container { background: var(--color-white); border: 1px solid var(--color-border-default); border-radius: var(--radius-card-corner); width: 100%; box-shadow: var(--shadow-md); overflow: hidden; } .variants-table-module-scss-module__oUnONG__table { border-collapse: collapse; width: 100%; } .variants-table-module-scss-module__oUnONG__headerRow { background: var(--color-secondary-50); } .variants-table-module-scss-module__oUnONG__headerCell { padding: var(--space-medium) var(--space-large); border-bottom: 1px solid var(--color-border-table); border-right: 1px solid var(--color-border-table); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-font-links-labels); text-align: left; vertical-align: middle; } .variants-table-module-scss-module__oUnONG__headerCell:last-child { border-right: none; } .variants-table-module-scss-module__oUnONG__colValueName { width: 200px; } .variants-table-module-scss-module__oUnONG__colGallery { width: 1%; } .variants-table-module-scss-module__oUnONG__colSku { width: 140px; } .variants-table-module-scss-module__oUnONG__colPrice, .variants-table-module-scss-module__oUnONG__colStock, .variants-table-module-scss-module__oUnONG__colPublished { width: 90px; } .variants-table-module-scss-module__oUnONG__groupRow { background: var(--color-white); border-bottom: 1px solid var(--color-border-table); } .variants-table-module-scss-module__oUnONG__groupRow:hover { background: var(--color-secondary-50); } .variants-table-module-scss-module__oUnONG__groupNameCell { padding: var(--space-compact) var(--space-small) var(--space-compact) var(--space-large); border-bottom: 1px solid var(--color-border-table); border-right: 1px solid var(--color-border-table); vertical-align: middle; } .variants-table-module-scss-module__oUnONG__groupHeaderContent { justify-content: space-between; align-items: center; gap: var(--space-small); display: flex; } .variants-table-module-scss-module__oUnONG__groupHeaderLeft, .variants-table-module-scss-module__oUnONG__groupHeaderRight { align-items: center; gap: var(--space-small); display: flex; } .variants-table-module-scss-module__oUnONG__colorSwatch { border-radius: var(--radius-full); border: 2px solid var(--color-white); width: 24px; height: 24px; box-shadow: var(--shadow-sm); flex-shrink: 0; } .variants-table-module-scss-module__oUnONG__groupName { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-font-headings); } .variants-table-module-scss-module__oUnONG__variantCount { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-secondary-600); } .variants-table-module-scss-module__oUnONG__expandButton { cursor: pointer; width: 32px; height: 32px; color: var(--color-font-links-labels); background: none; border: none; flex-shrink: 0; justify-content: center; align-items: center; padding: 0; transition: color .2s ease-in-out; display: flex; } .variants-table-module-scss-module__oUnONG__expandButton:hover { color: var(--color-primary-600); } .variants-table-module-scss-module__oUnONG__childRow { background: var(--color-white); transition: background-color .2s ease-in-out; } .variants-table-module-scss-module__oUnONG__childRow:hover { background: var(--color-secondary-50); } .variants-table-module-scss-module__oUnONG__childRow.variants-table-module-scss-module__oUnONG__hidden { display: none; } .variants-table-module-scss-module__oUnONG__childLabelCell { padding: var(--space-compact) var(--space-large); padding-left: var(--space-huge); border-bottom: 1px solid var(--color-border-table); border-right: 1px solid var(--color-border-table); vertical-align: middle; } .variants-table-module-scss-module__oUnONG__badgeGroup { align-items: center; gap: var(--space-small); flex-wrap: wrap; display: flex; } .variants-table-module-scss-module__oUnONG__childLabel { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-secondary-700); } .variants-table-module-scss-module__oUnONG__cell { padding: var(--space-compact) var(--space-large); border-bottom: 1px solid var(--color-border-table); border-right: 1px solid var(--color-border-table); vertical-align: middle; height: 64px; } .variants-table-module-scss-module__oUnONG__cell:last-child { border-right: none; } .variants-table-module-scss-module__oUnONG__cellCentered { text-align: center; } .variants-table-module-scss-module__oUnONG__cellRight { text-align: right; } .variants-table-module-scss-module__oUnONG__galleryCell { white-space: nowrap; width: 1%; padding: 12px 24px; } .variants-table-module-scss-module__oUnONG__galleryRow { align-items: center; gap: 8px; display: flex; } .variants-table-module-scss-module__oUnONG__galleryItem { border-radius: var(--radius-sm); background: var(--color-secondary-100); cursor: pointer; flex-shrink: 0; width: 40px; height: 40px; transition: transform .2s ease-in-out; position: relative; overflow: visible; } .variants-table-module-scss-module__oUnONG__galleryItem:hover { transform: scale(1.05); } .variants-table-module-scss-module__oUnONG__thumbnail { object-fit: cover; border-radius: var(--radius-sm); } .variants-table-module-scss-module__oUnONG__removeImageButton { border-radius: var(--radius-full); background: var(--color-secondary-600); border: 1.5px solid var(--color-white); cursor: pointer; width: 16px; height: 16px; color: var(--color-white); z-index: 1; justify-content: center; align-items: center; padding: 0; transition: background-color .2s ease-in-out; display: flex; position: absolute; top: -8px; right: -8px; } .variants-table-module-scss-module__oUnONG__removeImageButton:hover { background: var(--color-secondary-700); } .variants-table-module-scss-module__oUnONG__addImageButton { border: 1px dashed var(--color-border-default); border-radius: var(--radius-sm); cursor: pointer; width: 40px; height: 40px; color: var(--color-font-links-labels); background: none; flex-shrink: 0; justify-content: center; align-items: center; transition: all .2s ease-in-out; display: inline-flex; } .variants-table-module-scss-module__oUnONG__addImageButton:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); background: var(--color-primary-50); } .variants-table-module-scss-module__oUnONG__inputWrapper { width: 100%; } .variants-table-module-scss-module__oUnONG__toggleWrapper { justify-content: center; align-items: center; display: flex; } .variants-table-module-scss-module__oUnONG__emptyState { padding: var(--space-huge); text-align: center; color: var(--color-secondary-600); font-size: var(--font-size-md); } .variants-table-module-scss-module__oUnONG__flatRow { background: var(--color-white); border-bottom: 1px solid var(--color-border-table); transition: background-color .2s ease-in-out; } .variants-table-module-scss-module__oUnONG__flatRow:hover { background: var(--color-secondary-50); } .variants-table-module-scss-module__oUnONG__flatLabelCell { padding: var(--space-compact) var(--space-large); border-bottom: 1px solid var(--color-border-table); border-right: 1px solid var(--color-border-table); vertical-align: middle; } .variants-table-module-scss-module__oUnONG__flatLabelContent { align-items: center; gap: var(--space-small); display: flex; } .variants-table-module-scss-module__oUnONG__flatLabel { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-font-headings); } .variants-table-module-scss-module__oUnONG__errorRow { border-bottom: 1px solid var(--color-border-table); background: #fef2f2; } .variants-table-module-scss-module__oUnONG__errorCell { padding: var(--space-medium) var(--space-large); border-right: none; } .variants-table-module-scss-module__oUnONG__errorMessage { align-items: center; gap: var(--space-small); color: #dc2626; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); display: flex; } .variants-table-module-scss-module__oUnONG__errorIcon { font-size: 18px; line-height: 1; } .variants-table-module-scss-module__oUnONG__errorText { flex: 1; } @media (max-width: 1024px) { .variants-table-module-scss-module__oUnONG__container { overflow-x: auto; } .variants-table-module-scss-module__oUnONG__table { min-width: 900px; } } /* [project]/src/core/components/common/wizard/wizard-progress.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .wizard-progress-module-scss-module__vS4mFG__progressContainer { width: 100%; margin-bottom: var(--space-massive); } .wizard-progress-module-scss-module__vS4mFG__progressBar { background: var(--color-secondary-100); border-radius: var(--radius-full); width: 100%; height: 8px; margin-top: 6px; overflow: hidden; } .wizard-progress-module-scss-module__vS4mFG__progressFill { background: linear-gradient(90deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%); border-radius: var(--radius-full); height: 100%; transition: width .5s cubic-bezier(.4, 0, .2, 1); } .wizard-progress-module-scss-module__vS4mFG__stepsContainer { justify-content: space-between; gap: var(--space-large); display: flex; } .wizard-progress-module-scss-module__vS4mFG__stepItem { align-items: center; gap: var(--space-small); flex-direction: column; flex: 1; transition: all .3s; display: flex; } .wizard-progress-module-scss-module__vS4mFG__stepIcon { width: 48px; height: 48px; font-size: var(--font-size-2xl); background: var(--color-secondary-100); border: 2px solid var(--color-border-default); border-radius: 50%; justify-content: center; align-items: center; transition: all .3s; display: flex; } .wizard-progress-module-scss-module__vS4mFG__stepItem.wizard-progress-module-scss-module__vS4mFG__active .wizard-progress-module-scss-module__vS4mFG__stepIcon { background: var(--color-success-600); border-color: var(--color-success-600); transform: scale(1.1); box-shadow: 0 4px 12px #22c55e4d; } .wizard-progress-module-scss-module__vS4mFG__stepItem.wizard-progress-module-scss-module__vS4mFG__completed .wizard-progress-module-scss-module__vS4mFG__stepIcon { background: var(--color-success-600); border-color: var(--color-success-600); } .wizard-progress-module-scss-module__vS4mFG__stepItem.wizard-progress-module-scss-module__vS4mFG__upcoming .wizard-progress-module-scss-module__vS4mFG__stepIcon { opacity: .6; } .wizard-progress-module-scss-module__vS4mFG__iconWrapper { color: var(--color-secondary-600); justify-content: center; align-items: center; display: flex; } .wizard-progress-module-scss-module__vS4mFG__stepItem.wizard-progress-module-scss-module__vS4mFG__active .wizard-progress-module-scss-module__vS4mFG__iconWrapper, .wizard-progress-module-scss-module__vS4mFG__stepItem.wizard-progress-module-scss-module__vS4mFG__completed .wizard-progress-module-scss-module__vS4mFG__iconWrapper, .wizard-progress-module-scss-module__vS4mFG__checkIcon { color: #fff; } .wizard-progress-module-scss-module__vS4mFG__stepLabel { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-align: center; color: var(--color-font-body); transition: all .3s; } .wizard-progress-module-scss-module__vS4mFG__stepItem.wizard-progress-module-scss-module__vS4mFG__active .wizard-progress-module-scss-module__vS4mFG__stepLabel { color: var(--color-success-600); font-weight: var(--font-weight-semibold); } .wizard-progress-module-scss-module__vS4mFG__stepItem.wizard-progress-module-scss-module__vS4mFG__completed .wizard-progress-module-scss-module__vS4mFG__stepLabel { color: var(--color-success-600); } @media (max-width: 768px) { .wizard-progress-module-scss-module__vS4mFG__stepsContainer { gap: var(--space-small); } .wizard-progress-module-scss-module__vS4mFG__stepIcon { width: 48px; height: 48px; font-size: var(--font-size-xl); } .wizard-progress-module-scss-module__vS4mFG__stepLabel { font-size: var(--font-size-xs); } .wizard-progress-module-scss-module__vS4mFG__checkIcon { width: 24px; height: 24px; } } /* [project]/src/core/components/common/wizard/wizard.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .wizard-module-scss-module__M8-8Dq__wizardContainer { max-width: 900px; padding: var(--space-xxlarge); min-height: calc(100vh - 200px); margin: 0 auto; } .wizard-module-scss-module__M8-8Dq__wizardHeader { text-align: center; margin-bottom: var(--space-massive); } .wizard-module-scss-module__M8-8Dq__headerBadge { align-items: center; gap: var(--space-small); padding: var(--space-small) var(--space-large); border-radius: var(--radius-full); margin-bottom: var(--space-large); background: linear-gradient(135deg, #4285f41a 0%, #1a73e826 100%); display: inline-flex; } .wizard-module-scss-module__M8-8Dq__badgeIcon { font-size: var(--font-size-xl); } .wizard-module-scss-module__M8-8Dq__badgeText { color: var(--color-primary-600); } .wizard-module-scss-module__M8-8Dq__mainTitle { margin-bottom: var(--space-medium); background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%); -webkit-text-fill-color: #0000; -webkit-background-clip: text; background-clip: text; } .wizard-module-scss-module__M8-8Dq__mainSubtitle { max-width: 600px; margin: 0 auto; } .wizard-module-scss-module__M8-8Dq__stepContainer { min-height: 300px; margin-bottom: var(--space-large); position: relative; } .wizard-module-scss-module__M8-8Dq__navigationButtons { justify-content: space-between; gap: var(--space-large); padding-top: var(--space-xlarge); border-top: 1px solid var(--color-border-default); display: flex; position: relative; } .wizard-module-scss-module__M8-8Dq__backButton { flex: none; min-width: 120px; } .wizard-module-scss-module__M8-8Dq__nextButton, .wizard-module-scss-module__M8-8Dq__submitButton { flex: 1; max-width: 300px; margin-left: auto; } @media (max-width: 768px) { .wizard-module-scss-module__M8-8Dq__wizardContainer { padding: var(--space-large); } .wizard-module-scss-module__M8-8Dq__wizardHeader { margin-bottom: var(--space-xxlarge); } .wizard-module-scss-module__M8-8Dq__mainTitle { font-size: 1.75rem; } .wizard-module-scss-module__M8-8Dq__navigationButtons { flex-direction: column-reverse; } .wizard-module-scss-module__M8-8Dq__backButton, .wizard-module-scss-module__M8-8Dq__nextButton, .wizard-module-scss-module__M8-8Dq__submitButton { width: 100%; max-width: none; } } /* [project]/src/core/components/common/date-range-picker-modal/date-range-picker-modal.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .date-range-picker-modal-module-scss-module__7xJKla__layoutContainer { flex-direction: row; display: flex; } .date-range-picker-modal-module-scss-module__7xJKla__sidebar { border-inline-end: 1px solid var(--border-table, #edeef1); background: #fff; flex-direction: column; flex-shrink: 0; align-items: flex-start; gap: 4px; width: 180px; padding-block: 16px 24px; padding-inline: 24px; display: flex; } .date-range-picker-modal-module-scss-module__7xJKla__presetButton { cursor: pointer; text-align: start; width: 100%; color: var(--fonts-headings, #25272c); font-family: var(--typeface-headings, Inter); font-size: var(--font-size-text-sm, 14px); background: none; border: none; border-radius: 8px; align-items: center; gap: 4px; padding: 4px 8px; font-style: normal; font-weight: 400; line-height: 24px; transition: background-color .15s ease-out; display: flex; } .date-range-picker-modal-module-scss-module__7xJKla__presetButton:hover { background: var(--color-palette-secondary-100, #edeef1); } .date-range-picker-modal-module-scss-module__7xJKla__presetButton.date-range-picker-modal-module-scss-module__7xJKla__active { background: var(--color-palette-secondary-100, #edeef1); font-weight: 500; } .date-range-picker-modal-module-scss-module__7xJKla__calendarsArea { flex: 1; justify-content: center; align-items: flex-start; gap: 4px; padding-block: 0 24px; padding-inline: 0; display: flex; } .date-range-picker-modal-module-scss-module__7xJKla__calendarWrapper { flex-shrink: 0; } /* [project]/src/core/components/common/timed-media-uploader/timed-media-uploader.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .timed-media-uploader-module-scss-module__BYloUq__uploader { gap: var(--space-medium); flex-direction: column; display: flex; } .timed-media-uploader-module-scss-module__BYloUq__uploadTitle { text-transform: none; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 160%; font-weight: var(--font-weight-semibold); color: var(--color-font-headings); text-decoration: none; } .timed-media-uploader-module-scss-module__BYloUq__required { color: var(--color-danger-600); font-weight: var(--font-weight-regular); margin-inline-start: var(--space-tiny); } .timed-media-uploader-module-scss-module__BYloUq__dropBox { justify-content: center; align-items: center; gap: var(--space-large); width: 100%; height: 319px; padding: var(--space-large); border-radius: var(--radius-lg); color: #484e5c; cursor: pointer; background-color: #0000; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23d7dae0' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); border: none; flex-direction: column; transition: background-color .15s; display: flex; position: relative; } .timed-media-uploader-module-scss-module__BYloUq__dropBox:hover, .timed-media-uploader-module-scss-module__BYloUq__dropBox.timed-media-uploader-module-scss-module__BYloUq__dropBoxActive { background-color: #3b82f60d; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%233b82f6' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); } .timed-media-uploader-module-scss-module__BYloUq__hiddenInput { opacity: 0; pointer-events: none; width: 1px; height: 1px; position: absolute; } .timed-media-uploader-module-scss-module__BYloUq__dropIcon { object-fit: contain; width: 58px; height: 48px; } .timed-media-uploader-module-scss-module__BYloUq__dropText { color: inherit; text-align: center; font-family: Nunito Sans, sans-serif; font-size: 16px; font-weight: 400; } .timed-media-uploader-module-scss-module__BYloUq__uploadingText { text-transform: none; color: var(--color-primary-600); font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 160%; text-decoration: none; } .timed-media-uploader-module-scss-module__BYloUq__mediaList { gap: var(--space-small); flex-direction: column; display: flex; } .timed-media-uploader-module-scss-module__BYloUq__mediaItem { align-items: center; gap: var(--space-medium); padding: var(--space-small); border: 1px solid var(--color-border-table); border-radius: var(--radius-md); display: flex; } .timed-media-uploader-module-scss-module__BYloUq__mediaThumb { border-radius: var(--radius-md); background: var(--color-secondary-50); flex-shrink: 0; width: 72px; height: 72px; overflow: hidden; } .timed-media-uploader-module-scss-module__BYloUq__mediaThumbInner { object-fit: cover; width: 100%; height: 100%; } .timed-media-uploader-module-scss-module__BYloUq__mediaDuration { flex: 1; min-width: 0; } .timed-media-uploader-module-scss-module__BYloUq__fieldError { margin-top: var(--space-tiny); font-family: var(--font-family-texts); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-danger-600); line-height: 14px; } .timed-media-uploader-module-scss-module__BYloUq__modalFooter { justify-content: flex-end; gap: var(--space-medium); display: flex; } .timed-media-uploader-module-scss-module__BYloUq__trimBody { gap: var(--space-medium); flex-direction: column; display: flex; } .timed-media-uploader-module-scss-module__BYloUq__trimDescription { text-transform: none; color: var(--color-font-body); margin: 0; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 160%; text-decoration: none; } .timed-media-uploader-module-scss-module__BYloUq__trimVideo { border-radius: var(--radius-md); background: var(--color-secondary-900); width: 100%; max-height: 320px; } .timed-media-uploader-module-scss-module__BYloUq__trimReadouts { text-transform: none; color: var(--color-font-headings); justify-content: space-between; align-items: center; font-family: Inter, sans-serif; font-size: .875rem; font-style: normal; font-weight: 400; line-height: 160%; text-decoration: none; display: flex; } .timed-media-uploader-module-scss-module__BYloUq__trimDurationBadge { padding: 2px var(--space-small); border-radius: var(--radius-full); background: var(--color-primary-600); color: var(--color-white); font-weight: var(--font-weight-semibold); } .timed-media-uploader-module-scss-module__BYloUq__trimTimeline { border-radius: var(--radius-md); -webkit-user-select: none; user-select: none; touch-action: none; background: var(--color-secondary-900); height: 72px; position: relative; overflow: hidden; } .timed-media-uploader-module-scss-module__BYloUq__trimStrip { width: 100%; height: 100%; display: flex; } .timed-media-uploader-module-scss-module__BYloUq__trimThumb { pointer-events: none; background-position: center; background-size: cover; flex: 1 1 0; min-width: 0; height: 100%; } .timed-media-uploader-module-scss-module__BYloUq__trimMask { pointer-events: none; background: #0009; position: absolute; inset-block: 0; } .timed-media-uploader-module-scss-module__BYloUq__trimSelection { border-top: 3px solid var(--color-primary-600); border-bottom: 3px solid var(--color-primary-600); box-sizing: border-box; position: absolute; inset-block: 0; } .timed-media-uploader-module-scss-module__BYloUq__trimHandle { background: var(--color-primary-600); cursor: ew-resize; justify-content: center; align-items: center; width: 14px; display: flex; position: absolute; inset-block: -3px; } .timed-media-uploader-module-scss-module__BYloUq__trimHandle:after { content: ""; border-radius: var(--radius-full); background: var(--color-white); width: 2px; height: 40%; } .timed-media-uploader-module-scss-module__BYloUq__trimHandleStart { border-radius: var(--radius-sm) 0 0 var(--radius-sm); inset-inline-start: -7px; } .timed-media-uploader-module-scss-module__BYloUq__trimHandleEnd { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; inset-inline-end: -7px; } .timed-media-uploader-module-scss-module__BYloUq__trimPlayhead { background: var(--color-white); pointer-events: none; width: 2px; position: absolute; inset-block: 0; box-shadow: 0 0 4px #0009; } /* [project]/src/core/components/common/image-generator/image-generator.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .image-generator-module-scss-module__BnPzgq__generator { gap: var(--space-xlarge); grid-template-columns: minmax(168px, 220px) minmax(0, 1fr); align-items: start; width: 100%; min-width: 0; display: grid; } .image-generator-module-scss-module__BnPzgq__previewColumn { gap: var(--space-medium); top: var(--space-medium); flex-direction: column; min-width: 0; display: flex; position: sticky; } .image-generator-module-scss-module__BnPzgq__controlsColumn { gap: var(--space-large); flex-direction: column; min-width: 0; display: flex; } .image-generator-module-scss-module__BnPzgq__swatchTransparent, .image-generator-module-scss-module__BnPzgq__preview[data-transparent="true"] { background-color: var(--color-white); background-image: linear-gradient(45deg, #e2e2e2 25%, #0000 25%), linear-gradient(-45deg, #e2e2e2 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #e2e2e2 75%), linear-gradient(-45deg, #0000 75%, #e2e2e2 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; } .image-generator-module-scss-module__BnPzgq__preview { aspect-ratio: 1; border: 1px solid var(--color-border-default); border-radius: var(--radius-card-corner); justify-content: center; align-items: center; width: 100%; display: flex; overflow: hidden; } .image-generator-module-scss-module__BnPzgq__preview svg { width: 100%; height: 100%; } .image-generator-module-scss-module__BnPzgq__control { gap: var(--space-small); flex-direction: column; min-width: 0; display: flex; } .image-generator-module-scss-module__BnPzgq__controlLabel { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-font-headings); } .image-generator-module-scss-module__BnPzgq__labelRow { justify-content: space-between; align-items: center; gap: var(--space-small); min-width: 0; display: flex; } .image-generator-module-scss-module__BnPzgq__charCount { font-size: var(--font-size-xs); color: var(--color-font-disable); white-space: nowrap; flex-shrink: 0; } .image-generator-module-scss-module__BnPzgq__fieldRow { gap: var(--space-medium); grid-template-columns: 1fr 1fr; display: grid; } .image-generator-module-scss-module__BnPzgq__optionsRow { gap: var(--space-medium); grid-template-columns: 1fr 1fr; align-items: start; display: grid; } .image-generator-module-scss-module__BnPzgq__presetScrollArea { gap: var(--space-small); flex-direction: column; width: 100%; min-width: 0; display: flex; overflow: hidden; } .image-generator-module-scss-module__BnPzgq__presetScroller { scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; width: 100%; min-width: 0; overflow: auto hidden; } .image-generator-module-scss-module__BnPzgq__presetScroller::-webkit-scrollbar { display: none; } .image-generator-module-scss-module__BnPzgq__presetRow { gap: var(--space-tiny); width: max-content; display: flex; } .image-generator-module-scss-module__BnPzgq__presetScrollTrack { border-radius: var(--radius-full); background: var(--color-secondary-100); cursor: pointer; flex-shrink: 0; width: 100%; height: 10px; position: relative; } .image-generator-module-scss-module__BnPzgq__presetScrollThumb { border-radius: var(--radius-full); background: var(--color-secondary-400); cursor: grab; touch-action: none; min-width: 32px; height: 100%; transition: background .15s; position: absolute; top: 0; } .image-generator-module-scss-module__BnPzgq__presetScrollThumb:active { cursor: grabbing; } .image-generator-module-scss-module__BnPzgq__presetScrollThumbDragging { cursor: grabbing; background: var(--color-secondary-500); } .image-generator-module-scss-module__BnPzgq__presetScrollThumbIdle { background: var(--color-secondary-300); cursor: default; touch-action: auto; } .image-generator-module-scss-module__BnPzgq__presetButton { align-items: center; gap: var(--space-tiny); width: 64px; padding: var(--space-tiny); border: 1px solid var(--color-border-default); border-radius: var(--radius-card-corner); background: var(--color-white); cursor: pointer; flex-direction: column; flex-shrink: 0; transition: border-color .15s; display: flex; } .image-generator-module-scss-module__BnPzgq__presetButton:hover { border-color: var(--color-primary-400); } .image-generator-module-scss-module__BnPzgq__presetThumb { aspect-ratio: 1; border-radius: var(--radius-sm); width: 100%; display: flex; overflow: hidden; } .image-generator-module-scss-module__BnPzgq__presetThumb svg { width: 100%; height: 100%; } .image-generator-module-scss-module__BnPzgq__presetName { font-size: var(--font-size-xs); color: var(--color-font-links-labels); white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: hidden; } .image-generator-module-scss-module__BnPzgq__segmented { gap: var(--space-tiny); padding: var(--space-tiny); border-radius: var(--radius-card-corner); background: var(--color-secondary-50); flex-wrap: wrap; width: 100%; display: flex; } .image-generator-module-scss-module__BnPzgq__segment { min-width: 0; padding: var(--space-small) var(--space-medium); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-font-links-labels); cursor: pointer; background: none; border: none; flex: auto; transition: background .15s, color .15s; } .image-generator-module-scss-module__BnPzgq__segment:hover { color: var(--color-font-headings); } .image-generator-module-scss-module__BnPzgq__segmentActive { background: var(--color-white); color: var(--color-font-headings); box-shadow: var(--shadow-sm); } .image-generator-module-scss-module__BnPzgq__iconGrid { gap: var(--space-tiny); max-height: 220px; padding: var(--space-small); border: 1px solid var(--color-border-default); border-radius: var(--radius-card-corner); -webkit-overflow-scrolling: touch; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); display: grid; overflow-y: auto; } .image-generator-module-scss-module__BnPzgq__iconCell { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-secondary-50); color: var(--color-font-headings); cursor: pointer; border: 1px solid #0000; justify-content: center; align-items: center; transition: border-color .12s, background .12s; display: flex; } .image-generator-module-scss-module__BnPzgq__iconCell:hover { border-color: var(--color-primary-300); } .image-generator-module-scss-module__BnPzgq__iconCellActive { border-color: var(--color-primary-600); background: var(--color-primary-50); } .image-generator-module-scss-module__BnPzgq__iconNone { font-size: var(--font-size-md); color: var(--color-font-disable); } .image-generator-module-scss-module__BnPzgq__colorsSection { gap: var(--space-medium) var(--space-large); grid-template-columns: 1fr 1fr; display: grid; } .image-generator-module-scss-module__BnPzgq__swatchRow { gap: var(--space-small); flex-wrap: wrap; align-items: center; display: flex; } .image-generator-module-scss-module__BnPzgq__swatch { border-radius: var(--radius-full); border: 1px solid var(--color-border-default); cursor: pointer; width: 28px; height: 28px; padding: 0; transition: transform .1s; position: relative; } .image-generator-module-scss-module__BnPzgq__swatch:hover { transform: scale(1.08); } .image-generator-module-scss-module__BnPzgq__swatchActive { box-shadow: 0 0 0 2px var(--color-white),0 0 0 4px var(--color-primary-600); } .image-generator-module-scss-module__BnPzgq__customSwatch { justify-content: center; align-items: center; display: inline-flex; overflow: hidden; } .image-generator-module-scss-module__BnPzgq__colorInput { opacity: 0; cursor: pointer; width: 100%; height: 100%; position: absolute; inset: 0; } .image-generator-module-scss-module__BnPzgq__errorMessage { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-danger-600); text-align: center; } .image-generator-module-scss-module__BnPzgq__hintMessage { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-warning-600); text-align: center; } @media (max-width: 968px) { .image-generator-module-scss-module__BnPzgq__generator { gap: var(--space-large); grid-template-columns: 1fr; } .image-generator-module-scss-module__BnPzgq__previewColumn { position: static; } .image-generator-module-scss-module__BnPzgq__preview { max-width: min(280px, 100%); margin: 0 auto; } } @media (max-width: 640px) { .image-generator-module-scss-module__BnPzgq__generator { gap: var(--space-medium); } .image-generator-module-scss-module__BnPzgq__preview { max-width: 100%; } .image-generator-module-scss-module__BnPzgq__fieldRow, .image-generator-module-scss-module__BnPzgq__optionsRow, .image-generator-module-scss-module__BnPzgq__colorsSection { gap: var(--space-medium); grid-template-columns: 1fr; } .image-generator-module-scss-module__BnPzgq__presetButton { width: 72px; } .image-generator-module-scss-module__BnPzgq__segment { flex: 1 1 calc(33.333% - var(--space-tiny)); padding: var(--space-small); font-size: var(--font-size-xs); line-height: var(--line-height-tight); text-align: center; white-space: normal; border-radius: var(--radius-sm); } .image-generator-module-scss-module__BnPzgq__segmented { border-radius: var(--radius-card-corner); } .image-generator-module-scss-module__BnPzgq__iconGrid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 200px; } .image-generator-module-scss-module__BnPzgq__swatch { width: 32px; height: 32px; } } /* [project]/src/core/components/ui/snackbar/snackbar.module.scss.module.css [app-client] (css) */ :root { --color-primary-50: #f0f5fe; --color-primary-100: #dce8fd; --color-primary-200: #c1d8fc; --color-primary-300: #96c0fa; --color-primary-400: #659ff5; --color-primary-500: #3572ef; --color-primary-600: #2b5be5; --color-primary-700: #2348d2; --color-primary-800: #233baa; --color-primary-900: #213787; --color-primary-950: #192352; --color-secondary-50: #f7f8f8; --color-secondary-100: #edeef1; --color-secondary-200: #d7dae0; --color-secondary-300: #b5bac4; --color-secondary-400: #8c95a4; --color-secondary-500: #6e7889; --color-secondary-600: #596070; --color-secondary-700: #484e5c; --color-secondary-800: #414651; --color-secondary-900: #373b43; --color-secondary-950: #25272c; --color-danger-50: #fff1f1; --color-danger-100: #ffdfdf; --color-danger-200: #ffc5c5; --color-danger-300: #ff9d9d; --color-danger-400: #ff6464; --color-danger-500: #ff4d4d; --color-danger-600: #ed1515; --color-danger-700: #c80d0d; --color-danger-800: #a50f0f; --color-danger-900: #881414; --color-danger-950: #4b0404; --color-success-50: #f1fcf2; --color-success-100: #dff9e4; --color-success-200: #c1f1cb; --color-success-300: #90e5a3; --color-success-400: #58d073; --color-success-500: #32b550; --color-success-600: #28a745; --color-success-700: #1f7634; --color-success-800: #1f7634; --color-success-900: #1a4d27; --color-success-950: #092a12; --color-warning-50: #fffbeb; --color-warning-100: #fff4c6; --color-warning-200: #ffe680; --color-warning-300: #ffd64a; --color-warning-400: #ffc220; --color-warning-500: #f9a007; --color-warning-600: #dd7802; --color-warning-700: #b75406; --color-warning-800: #943f0c; --color-warning-900: #7a340d; --color-warning-950: #461a02; --color-tertiary-50: #f7f4fe; --color-tertiary-100: #efebfc; --color-tertiary-200: #e1dafa; --color-tertiary-300: #cbbcf6; --color-tertiary-400: #b195f0; --color-tertiary-500: #8c5ae5; --color-tertiary-600: #884bdc; --color-tertiary-700: #7939c8; --color-tertiary-800: #652fa8; --color-tertiary-900: #53288a; --color-tertiary-950: #34185d; --color-white: #fff; --color-font-headings: var(--color-secondary-950); --color-font-body: var(--color-secondary-800); --color-font-links-labels: var(--color-secondary-700); --color-font-disable: var(--color-secondary-500); --color-border-default: var(--color-secondary-200); --color-border-active: var(--color-secondary-300); --color-border-table: var(--color-secondary-100); --space-micro: 2px; --space-tiny: 4px; --space-small: 8px; --space-compact: 10px; --space-medium: 12px; --space-medium-plus: 14px; --space-large: 16px; --space-large-plus: 20px; --space-xlarge: 24px; --space-xlarge-plus: 28px; --space-xxlarge: 32px; --space-huge: 40px; --space-very-huge: 44px; --space-massive: 48px; --space-very-massive: 56px; --space-enormous: 64px; --font-family-headings: "Inter", sans-serif; --font-family-texts: "Inter", sans-serif; --font-family-labels: "Inter", sans-serif; --font-family-buttons: "Inter", sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --line-height-tight: 130%; --line-height-normal: 140%; --line-height-relaxed: 150%; --line-height-loose: 160%; --line-height-auto: auto; --line-height-button: 24px; --letter-spacing-normal: 0%; --radius-sm: var(--space-small); --radius-md: var(--space-medium); --radius-lg: var(--space-large); --radius-xl: var(--space-xlarge); --radius-full: 9999px; --radius-card-corner: 12px; --shadow-sm: 0 2px 4px #00000005; --shadow-md: 0 4px 8px #0000000a; --shadow-lg: 0 6px 16px #0000000f; --shadow-xl: 0 8px 16px #00000014; --button-gap: var(--space-tiny); --button-radius: var(--space-small); --button-primary-bg-default: var(--color-primary-600); --button-primary-bg-hover: var(--color-primary-500); --button-primary-bg-focused: var(--color-primary-700); --button-primary-bg-disabled: var(--color-primary-100); --button-primary-font-default: var(--color-white); --button-primary-font-hover: var(--color-white); --button-primary-font-focused: var(--color-white); --button-primary-font-disabled: var(--color-primary-500); --button-secondary-bg-default: var(--color-white); --button-secondary-bg-hover: var(--color-secondary-50); --button-secondary-bg-focused: var(--color-secondary-100); --button-secondary-bg-disabled: var(--color-secondary-50); --button-secondary-font-default: var(--color-font-links-labels); --button-secondary-font-hover: var(--color-font-headings); --button-secondary-font-focused: var(--color-font-headings); --button-secondary-font-disabled: var(--color-font-disable); --button-primary-outline-bg-default: var(--color-white); --button-primary-outline-bg-hover: var(--color-primary-50); --button-primary-outline-bg-focused: var(--color-primary-200); --button-primary-outline-bg-disabled: var(--color-primary-50); --button-primary-outline-font-default: var(--color-primary-600); --button-primary-outline-font-hover: var(--color-primary-600); --button-primary-outline-font-focused: var(--color-primary-900); --button-primary-outline-font-disabled: var(--color-primary-400); --button-primary-outline-border-default: var(--color-primary-200); --button-primary-outline-border-hover: var(--color-primary-200); --button-primary-outline-border-focused: var(--color-primary-300); --button-primary-outline-border-disabled: var(--color-primary-200); --button-secondary-outline-bg-default: var(--color-white); --button-secondary-outline-bg-hover: var(--color-secondary-50); --button-secondary-outline-bg-focused: var(--color-secondary-100); --button-secondary-outline-bg-disabled: var(--color-secondary-50); --button-secondary-outline-font-default: var(--color-font-links-labels); --button-secondary-outline-font-hover: var(--color-font-headings); --button-secondary-outline-font-focused: var(--color-font-headings); --button-secondary-outline-font-disabled: var(--color-font-disable); --button-secondary-outline-border-default: var(--color-border-default); --button-secondary-outline-border-hover: var(--color-border-active); --button-secondary-outline-border-focused: var(--color-border-default); --button-secondary-outline-border-disabled: var(--color-border-default); --button-link-bg-default: transparent; --button-link-bg-hover: transparent; --button-link-bg-focused: transparent; --button-link-bg-disabled: transparent; --button-link-font-default: var(--color-font-links-labels); --button-link-font-hover: var(--color-font-headings); --button-link-font-focused: var(--color-font-headings); --button-link-font-disabled: var(--color-font-disable); --button-xsmall-padding-top: var(--space-tiny); --button-xsmall-padding-right: var(--space-small); --button-xsmall-padding-bottom: var(--space-tiny); --button-xsmall-padding-left: var(--space-small); --button-xsmall-icon: var(--space-large); --button-small-padding-top: var(--space-small); --button-small-padding-right: var(--space-large); --button-small-padding-bottom: var(--space-small); --button-small-padding-left: var(--space-large); --button-small-icon: var(--space-large); --button-medium-padding-top: var(--space-compact); --button-medium-padding-right: var(--space-large-plus); --button-medium-padding-bottom: var(--space-compact); --button-medium-padding-left: var(--space-large-plus); --button-medium-icon: var(--space-large-plus); --button-large-padding-top: var(--space-medium); --button-large-padding-right: var(--space-xlarge); --button-large-padding-bottom: var(--space-medium); --button-large-padding-left: var(--space-xlarge); --button-large-icon: var(--space-large-plus); --button-height-xsmall: 32px; --button-height-small: 40px; --button-height-medium: 44px; --button-height-large: 48px; } .snackbar-module-scss-module__jaXICq__snackbarContainer { z-index: 9999; pointer-events: none; flex-direction: column-reverse; align-items: flex-end; gap: 12px; max-height: calc(100vh - 48px); display: flex; position: fixed; bottom: 24px; right: 24px; overflow: visible; } @media (max-width: 640px) { .snackbar-module-scss-module__jaXICq__snackbarContainer { align-items: stretch; max-height: calc(100vh - 32px); bottom: 16px; left: 16px; right: 16px; } } .snackbar-module-scss-module__jaXICq__snackbarCard { pointer-events: auto; border: 1px solid #0000; border-radius: 12px; flex-direction: column; gap: 16px; width: 352px; padding: 16px 16px 0; transition: all .4s cubic-bezier(.34, 1.56, .64, 1); display: flex; position: relative; overflow: hidden; box-shadow: 0 4px 8px #0000000a; } @media (max-width: 640px) { .snackbar-module-scss-module__jaXICq__snackbarCard { width: 100%; } } .snackbar-module-scss-module__jaXICq__snackbarCard.snackbar-module-scss-module__jaXICq__visible { opacity: 1; animation: .6s cubic-bezier(.34, 1.56, .64, 1) snackbar-module-scss-module__jaXICq__slideInBounce; transform: translateX(0)scale(1); } .snackbar-module-scss-module__jaXICq__snackbarCard.snackbar-module-scss-module__jaXICq__hidden { opacity: 0; transition: all .4s cubic-bezier(.4, 0, 1, 1); transform: translateY(20px)scale(.95); } .snackbar-module-scss-module__jaXICq__snackbarCard.snackbar-module-scss-module__jaXICq__exiting { animation: .4s cubic-bezier(.4, 0, 1, 1) forwards snackbar-module-scss-module__jaXICq__slideOutToBottom; } .snackbar-module-scss-module__jaXICq__snackbarContent { align-items: flex-start; gap: 8px; display: flex; } .snackbar-module-scss-module__jaXICq__snackbarIcon { background: #fff; border: 2px solid #0000; border-radius: 41px; flex-shrink: 0; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 8px; display: flex; box-shadow: 0 6px 16px #0000000f; } .snackbar-module-scss-module__jaXICq__snackbarIcon svg { transform-origin: top; animation: 1s ease-in-out infinite snackbar-module-scss-module__jaXICq__iconSwing; } .snackbar-module-scss-module__jaXICq__snackbarText { flex: 1; min-width: 0; padding-left: 8px; } .snackbar-module-scss-module__jaXICq__snackbarTitle { color: #25272c; margin: 0; font-family: Nunito Sans, sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; } .snackbar-module-scss-module__jaXICq__snackbarMessage { color: #414651; margin: 4px 0 0; font-family: Nunito Sans, sans-serif; font-size: 16px; font-weight: 400; line-height: 150%; } .snackbar-module-scss-module__jaXICq__snackbarClose { color: #414651; cursor: pointer; z-index: 1; background-color: #0000; border: none; border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 24px; height: 24px; transition: all .25s cubic-bezier(.4, 0, .2, 1); display: flex; position: absolute; top: 16px; right: 16px; } .snackbar-module-scss-module__jaXICq__snackbarClose:hover { color: #25272c; background-color: #00000014; transform: rotate(90deg)scale(1.15); } .snackbar-module-scss-module__jaXICq__snackbarClose:active { background-color: #0000001f; transform: rotate(90deg)scale(.95); } .snackbar-module-scss-module__jaXICq__snackbarClose:focus { outline: none; box-shadow: 0 0 0 2px #0000001a; } .snackbar-module-scss-module__jaXICq__snackbarClose:focus-visible { box-shadow: 0 0 0 2px #0003; } .snackbar-module-scss-module__jaXICq__snackbarProgress { background: #0000001a; border-radius: 0 0 12px 12px; width: calc(100% + 32px); height: 4px; position: relative; bottom: 0; left: -16px; right: -16px; overflow: hidden; } .snackbar-module-scss-module__jaXICq__snackbarProgressBar { will-change: width; height: 100%; transition: none; position: absolute; top: 0; left: 0; } .snackbar-module-scss-module__jaXICq__success { background: linear-gradient(180deg, var(--color-success-100) -35%, var(--color-success-300) 235%); border-color: var(--color-success-200); } .snackbar-module-scss-module__jaXICq__success .snackbar-module-scss-module__jaXICq__snackbarIcon { border-color: var(--color-success-50); color: var(--color-success-600); } .snackbar-module-scss-module__jaXICq__success .snackbar-module-scss-module__jaXICq__snackbarProgressBar { background: var(--color-success-500); } .snackbar-module-scss-module__jaXICq__danger { background: linear-gradient(180deg, var(--color-danger-100) -35%, var(--color-danger-300) 235%); border-color: var(--color-danger-200); } .snackbar-module-scss-module__jaXICq__danger .snackbar-module-scss-module__jaXICq__snackbarIcon { border-color: var(--color-danger-50); color: var(--color-danger-600); } .snackbar-module-scss-module__jaXICq__danger .snackbar-module-scss-module__jaXICq__snackbarProgressBar { background: var(--color-danger-500); } .snackbar-module-scss-module__jaXICq__warning { background: linear-gradient(180deg, var(--color-warning-100) -35%, var(--color-warning-300) 235%); border-color: var(--color-warning-200); } .snackbar-module-scss-module__jaXICq__warning .snackbar-module-scss-module__jaXICq__snackbarIcon { border-color: var(--color-warning-50); color: var(--color-warning-600); } .snackbar-module-scss-module__jaXICq__warning .snackbar-module-scss-module__jaXICq__snackbarProgressBar { background: var(--color-warning-500); } .snackbar-module-scss-module__jaXICq__info { background: linear-gradient(180deg, var(--color-primary-100) -35%, var(--color-primary-300) 235%); border-color: var(--color-primary-200); } .snackbar-module-scss-module__jaXICq__info .snackbar-module-scss-module__jaXICq__snackbarIcon { border-color: var(--color-primary-50); color: var(--color-primary-600); } .snackbar-module-scss-module__jaXICq__info .snackbar-module-scss-module__jaXICq__snackbarProgressBar { background: var(--color-primary-500); } .snackbar-module-scss-module__jaXICq__default { background: linear-gradient(180deg, var(--color-secondary-100) -35%, var(--color-secondary-300) 235%); border-color: var(--color-secondary-200); } .snackbar-module-scss-module__jaXICq__default .snackbar-module-scss-module__jaXICq__snackbarIcon { border-color: var(--color-secondary-50); color: var(--color-secondary-600); } .snackbar-module-scss-module__jaXICq__default .snackbar-module-scss-module__jaXICq__snackbarProgressBar { background: var(--color-secondary-500); } @keyframes snackbar-module-scss-module__jaXICq__slideInFromBottom { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes snackbar-module-scss-module__jaXICq__slideOutToBottom { 0% { opacity: 1; transform: translateY(0)scale(1); } 100% { opacity: 0; transform: translateY(100%)scale(.95); } } @keyframes snackbar-module-scss-module__jaXICq__slideInBounce { 0% { opacity: 0; transform: translateY(100%)scale(.9); } 60% { opacity: 1; transform: translateY(-8px)scale(1.02); } 100% { opacity: 1; transform: translateY(0)scale(1); } } @keyframes snackbar-module-scss-module__jaXICq__iconSwing { 0% { transform: rotate(0); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-8deg); } 50% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 70% { transform: rotate(2deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0); } } /*# sourceMappingURL=_0tg37ea._.css.map*/