@import '../var';
@import '../mixins';
@import './light';  //浅蓝主题
@import './dark';   //深蓝主题

// 多主题
.theme-light {
    @include theme-light;
}
.theme-dark {
    @include theme-dark;
}
.theme-auto {
    @include theme-light;
}
@media (prefers-color-scheme: dark) {
    .theme-auto {
        @include theme-dark;
    }
}

@each $value in ('', '-1', '-2', '-3', '-4') {
    .ui-BG#{$value} {
        background-color: var(--ui-BG#{$value}) !important;
        color: var(--ui-TC);
    }
    .ui-TC#{$value} {
        color: var(--ui-TC#{$value}) !important;
    }
    .ui-BG-Main#{$value} {
        background-color: var(--ui-BG-Main#{$value}) !important;
        color: var(--ui-BG-Main-TC) !important;
    }
    .ui-TC-Main#{$value} {
        color: var(--ui-BG-Main#{$value}) !important;
    }
}

@each $color, $value in $colors {
    .main-#{$color} {
        --ui-BG-Main: #{$value};
        --ui-BG-Main-1: #{mix(rgba(255, 255, 255, 0.7), desaturate($value, 20%), 10%)};
        --ui-BG-Main-2: #{mix(rgba(255, 255, 255, 0.6), desaturate($value, 40%), 20%)};
        --ui-BG-Main-3: #{mix(rgba(119, 119, 119, 0.2), desaturate($value, 40%), 40%)};
        --ui-BG-Main-4: #{mix(rgba(119, 119, 119, 0.1), desaturate($value, 40%), 60%)};

        @if $color == 'yellow' {
            --ui-BG-Main-TC: #333333 !important;
        } @else {
            --ui-BG-Main-TC: #ffffff !important;
        }
    }
}
