/*
* Description: default tokens for mode & types for design system
* Author: C Studio
* Version: 1.0.0
* Update: 26-03-20
*/

:root,
[data-mode="light"] {
    --mode-selection-color: var(--selection-color-light);
    --mode-selection-bg: var(--selection-bg-light);
    --mode-scrollbar-active: var(--scrollbar-active-light);
    --mode-scrollbar-track: var(--scrollbar-track-light);

    --mode-active: var(--active-light);
    --mode-active-bg: var(--active-light);
    --mode-active-hover: var(--active-light-hover);
    --mode-active-color: var(--active-color-light);
    --mode-check: var(--default-check-light);
    --mode-hover-bg: var(--default-hover-bg-light);

    /*DEFAULT*/
    --mode: var(--light);
    --mode-background: var(--mode);
    --mode-hover: var(--light-d);
    --mode-reverse: var(--dark);
    --mode-reverse-hover: var(--dark-l);

    /* OPACITY */
    --mode-opacity-0: var(--dark-t);
    --mode-opacity-1: var(--dark-o-1);
    --mode-opacity-2: var(--dark-o-2);
    --mode-opacity-3: var(--dark-o-3);
    --mode-opacity-4: var(--dark-o-4);
    --mode-opacity-5: var(--dark-o-5);
    --mode-opacity-6: var(--dark-o-6);
    --mode-opacity: var(--opacity-light);
    --mode-opacity-hover: var(--opacity-light-hover);
    --mode-opacity-active: var(--opacity-light-active);
    --mode-opacity-inactive: var(--opacity-light-inactive);

    /* BACKGROUND */
    --mode-body-bg: var(--body-bg-light);
    --mode-concave-bg: var(--section-bg-light);
    --mode-topbar-bg: var(--topbar-bg-light);
    --mode-header-bg: var(--header-bg-light);
    --mode-section-bg: var(--section-bg-light);
    --mode-footer-bg: var(--footer-bg-light);
    --mode-teaser-bg: var(--teaser-bg-light);

    /* COLOR */
    --mode-topbar-color: var(--topbar-color-light);
    --mode-header-color: var(--header-color-light);
    --mode-copy-color: var(--copy-color-light);
    --mode-muted-color: var(--copy-muted-light);
    --mode-headline-color: var(--headline-color-light);
    --mode-hyperlink-color: var(--hyperlink-color-light);
    --mode-list-highlight-color: var(--list-highlight-color-light);
    --mode-list-highlight-bg: var(--list-highlight-bg-light);
    --mode-list-border-color: var(--list-border-color-light);
    --mode-list-icon-check: var(--list-icon-check-light);
    --mode-label-color: var(--label-color-light);
    --mode-placeholder-color: var(--placeholder-light);

    --mode-highlight-bg: var(--highlight-bg-light);
    --mode-highlight-hover: var(--highlight-bg-light-hover);
    --mode-highlight-color: var(--highlight-color-light);
    --mode-highlight-color-hover: var(--highlight-color-light-hover);
    --mode-icon-fill: var(--icon-fill-light);

    /* BORDER */
    --mode-border-color: var(--border-color-light);
    --mode-border-opacity: var(--border-opacity-light);
    --mode-border-color-focus: var(--border-color-light-active);
    --mode-border-color-active: var(--border-color-light-active);

    /* CONTROLS */
    --mode-control-color: var(--control-color-light);
    --mode-control-bg: var(--control-bg-light);

    /* TYPE */
    --type01-bg: var(--type01-light-bg);
    --type02-bg: var(--type02-light-bg);
    --type03-bg: var(--type03-light-bg);
    --type04-bg: var(--type04-light-bg);

    /* ACCENT */
    --accent01-bg: var(--accent01-light-bg);
    --accent02-bg: var(--accent02-light-bg);
    --accent03-bg: var(--accent03-light-bg);
}

