@mixin yc-brand {
    --yc-my-scrollbar-width: 12px;

    --yc-my-border-radius-s: 5px;
    --yc-my-border-radius-m: 6px;
    --yc-my-border-radius-l: 8px;
    --yc-my-border-radius-xl: 10px;
}

@mixin yc-colors-brand-light {
    --yc-my-color-brand-normal: var(--yc-color-private-blue-550);
    --yc-my-color-brand-normal-hover: var(--yc-color-private-blue-600);
    --yc-my-color-brand-light: var(--yc-color-private-blue-300);
    --yc-my-color-brand-selection: var(--yc-color-private-blue-50);
    --yc-my-color-brand-selection-hover: var(--yc-color-private-blue-100);
    --yc-my-color-brand-link: var(--yc-my-color-brand-normal);
    --yc-my-color-brand-link-hover: var(--yc-color-private-blue-800);
    --yc-my-color-brand-text: var(--yc-my-color-brand-normal);
    --yc-my-color-brand-text-contrast: var(--yc-color-text-light-primary);
    --yc-my-color-brand-link-visited: var(--yc-color-private-purple-550);
    --yc-my-color-brand-link-visited-hover: var(--yc-color-private-purple-800);
}

@mixin yc-colors-brand-dark {
    --yc-my-color-brand-normal: var(--yc-color-private-blue-550);
    --yc-my-color-brand-normal-hover: var(--yc-color-private-blue-700);
    --yc-my-color-brand-light: var(--yc-color-private-blue-300);
    --yc-my-color-brand-selection: var(--yc-color-private-blue-150);
    --yc-my-color-brand-selection-hover: var(--yc-color-private-blue-300);
    --yc-my-color-brand-link: var(--yc-color-private-blue-700);
    --yc-my-color-brand-link-hover: var(--yc-color-private-blue-850);
    --yc-my-color-brand-text: var(--yc-color-private-blue-700);
    --yc-my-color-brand-text-contrast: var(--yc-color-text-light-primary);
    --yc-my-color-brand-link-visited: var(--yc-color-private-purple-700);
    --yc-my-color-brand-link-visited-hover: var(--yc-color-private-purple-850);
}

@mixin yc-colors-brand-light-hc {
    --yc-my-color-brand-normal: var(--yc-color-private-blue-550);
    --yc-my-color-brand-normal-hover: var(--yc-color-private-blue-800);
    --yc-my-color-brand-light: var(--yc-color-private-blue-300);
    --yc-my-color-brand-selection: var(--yc-color-private-blue-250);
    --yc-my-color-brand-selection-hover: var(--yc-color-private-blue-450);
    --yc-my-color-brand-link: var(--yc-color-private-blue-650-solid);
    --yc-my-color-brand-link-hover: var(--yc-color-private-blue-850-solid);
    --yc-my-color-brand-text: var(--yc-color-private-blue-900-solid);
    --yc-my-color-brand-text-contrast: var(--yc-color-text-light-primary);
    --yc-my-color-brand-link-visited: var(--yc-color-private-purple-600-solid);
    --yc-my-color-brand-link-visited-hover: var(--yc-color-private-purple-850-solid);
}

@mixin yc-colors-brand-dark-hc {
    --yc-my-color-brand-normal: var(--yc-color-private-blue-450-solid);
    --yc-my-color-brand-normal-hover: var(--yc-color-private-blue-650-solid);
    --yc-my-color-brand-light: var(--yc-color-private-blue-300);
    --yc-my-color-brand-selection: var(--yc-color-private-blue-350);
    --yc-my-color-brand-selection-hover: var(--yc-color-private-blue-600-solid);
    --yc-my-color-brand-link: var(--yc-color-private-blue-550);
    --yc-my-color-brand-link-hover: var(--yc-color-private-blue-750-solid);
    --yc-my-color-brand-text: var(--yc-color-private-blue-850-solid);
    --yc-my-color-brand-text-contrast: var(--yc-color-text-light-primary);
    --yc-my-color-brand-link-visited: var(--yc-color-private-purple-650-solid);
    --yc-my-color-brand-link-visited-hover: var(--yc-color-private-purple-800-solid);
}