:root {
    --cc-font-family: inherit;

    --cc-modal-border-radius: 3px;
    --cc-btn-border-radius: 3px;

    --cc-btn-primary-bg: #30d175;
    --cc-btn-primary-border-color: transparent;
    --cc-btn-primary-hover-bg: #32db7c;
    --cc-btn-primary-hover-border-color: transparent;

    --cc-btn-secondary-color: #30d175;
    --cc-btn-secondary-border-color: transparent;
    --cc-btn-secondary-hover-color: #30d175;
    --cc-btn-secondary-hover-border-color: transparent;

    --cc-overlay-bg: rgba(0, 0, 0, 0.4);

    --cc-footer-border-color: var(--cc-separator-border-color);
}

.light {
    --cc-primary-color: #1f2225;
    --cc-secondary-color: #767c82;

    --cc-btn-secondary-bg: rgba(46, 51, 56, 0.05);
    --cc-btn-secondary-hover-bg: rgba(46, 51, 56, 0.09);

    --cc-separator-border-color: #efeff5;

    --cc-toggle-off-bg: rgba(0, 0, 0, 0.14);
    --cc-toggle-readonly-bg: rgba(48, 209, 117, 0.5);

    --cc-cookie-category-block-bg: #fafafc;
    --cc-cookie-category-block-border: #fafafc;
    --cc-cookie-category-block-hover-bg: #f0f0f2;
    --cc-cookie-category-block-hover-border: #f0f0f2;
    --cc-cookie-category-expanded-block-hover-bg: #f0f0f2;

    --cc-webkit-scrollbar-bg: rgba(0, 0, 0, 0.25);
    --cc-webkit-scrollbar-hover-bg: rgba(0, 0, 0, 0.4);
}

.dark {
    --cc-bg: #18181c;

    --cc-primary-color: rgba(255, 255, 255, 0.9);
    --cc-secondary-color: rgba(255, 255, 255, 0.52);

    --cc-btn-primary-color: #000000;
    --cc-btn-primary-hover-color: #000000;

    --cc-btn-secondary-bg: rgba(255, 255, 255, 0.08);
    --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);

    --cc-separator-border-color: rgba(255, 255, 255, 0.09);

    --cc-toggle-on-bg: #2a947d;
    --cc-toggle-off-bg: rgba(255, 255, 255, 0.2);
    --cc-toggle-readonly-bg: rgba(42, 148, 125, 0.5);
    --cc-toggle-readonly-knob-bg: #88888a;

    --cc-cookie-category-block-bg: #212126;
    --cc-cookie-category-block-border: #212126;
    --cc-cookie-category-block-hover-bg: #2a2a30;
    --cc-cookie-category-block-hover-border: #2a2a30;
    --cc-cookie-category-expanded-block-hover-bg: #2a2a30;

    --cc-webkit-scrollbar-bg: rgba(255, 255, 255, 0.2);
    --cc-webkit-scrollbar-hover-bg: rgba(255, 255, 255, 0.3);
}

#cc-main .cm__btn:not(.cm__btn--close),
#cc-main .pm__btn:not(.cm__btn--close) {
    height: 34px;
    min-height: auto;
    min-width: auto !important;
    padding: 0 14px !important;
    font-size: 14px;
    font-weight: 400;
}

#cc-main .section__toggle,
#cc-main .section__toggle-wrapper,
#cc-main .toggle__icon,
#cc-main .toggle__label {
    width: 40px;
    height: 22px;
}

#cc-main .toggle__icon {
    box-shadow: none;
}

#cc-main .toggle__icon-circle {
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    box-shadow:
            0 1px 4px 0 rgba(0, 0, 0, 0.3),
            inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
}

#cc-main .section__toggle:checked ~ .toggle__icon,
#cc-main .section__toggle:checked:disabled ~ .toggle__icon {
    box-shadow: none;
}

#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
    transform: translateX(18px);
}

#cc-main .pm__section--expandable .pm__section-arrow {
    background: var(--cc-btn-secondary-bg);
}

@media screen and (min-width: 640px) {
    #cc-main ::-webkit-scrollbar-thumb {
        background: var(--cc-webkit-scrollbar-bg);
    }

    #cc-main ::-webkit-scrollbar-thumb:hover {
        background: var(--cc-webkit-scrollbar-hover-bg);
    }
}