/* ------------------------------
Theme
------------------------------ */
@import url(custom-theme/tokens.css);
@import url(custom-theme/theme.css);

:root {
    --cu-noren-switch-color: var(--web-noren-color);
    --cu-noren-switch-background-color: var(--web-noren-color-dark);
    --cu-noren-switch-font-color: var(--web-noren-color);
}

/* ------------------------------
Font
------------------------------ */
.content__container {
    container: content / inline-size;
}

@container content (width <600px) {
    noren-switch {
        --cu-icon-size: 3rem;
        --cu-fab-branded-label-text-size: 2rem;
        --cu-fab-branded-label-text-line-height: 3rem;
        --cu-fab-branded-container-height: 4rem;
    }
}

@container content (600px <=width) {
    noren-switch {
        --cu-icon-size: 4rem;
        --cu-fab-branded-label-text-size: 2.5rem;
        --cu-fab-branded-label-text-line-height: 3.75rem;
        --cu-fab-branded-container-height: 5rem;
    }

}