@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');

/* common */
:root {
    --rarity-common: #A66A3B;
    --rarity-uncommon: #4fd742;
    --rarity-rare: #1d4bd4;
    --rarity-epic: #b240f6;
    --rarity-legendary: #F77115;
    --rarity-mythic: #4ad3dc;
    --rarity-titan: #fcce53;
}

/* Light mode */
[data-theme="light"] {
    --body-background: #F3F5F6;
    --body-text-color: #282D2F;
    --zone-background: #D9ECEF;
    --zone-border-color: #99CDD5;
    --input-background: #c2cdd0;
    --input-text-color: #282D2F;
    --input-border: #e9ecf1;
    --input-radio-background: #c2cdd0;
    --input-radio-border: #2B818E;
    --input-radio-color: #28596C;
    --input-checkbox-background: #c2cdd0;
    --input-checkbox-border: #99CDD5;
    --input-checkbox-color: #175A75;
    --slider-background: #c2cdd0;
    --slider-mark: #4DA8B6;
    --button-tab-background: #4DA8B6;
    --button-tab-text: #282D2F;
    --button-tab-background-hover: #7FC0CA;
    --button-tab-text-hover: #282D2F;
    --inactive-tab-background: #e9ecf1;
    --inactive-tab-text: #282D2F;
    --toggle-on-background: #4DA8B6;
    --toggle-off-background: #ccc;
    --health-bar-background: #CED5D7;
    --health-bar-color: #008296;
    --dropdown-background: #4DA8B6;
    --dropdown-color: #282D2F;
    --dropdown-arrow-background: #39838E;
    --dropdown-arrow-color: #282D2F;
    --rarity-none: #ffffff;
}

/* Dark mode */
[data-theme="dark"] {
    --body-background: #1B1E1F;
    --body-text-color: #DBE0E2;
    --zone-background: #282D2F;
    --zone-border-color: #0E0F10;
    --input-background: #1B1E1F;
    --input-text-color: #DBE0E2;
    --input-border: #0E0F10;
    --input-radio-background: #1B1E1F;
    --input-radio-border: #A9AAAA;
    --input-radio-color: #848484;
    --input-checkbox-background: #1B1E1F;
    --input-checkbox-border: #0E0F10;
    --input-checkbox-color: #A9AAAA;
    --slider-background: #282D2F;
    --slider-mark: #DBE0E2;
    --button-tab-background: #85959B;
    --button-tab-text: #000000;
    --button-tab-background-hover: #9DAAAF;
    --button-tab-text-hover: #000000;
    --inactive-tab-background: #0E0F10;
    --inactive-tab-text: #DBE0E2;
    --toggle-on-background: #C2CACD;
    --toggle-off-background: #0E0F10;
    --health-bar-background: #000000;
    --health-bar-color: #282D2F;
    --dropdown-background: #9DAAAF;
    --dropdown-color: #000000;
    --dropdown-arrow-background: #8C9193;
    --dropdown-arrow-color: #000000;
    --rarity-none: #1B1E1F;
}

[data-theme="legacy"] {
    --body-background: #FFFFFF;
    --body-text-color: #000000;
    --zone-background: #7fc46938;
    --zone-border-color: #8ca89a;
    --input-background: #c2cdd0;
    --input-text-color: #000000;
    --input-border: #e9ecf1;
    --input-radio-background: #c2cdd0;
    --input-radio-border: #8ca89a;
    --input-radio-color: #21803d;
    --input-checkbox-background: #c2cdd0;
    --input-checkbox-border: #8ca89a;
    --input-checkbox-color: #21803d;
    --slider-background: #c2cdd0;
    --slider-mark: #7fc469;
    --button-tab-background: #7fc469;
    --button-tab-text: #FFFFFF;
    --button-tab-background-hover: #7fc469c9;
    --button-tab-text-hover: #000000;
    --inactive-tab-background: #e9ecf1;
    --inactive-tab-text: #000000;
    --toggle-on-background: #7fc469;
    --toggle-off-background: #ccc;
    --health-bar-background: #CED5D7;
    --health-bar-color: #b52121;
    --dropdown-background: #7fc469c9;
    --dropdown-color: #FFFFFF;
    --dropdown-arrow-background: #7fc469c9;
    --dropdown-arrow-color: #FFFFFF;
    --rarity-none: #ffffff;
}

