:root {
   /* colors */
   --flixy-black: #1a1a1a;
   --flixy-black-100: #353535;
   --flixy-white: #ecf2f3;
   --flixy-white-100: #f8fbfc;
   --flixy-primary: #fe2a1b;
   --flixy-primary-100: #eb3c30;
   --flixy-gray: #e6e6e6;
   
   /* Daisy UI */

   --flixy-ds-base-content: oklch(84.87% 0 0);
   --flixy-ds-color-primary: var(--flixy-primary);
   --flixy-ds-base-100: oklch(24.353% 0 0);
   --flixy-ds-base-200: oklch(22.648% 0 0);
   --flixy-ds-base-300: oklch(20.944% 0 0);
   --flixy-ds-color-neutral: oklch(27.441% 0.013 253.041);
   --flixy-ds-neutral-content: oklch(85.488% 0.002 253.041);
   --flixy-ds-color-success: oklch(70.226% 0.094 156.596);
   --flixy-ds-color-success-content: oklch(14.045% 0.018 156.596);
   --flixy-ds-color-info: oklch(62.616% 0.143 240.033);
   --flixy-ds-color-info-content: oklch(12.523% 0.028 240.033);
   --flixy-ds-color-warning: oklch(77.482% 0.115 81.519);
   --flixy-ds-color-warning-content: oklch(15.496% 0.023 81.519);
   --flixy-ds-color-error: oklch(51.61% 0.146 29.674);
   --flixy-ds-color-error-content: oklch(90.322% 0.029 29.674);

   /* layout */
   --background: var(--flixy-black);
   --foreground: oklch(var(--bc));
   
   --flixy-default-bg-input: #303131;
   --flixy-default-b-input: #303131;
   --flixy-default-text-input: #f8fbfc;
   --flixy-default-text-secondary: #8f8f8f;
   
   --flixy-default-label-color: --color-gray-200;
   --flixy-color-primary: var(--flixy-primary);
   
   /* defaults */
   --text-default: var(--flixy-white);

   /* header */
   --h-header: 60px;
   --bg-header: var(--flixy-black);
   --border-header: var(--flixy-black-100);
   --text-header: var(--flixy-white);
   --text-hover-header: var(--flixy-primary);
   --youflix-logo-size: 40px;
   /* navigation */
   --text-navigation-item: var(--flixy-white);
   --text-hover-navigation-item: var(--flixy-primary-100);

   /* login */
   --bg-login-card: var(--flixy-black);
   --b-login-card: var(--flixy-black-100);
   --text-login-card: var(--flixy-white);
   
   --bg-login-forecard: #f73737;
   --b-login-forecard: #f73737;
   --text-login-forecard: var(--flixy-white);
   
   --bg-login-button: var(--flixy-white-100);
   --b-login-button: var(--flixy-white);
   --text-login-button: var(--flixy-black);
   --bg-login-button-hover: var(--flixy-white);
   
   --login-divider: var(--flixy-white);
   
   --h-login-logo: 60px;
   
   --bg-input-login-email: var(--flixy-default-bg-input);
   --text-input-login-email: var(--flixy-default-text-input);
   --bg-input-login-password: var(--flixy-default-bg-input);
   --text-input-login-password: var(--flixy-default-text-input);

   /* register */
   --bg-register-card: var(--flixy-black);
   --b-register-card: var(--flixy-black-100);
   --text-register-card: var(--flixy-white);
   --bg-register-forecard: #f73737;
   --b-register-forecard: #f73737;
   --text-register-forecard: var(--flixy-white);
   --bg-register-button: var(--flixy-white-100);
   --b-register-button: var(--flixy-white);
   --text-register-button: var(--flixy-black);
   --bg-register-button-hover: var(--flixy-white);
   --register-divider: var(--flixy-white);

   /* google button */
   --text-google: var(--flixy-white);
   --text-hover-google: var(--flixy-primary);
   --bg-google: hsla(0, 0%, 100%, 0);
   --bg-hover-google: var(--flixy-black-100);
   --b-google: var(--flixy-black-100);
   --b-hover-google: var(--flixy-black-100);

   /* profile */
   --text-profile: var(--flixy-white);
   --text-hover-profile: var(--flixy-primary);
   --b-profile: var(--flixy-black-100);
   /* menu profile */
   --text-menu-burger: var(--flixy-white);
   --bg-menu-profile: var(--flixy-black);
   --bg-hover-menu-profile: var(--flixy-primary-100);
   --text-menu-profile: var(--flixy-white);
   /* hero section */
   --text-video-controls: var(--flixy-white);
   --text-hs-title: var(--flixy-white);
   --text-hs-subtitle: var(--flixy-white);
   --bg-hs-cta: var(--flixy-primary);
   --text-hs-cta: var(--flixy-white);
   --bg-hs-hover-cta: var(--flixy-primary-100);
   /* vitrine container */
   --bg-vitrine: var(--flixy-white);
   --text-vitrine-title: var(--flixy-white);
   /* bar progress */
   --bg-course-barprogress: var(--flixy-gray);
   --b-course-barprogress: var(--flixy-black);

   /* footer */
   --b-footer: var(--flixy-black-100);
   --bg-footer: var(--background);
   --text-footer: var(--flixy-white);

   /* faq */
   --text-faq-title: var(--flixy-black);
   --text-faq-question: var(--flixy-black);
   --text-faq-answer: var(--flixy-black);
   --bg-faq-accordion: var(--flixy-white);
   --b-faq-accordion: var(--flixy-white);
   --bg-faq: transparent;

   /* course */
   --text-course-title: var(--flixy-white);
   --text-course-description: var(--flixy-white);
   --text-course-lesson: var(--flixy-white);
   --text-course-lesson-hover: var(--flixy-black-100);
   --text-course-lesson-disabled: var(--flixy-gray);
   --bg-course-lesson: transparent;
   --bg-course-lesson-hover: var(--flixy-white-100);
   --text-course-done: #00a96e;
   --text-hover-course-todo: #00a96e;
   --b-course-done: #00a96e;
   --text-course-todo: var(--flixy-white);
   --text-hover-course-todo: var(--flixy-black-100);
   --b-course-todo: var(--flixy-white);
   --card-shadow-color: #252525;

   /* markdown */
   --text-markdown: var(--flixy-white);
   --h1-mb-markdown: 0.5rem;
   --h2-mb-markdown: 0.5rem;
   --p-mb-markdown: 0.5rem;
   --ul-mb-markdown: 0.5rem;
   --li-mb-markdown: 0.5rem;
   --strong-mb-markdown: 0.5rem;
   --a-mb-markdown: 0.5rem;

   /* vitrine timeline */
   --text-course-showcase-title: var(--flixy-white);
   --text-course-modulo-title: var(--flixy-white);
   --text-course-modulo-title-sel: var(--flixy-primary);
   --text-course-modulo-icon-check: var(--flixy-white);
   --text-course-modulo-icon-play: var(--flixy-white);
   --b-course-timeline: var(--flixy-black-100);

   /* images uploading */
   --bg-imagesupload-delete-button: var(--flixy-white);
}

.flixy-file-input-primary {
	--btn-color: var(--flixy-default-bg-input);
    &::file-selector-button {
        color: var(--flixy-default-text-input);
    }
    &, &:focus, &:focus-within {
        --input-color: var(--flixy-default-bg-input);
    }
}

.flixy-file-input {
	&:focus {
        --input-color: var(--flixy-default-text-input);
        box-shadow: 0 1px color-mix(in oklab, var(--flixy-default-bg-input) 10%, #0000);
        outline: 2px solid var(--flixy-default-bg-input);
        outline-offset: 2px;
        isolation: isolate;
    }
}

.timeline-progress::-webkit-progress-value {
   background-color: var(--flixy-white);
}

.timeline-progress {
   background-color: var(--flixy-black-100);
}

.flixy-vitrina-container > div:first-child {
   margin-top: 1rem;
}