@import './colors/private/light';
@import './colors/private/dark';
@import './colors/private/light-hc';
@import './colors/private/dark-hc';
@import './colors/text/light';
@import './colors/text/dark';
@import './colors/text/light-hc';
@import './colors/text/dark-hc';
@import './colors/base/light';
@import './colors/base/dark';
@import './colors/base/light-hc';
@import './colors/base/dark-hc';
@import './colors/line/light';
@import './colors/line/dark';
@import './colors/line/light-hc';
@import './colors/line/dark-hc';
@import './colors/infographics/light';
@import './colors/infographics/dark';
@import './colors/infographics/light-hc';
@import './colors/infographics/dark-hc';
@import './colors/sfx/light';
@import './colors/sfx/dark';
@import './colors/sfx/light-hc';
@import './colors/sfx/dark-hc';
@import './colors/promo/light';
@import './colors/promo/dark';
@import './colors/promo/light-hc';
@import './colors/promo/dark-hc';
@import './colors/social';
@import './colors/system';
@import './typography';
@import './brand';

.yc-root {
    @include yc-typography;
    @include yc-brand;
    @include yc-colors-social;

    --yc-scrollbar-width: var(--yc-my-scrollbar-width);

    --yc-border-radius-s: var(--yc-my-border-radius-s);
    --yc-border-radius-m: var(--yc-my-border-radius-m);
    --yc-border-radius-l: var(--yc-my-border-radius-l);
    --yc-border-radius-xl: var(--yc-my-border-radius-xl);

    &_theme_light {
        @include yc-colors-private-light;
        @include yc-colors-brand-light;
        @include yc-colors-text-light;
        @include yc-colors-base-light;
        @include yc-colors-line-light;
        @include yc-colors-infographics-light;
        @include yc-colors-sfx-light;
        @include yc-colors-promo-light;
        @include yc-colors-system-light;

        background: var(--yc-color-base-background);
        color: var(--yc-color-text-primary);
    }

    &_theme_dark {
        @include yc-colors-private-dark;
        @include yc-colors-brand-dark;
        @include yc-colors-text-dark;
        @include yc-colors-base-dark;
        @include yc-colors-line-dark;
        @include yc-colors-infographics-dark;
        @include yc-colors-sfx-dark;
        @include yc-colors-promo-dark;
        @include yc-colors-system-dark;

        background: var(--yc-color-base-background);
        color: var(--yc-color-text-primary);
    }

    &_theme_light-hc {
        @include yc-colors-private-light-hc;
        @include yc-colors-brand-light-hc;
        @include yc-colors-text-light-hc;
        @include yc-colors-base-light-hc;
        @include yc-colors-line-light-hc;
        @include yc-colors-infographics-light-hc;
        @include yc-colors-sfx-light-hc;
        @include yc-colors-promo-light-hc;
        @include yc-colors-system-light-hc;

        background: var(--yc-color-base-background);
        color: var(--yc-color-text-primary);
    }

    &_theme_dark-hc {
        @include yc-colors-private-dark-hc;
        @include yc-colors-brand-dark-hc;
        @include yc-colors-text-dark-hc;
        @include yc-colors-base-dark-hc;
        @include yc-colors-line-dark-hc;
        @include yc-colors-infographics-dark-hc;
        @include yc-colors-sfx-dark-hc;
        @include yc-colors-promo-dark-hc;
        @include yc-colors-system-dark-hc;

        background: var(--yc-color-base-background);
        color: var(--yc-color-text-primary);
    }
}

body.yc-root {
    &::-webkit-scrollbar,
    *::-webkit-scrollbar {
        width: var(--yc-scrollbar-width);
        height: var(--yc-scrollbar-width);
        background: var(--yc-color-scroll-track);
    }

    &::-webkit-scrollbar-track,
    *::-webkit-scrollbar-track {
        background: var(--yc-color-scroll-track);
    }

    &::-webkit-scrollbar-corner,
    *::-webkit-scrollbar-corner {
        background: var(--yc-color-scroll-corner);
    }

    &::-webkit-scrollbar-thumb,
    *::-webkit-scrollbar-thumb {
        background: var(--yc-color-scroll-handle);
    }

    &::-webkit-scrollbar-thumb:hover,
    *::-webkit-scrollbar-thumb:hover {
        background: var(--yc-color-scroll-handle-hover);
    }

    // stylelint-disable-next-line property-no-unknown
    scrollbar-width: var(--yc-scrollbar-width);
    // stylelint-disable-next-line property-no-unknown
    scrollbar-color: var(--yc-color-scroll-handle) var(--yc-color-scroll-track);
}