@layer base{:root{--klerosUIComponentsPrimaryPurple: #4d00b4;--klerosUIComponentsSecondaryPurple: #9013fe;--klerosUIComponentsMediumPurple: #f8f1ff;--klerosUIComponentsLightPurple: #fbf9fe;--klerosUIComponentsPrimaryBlue: #009aff;--klerosUIComponentsSecondaryBlue: #7bcbff;--klerosUIComponentsMediumBlue: #f0f9ff;--klerosUIComponentsLightBlue: #fcfeff;--klerosUIComponentsPrimaryText: #333333;--klerosUIComponentsSecondaryText: #999999;--klerosUIComponentsStroke: #e5e5e5;--klerosUIComponentsLightGrey: #fafafa;--klerosUIComponentsWhiteBackground: #ffffff;--klerosUIComponentsLightBackground: #fafbfc;--klerosUIComponentsDefaultShadow: #00000002;--klerosUIComponentsHoveredShadow: #00000002;--klerosUIComponentsSuccess: #00c42b;--klerosUIComponentsSuccessLight: #f0fbf2;--klerosUIComponentsWarning: #ff9900;--klerosUIComponentsWarningLight: #fff9f0;--klerosUIComponentsError: #f60c36;--klerosUIComponentsErrorLight: #fef0f3;--klerosUIComponentsTint: #d14eff;--klerosUIComponentsTintMedium: #fcf4ff;--klerosUIComponentsTintPurple: #f4f0fa;--klerosUIComponentsTransitionSpeed: .25s;--klerosUIComponentsBaseRadius: 3px}:root.dark{--klerosUIComponentsName: dark;--klerosUIComponentsPrimaryPurple: #7e1bd4;--klerosUIComponentsSecondaryPurple: #b45fff;--klerosUIComponentsMediumPurple: #390f6c;--klerosUIComponentsLightPurple: #fcfbff;--klerosUIComponentsPrimaryBlue: #6cc5ff;--klerosUIComponentsSecondaryBlue: #a5dbff;--klerosUIComponentsMediumBlue: #2e206c;--klerosUIComponentsLightBlue: #2a1260;--klerosUIComponentsPrimaryText: #daf0ff;--klerosUIComponentsSecondaryText: #becce5;--klerosUIComponentsStroke: #392c74;--klerosUIComponentsLightGrey: #2d1865;--klerosUIComponentsWhiteBackground: #220050;--klerosUIComponentsLightBackground: #1b003f;--klerosUIComponentsDefaultShadow: #00000000;--klerosUIComponentsHoveredShadow: #42498f80;--klerosUIComponentsSuccess: #65dc7f;--klerosUIComponentsSuccessLight: #32355b;--klerosUIComponentsWarning: #ffc46b;--klerosUIComponentsWarningLight: #451f54;--klerosUIComponentsError: #ff5a78;--klerosUIComponentsErrorLight: #360652;--klerosUIComponentsTint: #ddb6ff;--klerosUIComponentsTintMedium: #401d6c;--klerosUIComponentsTintPurple: #2f0960;--klerosUIComponentsTransitionSpeed: .25s}}@theme{ --breakpoint-lg: 56.25rem; --color-klerosUIComponentsPrimaryPurple: var( --klerosUIComponentsPrimaryPurple ); --color-klerosUIComponentsSecondaryPurple: var( --klerosUIComponentsSecondaryPurple ); --color-klerosUIComponentsMediumPurple: var(--klerosUIComponentsMediumPurple); --color-klerosUIComponentsLightPurple: var(--klerosUIComponentsLightPurple); --color-klerosUIComponentsPrimaryBlue: var(--klerosUIComponentsPrimaryBlue); --color-klerosUIComponentsSecondaryBlue: var( --klerosUIComponentsSecondaryBlue ); --color-klerosUIComponentsMediumBlue: var(--klerosUIComponentsMediumBlue); --color-klerosUIComponentsLightBlue: var(--klerosUIComponentsLightBlue); --color-klerosUIComponentsPrimaryText: var(--klerosUIComponentsPrimaryText); --color-klerosUIComponentsSecondaryText: var( --klerosUIComponentsSecondaryText ); --color-klerosUIComponentsStroke: var(--klerosUIComponentsStroke); --color-klerosUIComponentsLightGrey: var(--klerosUIComponentsLightGrey); --color-klerosUIComponentsWhiteBackground: var( --klerosUIComponentsWhiteBackground ); --color-klerosUIComponentsLightBackground: var( --klerosUIComponentsLightBackground ); --color-klerosUIComponentsDefaultShadow: var( --klerosUIComponentsDefaultShadow ); --color-klerosUIComponentsHoveredShadow: var( --klerosUIComponentsHoveredShadow ); --color-klerosUIComponentsSuccess: var(--klerosUIComponentsSuccess); --color-klerosUIComponentsSuccessLight: var(--klerosUIComponentsSuccessLight); --color-klerosUIComponentsWarning: var(--klerosUIComponentsWarning); --color-klerosUIComponentsWarningLight: var(--klerosUIComponentsWarningLight); --color-klerosUIComponentsError: var(--klerosUIComponentsError); --color-klerosUIComponentsErrorLight: var(--klerosUIComponentsErrorLight); --color-klerosUIComponentsTint: var(--klerosUIComponentsTint); --color-klerosUIComponentsTintMedium: var(--klerosUIComponentsTintMedium); --color-klerosUIComponentsTintPurple: var(--klerosUIComponentsTintPurple); --color-klerosUIComponentsTransitionSpeed: var( --klerosUIComponentsTransitionSpeed ); --radius-base: var(--klerosUIComponentsBaseRadius); --default-transition-duration: var(--klerosUIComponentsTransitionSpeed); @keyframes fadeIn { 0% { opacity: 0; } 50% { opacity: .5; } 100% { opacity: 1; } } --animate-fade-in: fadeIn .3s ease-in-out; @keyframes fadeOut { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 0; } } --animate-fade-out: fadeOut .3s ease-in-out; @keyframes bounceIn { 0% { transform: translateY(100%); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0); } } --animate-bounce-in: bounceIn .2s ease-out; @keyframes scaleIn { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } } --animate-scale-in: scaleIn var(--klerosUIComponentsTransitionSpeed) ease; @keyframes scaleOut { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } } --animate-scale-out: slideOut var(--klerosUIComponentsTransitionSpeed) ease; @keyframes progressFill { 0% { stroke-dasharray: 0 200%; } } --animate-progress-fill: progressFill 1s ease-out forwards; @keyframes breathe { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } --animate-breathing: breathe 2s ease-out infinite normal; @keyframes loading { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } } --animate-loading: loading 2s ease-in-out infinite normal; --ease-ease: cubic-bezier(.25, .1, .25, 1); --shadow-default: 0px 2px 3px var(--klerosUIComponentsDefaultShadow); --shadow-input: 0px 0px 6px var(--klerosUIComponentsPrimaryBlue); }