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

:root body.dark {
    --ion-background-color: #1e1e1e;
    --ion-background-color-rgb: 18,18,18;

    --ion-text-color: #ffffff;
    --ion-text-color-rgb: 255,255,255;

    --ion-border-color: #3f3f3f;

    --ion-color-step-50: #1e1e1e;
    --ion-color-step-100: #2a2a2a;
    --ion-color-step-150: #363636;
    --ion-color-step-200: #414141;
    --ion-color-step-250: #4d4d4d;
    --ion-color-step-300: #595959;
    --ion-color-step-350: #656565;
    --ion-color-step-400: #717171;
    --ion-color-step-450: #7d7d7d;
    --ion-color-step-500: #898989;
    --ion-color-step-550: #949494;
    --ion-color-step-600: #a0a0a0;
    --ion-color-step-650: #acacac;
    --ion-color-step-700: #b8b8b8;
    --ion-color-step-750: #c4c4c4;
    --ion-color-step-800: #d0d0d0;
    --ion-color-step-850: #dbdbdb;
    --ion-color-step-900: #e7e7e7;
    --ion-color-step-950: #f3f3f3;

    --light: var(--black);
    --dark: var(--gray-lighter);

    @each $color-name, $value in $colors-dark {
        @include generate-color($color-name);
    }

    --ion-tab-bar-background: #1f1f1f;

    --ion-item-background: #1e1e1e;

    --ion-card-background: #1c1c1d;

    ion-content {
        --background: var(--ion-background-color);
        --background-lighter: var(--gray-darker);
        --contrast-background: var(--ion-background-color);
    }

    --core-tabs-background: var(--custom-tabs-background, #3a3a3a);
    --core-tab-background: var(--custom-tab-background, #3a3a3a);
    --core-tab-color: var(--custom-tab-color, var(--white));
    --core-tab-border-color: var(--custom-tab-border-color, var(--gray-light));

    core-progress-bar {
        --text-color: var(--custom-progress-text-color, var(--gray-lighter));
    }

    ion-item-divider {
        --background: var(--black);
        --color: var(--white);
        .item-detail-icon {
            color: var(--white);
        }
    }

    --core-button-select-background: var(--custom-button-select-background, #3a3a3a);

    --core-login-background: var(--custom-login-background, #3a3a3a);
    --core-login-text-color: var(--custom-login-text-color, white);

    --core-question-correct-color: var(--green-light);
    --core-question-correct-color-bg: var(--green-dark);
    --core-question-incorrect-color: var(--red);
    --core-question-incorrect-color-bg: var(--red-dark);
    --core-question-feedback-color: var(--yellow-light);
    --core-question-feedback-color-bg: var(--yellow-dark);
    --core-question-warning-color: var(--red);
    --core-question-saved-color-bg: var(--gray-dark);

    --core-question-state-correct-color: var(--green-dark);
    --core-question-state-partial-color: var(--yellow-dark);
    --core-question-state-partial-text: var(--yellow);
    --core-question-state-incorrect-color: var(--red-dark);

    --core-question-feedback-color: var(--yellow-light);
    --core-question-feedback-background-color: var(--yellow-dark);

    --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);

    --addon-forum-border-color: var(--custom-forum-border-color, var(--gray-darker));
    --addon-forum-highlight-color: var(--custom-forum-highlight-color, var(--gray-dark));
}