/*
 * App LIGHT theme CSS
 * ----------------------------------------------------------------------------
 * Ionic Variables and Theming. For more info, please see:
 * http://ionicframework.com/docs/theming/
 */

:root {

    // Color palette
    --black:           #{$black}; // Headings, standard text.
    --gray-darker:     #{$gray-darker};
    --gray-dark:       #{$gray-dark};
    --gray:            #{$gray};
    --gray-light:      #{$gray-light};
    --gray-lighter:    #{$gray-lighter};
    --white:           #{$white};

    --blue:            #{$blue};
    --turquoise:       #{$turquoise};
    --green:           #{$green};
    --red:             #{$red};
    --orange:          #{$orange};
    --yellow:          #{$yellow};
    --purple:          #{$purple};

    --core-color:       #{$core-color};
    --core-online-color: #{$core-online-color};

    // Named Color Variables
    --primary: var(--core-color);
    --secondary: var(--blue);
    --tertiary: var(--turquoise);
    --success: var(--green);
    --danger: var(--red);
    --warning: var(--yellow);
    --light: var(--gray-lighter);
    --dark: var(--black);
    --medium: var(--gray-light);
    --light: var(--gray-lighter);
    --primary: var(--core-color);

    --ion-color-primary: var(--primary);
    --ion-color-primary-rgb: 249,128,18;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255,255,255;
    --ion-color-primary-shade: #db7110;
    --ion-color-primary-tint: #fa8d2a;

    --ion-color-secondary: var(--secondary);
    --ion-color-secondary-rgb: 0,100,210;
    --ion-color-secondary-contrast: #ffffff;
    --ion-color-secondary-contrast-rgb: 255,255,255;
    --ion-color-secondary-shade: #0058b9;
    --ion-color-secondary-tint: #1a74d7;

    --ion-color-tertiary: var(--tertiary);
    --ion-color-tertiary-rgb: 0,121,130;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255,255,255;
    --ion-color-tertiary-shade: #006a72;
    --ion-color-tertiary-tint: #1a868f;

    --ion-color-success: var(--success);
    --ion-color-success-rgb: 94,129,0;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 255,255,255;
    --ion-color-success-shade: #537200;
    --ion-color-success-tint: #6e8e1a;

    --ion-color-warning: var(--warning);
    --ion-color-warning-rgb: 251,173,26;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0,0,0;
    --ion-color-warning-shade: #dd9817;
    --ion-color-warning-tint: #fbb531;

    --ion-color-danger: var(--danger);
    --ion-color-danger-rgb: 203,61,77;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255,255,255;
    --ion-color-danger-shade: #b33644;
    --ion-color-danger-tint: #d0505f;

    --ion-color-dark: var(--dark);
    --ion-color-dark-rgb: 58,58,58;
    --ion-color-dark-contrast: #ffffff;
    --ion-color-dark-contrast-rgb: 255,255,255;
    --ion-color-dark-shade: #333333;
    --ion-color-dark-tint: #4e4e4e;

    --ion-color-medium: var(--medium);
    --ion-color-medium-rgb: 158,158,158;
    --ion-color-medium-contrast: #000000;
    --ion-color-medium-contrast-rgb: 0,0,0;
    --ion-color-medium-shade: #8b8b8b;
    --ion-color-medium-tint: #a8a8a8;

    --ion-color-light: var(--light);
    --ion-color-light-rgb: 245,245,245;
    --ion-color-light-contrast: #000000;
    --ion-color-light-contrast-rgb: 0,0,0;
    --ion-color-light-shade: #d8d8d8;
    --ion-color-light-tint: #f6f6f6;

    --ion-text-color: var($text-color);
    --ion-text-color-rgb: 58,58,58;
    --ion-card-color: var(--ion-text-color);

    --text-hightlight-background-color: var(--custom-text-hightlight-background-color, #99c1ed);

    ion-content {
        --background: #{$background-color};
        --background-lighter: var(--gray-lighter);
        --contrast-background: var(--white);
    }

    ion-tab-bar {
        --background: var(--custom-bottom-tabs-background, var(--gray-darker));
        --color: var(--custom-bottom-tabs-color, var(--white));
    }

    --core-toolbar-button-image-width: var(--custom-toolbar-button-image-width, 32px);
    --ion-statusbar-background: var(--custom-toolbar-background, var(--ion-color-primary));
    ion-toolbar {
        --color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
        --background: var(--ion-statusbar-background);
        ion-button {
            --ion-toolbar-color: transparent;
        }

        ion-spinner {
            --color: var(--custom-toolbar-color, var(--ion-color-primary-contrast));
        }
    }

    ion-action-sheet {
        --action-sheet-shadow-color: var(--custom--action-sheet-shadow-color, 0, 0, 0, 1);
        --button-color-selected: var(--custom--action-sheet-selected-color, var(--core-color));
        --title-border-color: var(--custom-title-border-color, var(--gray));

        @media (min-height: 500px) {
            --max-height: 50%;
            --height: 100%;
        }

        .action-sheet-cancel {
            --button-color: var(--ion-color-danger);
        }
    }

    --core-tabs-background: var(--custom-tabs-background, var(--white));
    --core-tab-background: var(--custom-tab-background, var(--core-tabs-background));
    --core-tab-color: var(--custom-tab-color, var(--gray-dark));
    --core-tab-border-color: var(--custom-tab-border-color, var(--gray));
    --core-tab-color-active: var(--custom-tab-color-active, var(--core-color));
    --core-tab-border-color-active: var(--custom-tab-border-color-active, var(--core-color));

    core-tabs, core-tabs-outlet {
        --background: var(--core-tabs-background);
        ion-slide {
            --background: var(--core-tab-background);
            --color: var(--core-tab-color);
            --border-color: var(--core-tab-border-colo);
            --color-active: var(--core-tab-color-active);
            --border-color-active: var(--core-tab-border-color-active);
        }
    }

    ion-spinner {
        --color: var(--core-color);
    }

    core-progress-bar {
        --height: var(--custom-progress-bar-height, 8px);
        --color: var(--custom-progress-color, var(--core-color));
        --text-color: var(--custom-progress-text-color, var(--gray-darker));
        --background: var(--custom-progress-background, var(--gray-lighter));
    }

    core-block-course-blocks {
        --side-blocks-max-width: var(--custom-side-blocks-max-width, 30%);
        --side-blocks-min-width: var(--custom-side-blocks-min-width, 280px);
    }

    ion-item-divider {
        --background: var(--gray-lighter);
    }

    --core-button-select-background: var(--custom-button-select-background, var(--ion-color-primary-contrast));

    --selected-item-color: var(--custom-selected-item-color, var(--core-color));
    --selected-item-border-width: var(--custom-selected-item-border-width, 5px);

    --core-login-background: var(--custom-login-background, var(--white));
    --core-login-text-color: var(--custom-login-text-color, var(--black));

    --core-course-color-0: var(--custom-course-color-0, #81ecec);
    --core-course-color-1: var(--custom-course-color-1, #74b9ff);
    --core-course-color-2: var(--custom-course-color-2, #a29bfe);
    --core-course-color-3: var(--custom-course-color-3, #dfe6e9);
    --core-course-color-4: var(--custom-course-color-4, #00b894);
    --core-course-color-5: var(--custom-course-color-5, #0984e3);
    --core-course-color-6: var(--custom-course-color-6, #b2bec3);
    --core-course-color-7: var(--custom-course-color-7, #fdcb6e);
    --core-course-color-8: var(--custom-course-color-9, #fd79a8);
    --core-course-color-9: var(--custom-course-color-90, #6c5ce7);
    --core-star-color: var(--custom-star-color, var(--core-color));

    --core-large-avatar-size:  var(--custom-large-avatar-size, 90px);
    --core-avatar-size:  var(--custom-avatar-size, 40px);

    --core-send-message-input-background: var(--custom-send-message-input-background, var(--gray));
    --core-send-message-input-color: var(--custom-send-message-input-color, var(--black));

    --addon-calendar-event-category-color: var(--custom-calendar-event-category-color, var(--purple));
    --addon-calendar-event-course-color: var(--custom-calendar-event-course-color, var(--red));
    --addon-calendar-event-group-color: var(--custom-calendar-event-group-color, var(--yellow));
    --addon-calendar-event-user-color: var(--custom-calendar-event-user-color, var(--blue));
    --addon-calendar-event-site-color: var(--custom-calendar-event-site-color, var(--green));
    --addon-calendar-today-bgcolor: var(--custom-calendar-today-bgcolor, var(--core-color));
    --addon-calendar-today-color: var(--custom-calendar-today-color, var(--white));
    --addon-calendar-border-color: var(--custom-calendar-border-color, var(--gray));

    --addon-messages-message-bg: var(--custom-messages-message-bg, var(--white));
    --addon-messages-message-activated-bg: var(--custom-messages-message-activated-bg, var(--gray-light));
    --addon-messages-message-note-text: var(--custom-messages-message-note-text, var(--gray-dark));
    --addon-messages-message-note-font-size: var(--custom-messages-message-note-font-size, 75%);
    --addon-messages-message-mine-bg: var(--custom-messages-message-mine-bg, var(--gray-light));
    --addon-messages-message-mine-activated-bg: var(--custom-messages-message-mine-activated-bg, var(--gray));
    --addon-messages-avatar-size: var(--custom-messages-avatar-size, 30px);
    --addon-messages-discussion-badge: var(--custom-messages-discussion-badge, var(--core-color));
    --addon-messages-discussion-badge-text: var(--custom-messages-discussion-badge-text, var(--white));

    --drop-shadow: var(--custom-drop-shadow, 0, 0, 0, 0.2);

    --core-menu-box-shadow-end: var(--custom-menu-box-shadow-end, -4px 0px 16px rgba(0, 0, 0, 0.18));
    --core-menu-box-shadow-start: var(--custom-menu-box-shadow-start, 4px 0px 16px rgba(0, 0, 0, 0.18));
}