/* Dark Mode Variables */
[data-mode="dark"] {
    --mode-selection-color: var(--selection-color-dark);
    --mode-selection-bg: var(--selection-bg-dark);
    --mode-scrollbar-active: var(--scrollbar-active-dark);
    --mode-scrollbar-track: var(--scrollbar-track-dark);

    --mode-active: var(--active-dark);
    --mode-active-bg: var(--active-dark);
    --mode-active-hover: var(--active-dark-hover);
    --mode-active-color: var(--active-color-dark);
    --mode-check: var(--default-check-dark);
    --mode-hover-bg: var(--default-hover-bg-dark);

    /*DEFAULT*/
    --mode: var(--dark);
    --mode-background: var(--mode);
    --mode-hover: var(--dark-l);
    --mode-reverse: var(--light);
    --mode-reverse-hover: var(--light-d);

    /* OPACITY */
    --mode-opacity-0: var(--light-t);
    --mode-opacity-1: var(--light-o-1);
    --mode-opacity-2: var(--light-o-2);
    --mode-opacity-3: var(--light-o-3);
    --mode-opacity-4: var(--light-o-4);
    --mode-opacity-5: var(--light-o-5);
    --mode-opacity-6: var(--light-o-6);
    --mode-opacity: var(--opacity-dark);
    --mode-opacity-hover: var(--opacity-dark-hover);
    --mode-opacity-active: var(--opacity-dark-active);
    --mode-opacity-inactive: var(--opacity-dark-inactive);

    /* BACKGROUND */
    --mode-body-bg: var(--body-bg-dark);
    --mode-concave-bg: var(--section-bg-dark);
    --mode-topbar-bg: var(--topbar-bg-dark);
    --mode-header-bg: var(--header-bg-dark);
    --mode-section-bg: var(--section-bg-dark);
    --mode-footer-bg: var(--footer-bg-dark);
    --mode-teaser-bg: var(--teaser-bg-dark);

    /* COLOR */
    --mode-topbar-color: var(--topbar-color-dark);
    --mode-header-color: var(--header-color-dark);
    --mode-copy-color: var(--copy-color-dark);
    --mode-muted-color: var(--copy-muted-dark);
    --mode-headline-color: var(--headline-color-dark);
    --mode-hyperlink-color: var(--hyperlink-color-dark);
    --mode-list-highlight-color: var(--list-highlight-color-dark);
    --mode-list-highlight-bg: var(--list-highlight-bg-dark);
    --mode-list-border-color: var(--list-border-color-dark);
    --mode-list-icon-check: var(--list-icon-check-dark);
    --mode-label-color: var(--label-color-dark);
    --mode-placeholder-color: var(--placeholder-dark);

    --mode-highlight-bg: var(--highlight-bg-dark);
    --mode-highlight-hover: var(--highlight-bg-dark-hover);
    --mode-highlight-color: var(--highlight-color-dark);
    --mode-highlight-color-hover: var(--highlight-color-dark-hover);
    --mode-icon-fill: var(--icon-fill-dark);

    /* BORDER */
    --mode-border-color: var(--border-color-dark);
    --mode-border-opacity: var(--border-opacity-dark);
    --mode-border-color-focus: var(--border-color-dark-active);
    --mode-border-color-active: var(--border-color-dark-active);

    /* CONTROLS */
    --mode-control-color: var(--control-color-dark);
    --mode-control-bg: var(--control-bg-dark);

    /* TYPE */
    --type01-bg: var(--type01-dark-bg);
    --type02-bg: var(--type02-dark-bg);
    --type03-bg: var(--type03-dark-bg);
    --type04-bg: var(--type04-dark-bg);

    /* ACCENT */
    --accent01-bg: var(--accent01-dark-bg);
    --accent02-bg: var(--accent02-dark-bg);
    --accent03-bg: var(--accent03-dark-bg);
}

/*TYPE*/
[data-type="type00"] {
    --mode-section-bg: var(--mode-body-bg);
}
[data-type="type01"] {
    --mode-section-bg: var(--type01-bg);
}

[data-type="type02"] {
    --mode-section-bg: var(--type02-bg);
}

[data-type="type03"] {
    --mode-section-bg: var(--type03-bg);
}

[data-type="type04"] {
    --mode-section-bg: var(--type04-bg);
}

[data-mode="dark"][data-type="type00"] {
    --mode-section-bg: var(--mode-body-bg);
}

[data-mode="dark"][data-type="type01"] {
    --mode-section-bg: var(--type01-dark-bg);
}

[data-mode="dark"][data-type="type02"] {
    --mode-section-bg: var(--type02-dark-bg);
}

[data-mode="dark"][data-type="type03"] {
    --mode-section-bg: var(--type03-dark-bg);
}

[data-mode="dark"][data-type="type04"] {
    --mode-section-bg: var(--type04-dark-bg);
}

/*ACCENT*/
[data-accent] {
    --mode-list-highlight-bg: var(--accent-bg);
    --mode-list-highlight-color: var(--accent-color);
}
[data-accent="accent01"] {
    --accent-bg: var(--accent01-light-bg);
    --accent-color: var(--accent01-light-color);
    --accent-opacity: var(--accent01-o);
}

[data-accent="accent02"] {
    --accent-bg: var(--accent02-light-bg);
    --accent-color: var(--accent02-light-color);
    --accent-opacity: var(--accent02-o);
}

[data-accent="accent03"] {
    --accent-bg: var(--accent03-light-bg);
    --accent-color: var(--accent03-light-color);
    --accent-opacity: var(--accent03-o);
}

[data-mode="dark"][data-accent="accent01"] {
    --accent-bg: var(--accent01-dark-bg);
    --accent-color: var(--accent01-dark-color);
}

[data-mode="dark"][data-accent="accent02"] {
    --accent-bg: var(--accent02-dark-bg);
    --accent-color: var(--accent02-dark-color);
}

[data-mode="dark"][data-accent="accent03"] {
    --accent-bg: var(--accent03-dark-bg);
    --accent-color: var(--accent03-dark-color);
}

/*CONCAVE*/
[data-concave="type00"] {
    --mode-concave-bg: var(--mode);
}
[data-concave="type01"] {
    --mode-concave-bg: var(--type01-bg);
}

[data-concave="type02"] {
    --mode-concave-bg: var(--type02-bg);
}

[data-concave="type03"] {
    --mode-concave-bg: var(--type03-bg);
}

[data-concave="type04"] {
    --mode-concave-bg: var(--type04-bg);
}

[data-concave-mode="dark"][data-concave="type00"],
[data-mode="dark"][data-concave="type00"] {
    --mode-concave-bg: var(--type01-dark-bg);
}

[data-concave-mode="dark"][data-concave="type01"],
[data-mode="dark"][data-concave="type01"] {
    --mode-concave-bg: var(--mode);
}

[data-concave-mode="dark"][data-concave="type02"],
[data-mode="dark"][data-concave="type02"] {
    --mode-concave-bg: var(--type02-dark-bg);
}

[data-concave-mode="dark"][data-concave="type03"],
[data-mode="dark"][data-concave="type03"] {
    --mode-concave-bg: var(--type03-dark-bg);
}

[data-concave-mode="dark"][data-concave="type04"],
[data-mode="dark"][data-concave="type04"] {
    --mode-concave-bg: var(--type04-dark-bg);
}