@import './colors.css';
@import './global.css';

:root {
    --ion-font-family: 'Work-Sans', sans-serif;
    --ion-font-family-secondary: 'Arial', sans-serif;

    font-size: 13px;

    --ion-color-primary: rgb(var(--adarma-primary));
    --ion-color-primary-contrast: rgb(var(--adarma-primary-foreground));
    --ion-color-primary-tint: var(--Teal-600);
    --ion-color-primary-shade: var(--Teal-800);

    --ion-color-secondary: rgb(var(--adarma-secondary));
    --ion-color-secondary-contrast: rgb(var(--adarma-secondary-foreground));

    --ion-color-tertiary: rgb(var(--adarma-tertiary));
    --ion-color-tertiary-contrast: rgb(var(--adarma-tertiary-foreground));

    --ion-color-success: rgb(var(--adarma-success));
    --ion-color-success-contrast: rgb(var(--adarma-success-foreground));

    --ion-color-warning: rgb(var(--adarma-warning));
    --ion-color-warning-contrast: rgb(var(--adarma-warning-foreground));

    --ion-color-warning-2: rgb(var(--adarma-warning-2));
    --ion-color-warning-2-contrast: rgb(var(--adarma-warning-2-foreground));

    --ion-color-danger: rgb(var(--adarma-danger));
    --ion-color-danger-contrast: rgb(var(--adarma-danger-foreground));

    --ion-color-light: rgb(var(--adarma-light));
    --ion-color-light-contrast: rgb(var(--adarma-light-foreground));
    --ion-color-light-shade: var(--Subtle-5);

    --ion-color-medium: rgb(var(--adarma-medium));
    --ion-color-medium-contrast: rgb(var(--adarma-medium-foreground));
    --ion-color-medium-shade: var(--Subtle-3);

    --ion-color-dark: rgb(var(--adarma-dark));
    --ion-color-dark-contrast: rgb(var(--adarma-dark-foreground));

    --ion-text-color: var(--Primary-Text);
    --ion-text-color-opposite: var(--White);
    --ion-text-color-secondary: var(--Secondary-Text);

    --ion-background-color: rgb(var(--adarma-background));
    --ion-background-color-opposite: rgb(var(--adarma-foreground));

    --ion-toolbar-background: var(--White);

    --ion-splash-text-color: var(--White);

    --ion-card-item-background: var(--Subtle-6);
    --ion-card-background: rgb(var(--adarma-card));
    --ion-card-subtitle: var(--ion-color-step-700);
    --ion-card-hover: var(--Subtle-5);

    --ion-active-menu-item-text: var(--ion-text-color);
    --ion-active-menu-item-background: var(--Subtle-6);

    --ion-tab-bar-background: var(--ion-toolbar-background);
    --ion-tab-background-hover-opacity: 10%;

    --ion-item-background: var(--White);

    --ion-dashboard-card-background: var(--White);

    --ion-accordion-header: var(--Subtle-6);
    --ion-accordion-header-hover: var(--Subtle-5);

    --svelecte-selected-text: var(--ion-text-color-opposite);
    --svelecte-selected-background: var(--ion-text-color);
    --svelecte-options-text: var(--Black);
    --svelecte-options-background: var(--Subtle-4);

    --Input-Line: rgb(216, 228, 234);
    --Input-Line-Hover: rgb(139, 158, 169);
    --Modal-Cancel: var(--Blue-800-Secondary);

    --toolbar-background: var(--adarma-teal);

    --ionic-input-line: var(--Input-Line);
    --ionic-input-line-hover: var(--Input-Line-Hover);

    --ionic-primary-link: var(--Teal-600);
    --ionic-secondary-link: var(--Blue-800-Secondary);
    --ionic-secondary-text: var(--ion-text-color);
    --ionic-alt-secondary: var(--Teal-100);
    --ionic-alt-primary: var(--Grey-6);

    --Primary-Text: var(--Black-tint);
    --Secondary-Text: var(--adarma-slate);

    --Subtle-1: var(--Grey-1);
    --Subtle-2: var(--Grey-2);
    --Subtle-3: var(--Grey-3);
    --Subtle-4: var(--Grey-4);
    --Subtle-5: var(--Grey-5);
    --Subtle-6: var(--Grey-6);

    --ion-color-step-50: #f4f4f5;
    --ion-color-step-100: #e9eaea;
    --ion-color-step-150: #dedfe0;
    --ion-color-step-200: #d3d5d6;
    --ion-color-step-250: #c8cacc;
    --ion-color-step-300: #bdbfc1;
    --ion-color-step-350: #b2b5b7;
    --ion-color-step-400: #a7aaad;
    --ion-color-step-450: #9ca0a2;
    --ion-color-step-500: #919598;
    --ion-color-step-550: #858a8e;
    --ion-color-step-600: #7a8083;
    --ion-color-step-650: #6f7579;
    --ion-color-step-700: #646b6f;
    --ion-color-step-750: #596065;
    --ion-color-step-800: #4e555a;
    --ion-color-step-850: #434b50;
    --ion-color-step-900: #384046;
    --ion-color-step-950: #2d363b;
}