[data-theme="m_green"] {
    --body-background: #004030;
    --body-text-color: #00CA80fF;
    --zone-background: #003d2a;
    --zone-border-color: #009070;
    --input-background: #005c3e;
    --input-text-color: #00c542;
    --input-border: #005540;
    --input-radio-background: #003d2a;
    --input-radio-border: #005c3e;
    --input-radio-color: #009070;
    --input-checkbox-background: #003d2a;
    --input-checkbox-border: #005c3e;
    --input-checkbox-color: #009070;
    --slider-background: #005c3e;
    --slider-mark: #00c542;
    --button-tab-background: #00805e;
    --button-tab-text: #00dc86;
    --button-tab-background-hover: #008a5e;
    --button-tab-text-hover: #00dc86;
    --inactive-tab-background: #005540;
    --inactive-tab-text: #009947;
    --toggle-on-background: #008d3e;
    --toggle-off-background: #002b22;
    --health-bar-background: #006545;
    --health-bar-color: #00b439;
    --dropdown-background: #005540;
    --dropdown-color: #009947;
    --dropdown-arrow-background: #03624a;
    --dropdown-arrow-color: #009947;
    --rarity-none: #004030;
}

[data-theme="d_blue"] {
    --body-background: #013765;
    --body-text-color: #1ab2ff;
    --zone-background: #032c4f;
    --zone-border-color: #3e648f;
    --input-background: #014377;
    --input-text-color: #01b5d9;
    --input-border: #03264f;
    --input-radio-background: #032c4f;
    --input-radio-border: #014377;
    --input-radio-color: #3e648f;
    --input-checkbox-background: #032c4f;
    --input-checkbox-border: #014377;
    --input-checkbox-color: #3e648f;
    --slider-background: #014377;
    --slider-mark: #01b5d9;
    --button-tab-background: #0b4589;
    --button-tab-text: #60a0ff;
    --button-tab-background-hover: #1063c5;
    --button-tab-text-hover: #009cff;
    --inactive-tab-background: #03264f;
    --inactive-tab-text: #3c8bff;
    --toggle-on-background: #009cff;
    --toggle-off-background: #002136;
    --health-bar-background: #051d44;
    --health-bar-color: #015de5;
    --dropdown-background: #03264f;
    --dropdown-color: #3c8bff;
    --dropdown-arrow-background: #08448a;
    --dropdown-arrow-color: #3c8bff;
    --rarity-none: #013765;
}

[data-theme="burnt_sienna"] {
    --body-background: #FAD5A5;
    --body-text-color: #ad5f12;
    --zone-background: #fcce9b;
    --zone-border-color: #CC5500;
    --input-background: #fbc57f;
    --input-text-color: #753a03;
    --input-border: #B87333;
    --input-radio-background: #fcce9b;
    --input-radio-border: #B87333;
    --input-radio-color: #CC5500;
    --input-checkbox-background: #fcce9b;
    --input-checkbox-border: #B87333;
    --input-checkbox-color: #CC5500;
    --slider-background: #fbc57f;
    --slider-mark: #D27D2D;
    --button-tab-background: #D27D2D;
    --button-tab-text: #FFDEAD;
    --button-tab-background-hover: #E3963E;
    --button-tab-text-hover: #FAD5A5;
    --inactive-tab-background: #B87333;
    --inactive-tab-text: #FFE5B4;
    --toggle-on-background: #FF9F50;
    --toggle-off-background: #CC5500;
    --health-bar-background: #CC5500;
    --health-bar-color: #FF9F50;
    --dropdown-background: #B87333;
    --dropdown-color: #FFE5B4;
    --dropdown-arrow-background: #AE5F15;
    --dropdown-arrow-color: #FFE5B4;
    --rarity-none: #FAD5A5;
}

[data-theme="chandler"] {
    --body-background: #c0d0d5;
    --body-text-color: #534532;
    --zone-background: #89969b;
    --zone-border-color: #323232;
    --input-background: #a0afb5;
    --input-text-color: #323232;
    --input-border: #b5cbd3;
    --input-radio-background: #89969b;
    --input-radio-border: #a0afb5;
    --input-radio-color: #b5cbd3;
    --input-checkbox-background: #89969b;
    --input-checkbox-border: #a0afb5;
    --input-checkbox-color: #b5cbd3;
    --slider-background: #a0afb5;
    --slider-mark: #687478;
    --button-tab-background: #687478;
    --button-tab-text: #323232;
    --button-tab-background-hover: #a3b5be;
    --button-tab-text-hover: #323232;
    --inactive-tab-background: #b5cbd3;
    --inactive-tab-text: #323232;
    --toggle-on-background: #f5f5f5;
    --toggle-off-background: #323232;
    --health-bar-background: #b30900;
    --health-bar-color: #f5f5f5;
    --dropdown-background: #b5cbd3;
    --dropdown-color: #646464;
    --dropdown-arrow-background: #95afb9;
    --dropdown-arrow-color: #646464;
    --rarity-none: #c0d0d5;
}