@import "~antd/dist/antd.min.css";
@import "./common/common.scss";
@import "./variables/fonts.scss";
@mixin no-shadow {
    text-shadow: none;
    box-shadow: none;
}

body {
    font-family: $font1;
}
/*will put this in updated colors.scss*/
:root {
    --base-0: #fafafa;
    --base-100: #f6f6f6;
    --base-200: #f2f2f2;
    --base-300: #e7e7e7;
    --base-400: #cecfd1;
    --base-500: #a2a7b0;
    --base-600: #7f848e;
    --base-700: #5d616c;
    --base-800: #555862;
    --base-900: #4c4e58;
    --base-1000: #3b3c44;
    --base-1100: #272b30;
    --base-1200: #212327;
    --base-1300: #181a1e;
    --base-1400: #16181b;
    --base-1500: #131518;
    --primary-100: #2e90fa;
    --primary-200: #53b1fd;
    --primary-300: #1570ef;
    --successive-100: #6bc592;
    --successive-200: #54a577;
    --destructive-100: #eb5a5a;
    --destructive-200: #bd3f4d;
    --links: #267cf4;
    --neutral-100: #e7e7e7;
    --neutral-200: #181a1e;
    --drop-down-shadow: 0px 38.889px 46.852px rgba(0, 0, 0, 0.05),
        0px 23.111px 25.481px rgba(0, 0, 0, 0.04),
        0px 12px 13px rgba(0, 0, 0, 0.04),
        0px 4.889px 6.519px rgba(0, 0, 0, 0.03),
        0px 1.111px 3.148px rgba(0, 0, 0, 0.02);
    --overlay-shade-2: #dfdfdf;
    --overlay: linear-gradient(
        180deg,
        var(--overlay-shade-2) 0%,
        var(--base-200) 100%
    );
    --btn-color-neutral-300: #e7e7e7;
    --btn-color-primary: #fafafa;
    --btn-color-tertiary: #3b3c44;
    --light-500: #767b89;
    --light-500-h: #a2a7b0;
    --scrollArrow: linear-gradient(
        241deg,
        #181a1e 0%,
        rgba(22, 24, 27, 0.8) 100%
    );
}
.dark-theme {
    --base-0: #131518;
    --base-100: #16181b;
    --base-200: #181a1e;
    --base-300: #212327;
    --base-400: #272b30;
    --base-500: #3b3c44;
    --base-600: #4c4e58;
    --base-700: #555862;
    --base-800: #5d616c;
    --base-900: #7f848e;
    --base-1000: #a2a7b0;
    --base-1100: #cecfd1;
    --base-1200: #e7e7e7;
    --base-1300: #f2f2f2;
    --base-1400: #f6f6f6;
    --base-1500: #fafafa;
    --overlay-shade-2: #0f1113;
    --overlay: linear-gradient(
        180deg,
        var(--overlay-shade-2) 0%,
        var(--base-200) 100%
    );

    --drop-down-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);
}

.base-0 {
    color: var(--base-0);
}
.base-0-bg {
    background-color: var(--base-0);
}

.base-100 {
    color: var(--base-100);
}
.base-100-bg {
    background-color: var(--base-100);
}

.base-200 {
    color: var(--base-200);
}
.base-200-bg {
    background-color: var(--base-200);
}

.base-300 {
    color: var(--base-300);
}
.base-300-bg {
    background-color: var(--base-300);
}

.base-400 {
    color: var(--base-400);
}
.base-400-bg {
    background-color: var(--base-400);
}

.base-500 {
    color: var(--base-500);
}
.base-500-bg {
    background-color: var(--base-500);
}

.base-600 {
    color: var(--base-600);
}
.base-600-bg {
    background-color: var(--base-600);
}

.base-700 {
    color: var(--base-700);
}
.base-700-bg {
    background-color: var(--base-700);
}

.base-800 {
    color: var(--base-800);
}
.base-800-bg {
    background-color: var(--base-800);
}

.base-900 {
    color: var(--base-900);
}
.base-900-bg {
    background-color: var(--base-900);
}

.base-1000 {
    color: var(--base-1000);
}
.base-1000-bg {
    background-color: var(--base-1000);
}
.base-1100 {
    color: var(--base-1000);
}
.base-1100-bg {
    background-color: var(--base-1000);
}
.base-1200 {
    color: var(--base-2000);
}
.base-1200-bg {
    background-color: var(--base-1200);
}
.base-1300 {
    color: var(--base-1300);
}
.base-1300-bg {
    background-color: var(--base-1300);
}
.base-1400 {
    color: var(--base-1400);
}
.base-1400-bg {
    background-color: var(--base-1400);
}
.base-1500 {
    color: var(--base-1500);
}
.base-1500-bg {
    background-color: var(--base-1500);
}

.primary-100 {
    color: var(--primary-100) !important;
}
.primary-100-bg {
    background-color: var(--primary-100);
}

.primary-200 {
    color: var(--primary-200) !important;
}
.primary-200-bg {
    background-color: var(--primary-200);
}

.primary-300 {
    color: var(--primary-300) !important;
}
.primary-300-bg {
    background-color: var(--primary-300);
}

.successive-100 {
    color: var(--successive-100) !important;
}
.successive-100-bg {
    background-color: var(--successive-100);
}
.successive-200 {
    color: var(--successive-200) !important;
}
.successive-200-bg {
    background-color: var(--successive-200);
}

.destructive-100 {
    color: var(--destructive-100) !important;
}
.destructive-100-bg {
    background-color: var(--destructive-100);
}

.destructive-200 {
    color: var(--destructive-200) !important;
}
.destructive-200-bg {
    background-color: var(--destructive-200);
}

.links {
    color: var(--links);
}
.links-bg {
    background-color: var(--links);
}

.neutral-100 {
    color: var(--neutral-100);
}
.neutral-100-bg {
    background-color: var(--neutral-100);
}

.neutral-200 {
    color: var(--neutral-200);
}
.neutral-200-bg {
    background-color: var(--neutral-200);
}
/*will put this in updated colors.scss*/
/*all general classes*/
.link {
    cursor: pointer;
}
.branding {
    color: var(--primary-100);
    &:hover,
    &:focus,
    &:hover:focus,
    &:active,
    &.active {
        color: var(--primary-200);
    }
}
/*all general classes*/

.dark-theme {
    background: var(--base-200);
    &,
    h1,
    h2,
    h3 {
        color: var(--base-800);
    }
}
.light-theme {
    /* add light theme styles here */
}