body.dark {
    --ion-color-primary: rgb(var(--adarma-primary));
    --ion-color-primary-contrast: var(--Black);
    --ion-color-primary-tint: var(--Teal-500);
    --ion-color-primary-shade: var(--Teal-700);

    --ion-color-dark: var(--Black);

    --ion-color-light-shade: var(--Subtle-2);

    --ion-color-medium-shade: var(--ion-color-step-500);

    --ion-text-color: var(--Primary-Text);
    --ion-text-color-opposite: var(--adarma-slate);
    --ion-text-color-secondary: var(--Secondary-Text);

    --ion-background-color: var(--Subtle-6);
    --ion-background-color-opposite: var(--Subtle-1);

    --ion-toolbar-background: var(--Black-tint);

    --ion-card-item-background: var(--Subtle-6);
    --ion-card-background: var(--ion-toolbar-background);
    --ion-card-subtitle: var(--ion-color-step-850);
    --ion-card-hover: var(--ion-color-step-250);

    --ion-active-menu-item-text: var(--ion-text-color);
    --ion-active-menu-item-background: var(--Subtle-6);

    --ion-tab-bar-background: var(--ion-toolbar-background);
    --ion-tab-background-hover-opacity: 20%;

    --ion-item-background: var(--ion-toolbar-background);

    --ion-dashboard-card-background: var(--Subtle-5);
    --ion-dashboard-card-background: var(--Subtle-5);

    --ion-accordion-header: var(--Subtle-6);
    --ion-accordion-header-hover: var(--Subtle-5);

    --svelecte-selected-text: var(--ion-text-color-opposite);
    --svelecte-selected-background: var(--ion-text-color);
    --svelecte-options-text: var(--Black);

    --Modal-Cancel: var(--Teal-100);

    --ionic-input-line: var(--Input-Line-Hover);
    --ionic-input-line-hover: var(--Input-Line);

    --ionic-primary-link: var(--Teal-300);
    --ionic-secondary-link: rgb(206, 233, 255);
    --ionic-secondary-text: var(--Input-Line);
    --ionic-alt-secondary: var(--Blue-900);
    --ionic-alt-primary: var(--Grey-1);

    --Primary-Text: var(--White);
    --Secondary-Text: var(--Subtle-2);

    --Subtle-1: var(--Grey-6);
    --Subtle-2: var(--Grey-5);
    --Subtle-3: var(--Grey-4);
    --Subtle-4: var(--Grey-3);
    --Subtle-5: var(--Grey-2);
    --Subtle-6: var(--Grey-1);

    --ion-color-step-50: #293238;
    --ion-color-step-100: #31393f;
    --ion-color-step-150: #384046;
    --ion-color-step-200: #3f484d;
    --ion-color-step-250: #474f54;
    --ion-color-step-300: #4e565b;
    --ion-color-step-350: #555d62;
    --ion-color-step-400: #5c6469;
    --ion-color-step-450: #646b70;
    --ion-color-step-500: #6b7378;
    --ion-color-step-550: #727a7f;
    --ion-color-step-600: #7a8186;
    --ion-color-step-650: #81888d;
    --ion-color-step-700: #888f94;
    --ion-color-step-750: #90969b;
    --ion-color-step-800: #979da2;
    --ion-color-step-850: #9ea5a9;
    --ion-color-step-900: #a5acb0;
    --ion-color-step-950: #adb3b7;
}

.ion-color-warning-2 {
    --ion-color-base: var(--ion-color-warning-2) !important;
    --ion-color-contrast: var(--ion-color-warning-2-contrast) !important;
    /* --ion-color-shade: var(--ion-color-warning-2-shade) !important;
    --ion-color-tint: var(--ion-color-warning-2-tint) !important; */
}

ion-toggle {
    --track-background: var(--ion-color-step-350);
    --track-background-checked: var(--ion-color-primary);
}

/* This makes checkboxes in all forms more easily visible to the user */
ion-checkbox {
    --border-color: var(--ion-color-step-600);
}

ion-card-subtitle {
    --color: var(--ion-card-subtitle);
}

ion-card > ion-card-header {
    justify-content: center;
}

ion-card-header {
    flex-direction: row;
}

/* This also affects top and middle toasts but we don't use those positions #TODO track this
    https://github.com/ionic-team/ionic-framework/issues/17499
 */
ion-toast {
    transform: translateY(-80px);
}

ion-radio {
    --color: var(--ion-color-step-850);
}

ion-chip {
    height: 26px;
}

ion-label {
    color: var(--Secondary-Text);
}
ion-accordion {
    background-color: var(--ion-item-background);
}

.ion-accordion-toggle-icon {
    color: var(--ion-text-color);
}

.button-solid {
    color: var(--ion-background-color);
    --background: var(--ion-color-primary);
    text-transform: capitalize;
}

ion-button {
    letter-spacing: 0;
}