:root   .has-link-color a:not(.wp-block-button__link){

    color: var(--wp--style--color--link,var(--thm_general_link_color));
}

.has-custom-style,
.custom-background{
    background:var(--thm_background_color);
}

/*
fill
stroke
text-decoration-color
text-emphasis-color
column-rule-color
-webkit-tap-highlight-color
*/

.custom-background[class]{
    /**
     *
     * need <style type="text/css" id="custom-background-css">
     * overwrite spacificity
     */
    &:not([class*="background-css-pattern"]) {
        &:not(.emulsion-has-custom-background-image){
            /**
             * For posts and pages, specify a background color
             * only if there is no background image
             */
            background:var(--thm_background_color);
        }
        &.error404.emulsion-has-custom-background-image,
        &.attachment.emulsion-has-custom-background-image,
        &.is-loop.emulsion-has-custom-background-image{
            /**
             * The background image is displayed only on pages and posts
             */
            background:var(--thm_background_color);
        }
    }

}
.is-presentation-theme{
    .emulsion-prepend-page-wrapper,
    main{

        color:var(--thm_general_text_color);
        a{
            color:var(--thm_general_link_color);
            &:hover{
                color:var(--thm_general_link_hover_color);
            }
        }
        .has-background{
            *{
                color:inherit;
                a{
                    color:inherit;
                    &:hover{
                        color:inherit;
                    }
                }
            }
        }
    }
}


.show-post-image{
    color: var(--thm_white_color);
    *{
        color: var(--thm_white_color);
    }
    a:any-link{
        color: var(--thm_white_color);
        background:transparent;
        &:hover{
            color: var(--thm_white_color);
        }
    }
}
/**
 * action placeholder
 */

.emulsion-sidebar-page-widget-fallback,
.emulsion-sidebar-widget-fallback,
.emulsion-footer-page-widget-fallback,
.emulsion-footer-widget-fallback{
    color:var(--thm_sidebar_text_color);
    a:any-link{
        color:var(--thm_sidebar_link_color);

        &:hover{
            color:var(--thm_sidebar_hover_color);
        }
    }
}

.emulsion-drawer-after,
.emulsion-drawer-before,
.emulsion-append-header-layer{
    color:var(--thm_header_text_color);
    a:any-link{
        color:var(--thm_header_link_color);
        &:hover{
            color:var(--thm_header_hover_color);
        }
    }
}
.is-presentation-theme{
    .emulsion-article-after,
    .emulsion-article-before,
    .emulsion-article-wrapper-after,
    .emulsion-article-wrapper-before,
    .emulsion-prepend-page-wrapper{
        color:var(--thm_general_text_color);
        a:any-link{
            color:var(--thm_general_link_color);
            background:transparent;
            &:hover{
                color:var(--thm_general_link_hover_color);
            }
        }
    }
}
/**
 * header
 * ========================================================================== */
body{
    /**
     * Is Paged
     */
    &.paged{
        .header-layer{
            &.header-video-active{
                background:var(--thm_header_bg_color);
            }
            &.header-image-active,
            &.no-header-media,
            &.header-video-active{
                &.template-part-header-custom{
                    .site-title .site-title-text,
                    .taxonomy-description a,
                    .taxonomy-description,
                    .emulsion-monthly-archive-prev-next-navigation a,
                    .archive-year-links,
                    .archive-year-links a,
                    .site-description,
                    .header-text a,
                    .entry-text .entry-date,
                    .entry-text .entry-title,
                    .entry-text .posted-on a,
                    .entry-text .entry-meta a{
                        text-shadow:none;
                    }
                }
            }
        }
    }
    .header-layer{
        color:var(--thm_header_text_color);
        background:var( --thm_header_bg_color);
        @include bg-gradient;

        a:any-link{
            color:var(--thm_header_link_color);
            &:hover{
                color:var(--thm_header_hover_color);
            }
        }

        &.header-video-active{
            background:#000;

        }

        &.template-part-header{
            &.header-is-dark{
                input[type="checkbox"][data-skin="hamburger"] + label[for="primary-menu-controll"] span{
                    background:var(--thm_white_color);
                    &:after,
                        &:before{
                        background:var(--thm_white_color);
                    }
                }
                input[type="checkbox"][data-skin="hamburger"]:checked + label[for="primary-menu-controll"] span{
                    background:transparent;
                    &:after,
                        &:before{
                        background:var(--thm_white_color);
                    }
                }


            }
            &.header-is-light{
                input[type="checkbox"][data-skin="hamburger"] + label[for="primary-menu-controll"] span{
                    background: var(--thm_black_color);
                    &:after,
                        &:before{
                        background: var(--thm_black_color);
                    }
                }
                input[type="checkbox"][data-skin="hamburger"]:checked + label[for="primary-menu-controll"] span{
                    background:transparent;
                    &:after,
                        &:before{
                        background: var(--thm_black_color);
                    }
                }

            }

        }

        &.cta-layer-active{
            .cta-layer{
                a:any-link{
                    color:var(--thm_header_text_color);
                    background:var(--thm_header_bg_color);
                    &:focus{
                        border:2px solid rgb(94, 158, 214);
                        border:2px auto -webkit-focus-ring-color;
                    }
                }
            }
            &.header-is-light,
            &.header-is-default-color{
                .cta-layer{
                    a:any-link{
                        background:var(--thm_white_color);
                        &:hover{
                            background:#ccc;
                        }
                    }
                }
            }

            &.header-is-dark{
                .cta-layer{
                    a:any-link{
                        &:hover{
                            filter: brightness(110%);
                        }
                    }
                }
            }
        }
        &.header-image-active,
        &.header-video-active{
            color:var(--thm_white_color);
            background:transparent;

            &.template-part-header-custom{

                .site-title-text,
                .taxonomy-description a:any-link,
                    .taxonomy-description,
                    .emulsion-monthly-archive-prev-next-navigation a:any-link,
                    .archive-year-links,
                    .archive-year-links a:any-link,
                    .site-description,
                    .header-text a:any-link,
                    .entry-text,
                    .entry-text a:any-link{
                    color:var(--thm_white_color);
                    background:transparent;
                    text-shadow: #000 1px 0 10px;
                    &:hover{
                        color: var(--thm_cloud_color);
                    }
                }

                &.cta-layer-active{
                    .cta-layer{
                        a:any-link{
                            color:var(--thm_header_text_color);
                            background:var(--thm_header_bg_color);
                            &:hover{
                                color:var(--thm_header_text_color);
                            }
                        }
                    }
                }
            }
            .entry-text,
            .entry-text a:any-link,
                .site-title-text,
                .taxonomy-description a:any-link,
                .taxonomy-description,
                .emulsion-monthly-archive-prev-next-navigation a:any-link,
                .archive-year-links,
                .archive-year-links a:any-link,
                .site-description,
                .header-text a:any-link{
                color:var(--thm_white_color);
                background:transparent;
                &:hover{
                    color:var(--thm_white_color);
                }
            }
        }



    }

    /**
     * Search Drawer
     * ========================================================================== */
    &.drawer-is-active{


        .header-layer{

            .header-text{
                z-index:7;

                .site-title-text{
                    color: var(--thm_header_text_color);
                    text-shadow:none;
                }
                .site-description{
                    color: var(--thm_header_text_color);
                    text-shadow:none;
                }
                &:hover{
                    background:transparent ! important;
                }
            }
            &.header-image-active{
                &.template-part-header-custom{
                    .header-text{
                        &:hover{
                            background:transparent;
                        }
                        width:calc(100% - 64px);
                        .site-title-text{
                            color: var(--thm_header_text_color);
                            text-shadow:none;

                        }
                        .site-description{
                            color: var(--thm_header_text_color);
                            text-shadow:none;
                        }
                    }
                    div.header-text:hover{
                        .site-title-link{
                            .site-title-text{
                                color: var(--thm_header_text_color);
                                text-shadow:none;
                            }
                        }
                        .site-title-text,
                        .site-description{
                            color: var(--thm_header_text_color);
                            text-shadow:none;
                        }
                    }
                }
            }
        }
        &.home:not(.paged){
            &.drawer-is-active{

                header{
                    &.header-image-active{
                        &.template-part-header-custom{
                            div.header-text:hover{
                                .site-description{
                                    color: var(--thm_header_text_color);
                                    text-shadow:none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
footer.banner{
    color:var(--thm_header_text_color);
    background:var( --thm_header_bg_color);
    @include bg-gradient;

    a:any-link{
        color:var(--thm_header_link_color);
        &:hover{
            color:var(--thm_header_hover_color);
        }
    }
}
body.scheme-midnight{
    .header-layer{
        &.cta-layer-active{
            &.header-is-default-color{
                .cta-layer{
                    a:any-link{
                        color:var(--thm_header_text_color);
                        background:var( --thm_header_bg_color);
                        &:hover{
                            filter: brightness(110%);
                        }
                    }
                }
            }
        }
    }

}
/**
 * Primary Menu
 * ========================================================================== */

.template-part-header-custom{
    & + .primary-menu-wrapper{
        background:var(--thm_primary_menu_background);
        color:var(--thm_primary_menu_color);
        a{
            color:var(--thm_primary_menu_link_color);
            &:hover{
                color:var(--thm_primary_menu_color);
            }
        }
        .children,
        .sub-menu{
            background:var(--thm_primary_menu_background);
            color:var(--thm_primary_menu_color);
            a{
                color:var(--thm_primary_menu_link_color);
                &:hover{
                    color:var(--thm_primary_menu_color);
                }
            }
        }
    }
}
.header-layer-site-title-navigation{
    color:var(--thm_header_text_color);
    background:var( --thm_header_bg_color);
    @include bg-gradient;

    a:any-link{
        color:var(--thm_header_link_color);
        &:hover{
            color:var(--thm_header_hover_color);
        }
    }
    .wp-nav-menu{
        .sub-menu,
        .children{
            border-color:var(--thm_common_border, rgba(188,188,188,.5));
            border-style:var(--thm_common_border_style);
            border-width:var(--thm_common_border_width);
            color:var(--thm_header_text_color);
            background:var(--thm_header_bg_color);
            li:hover{
                color:var(--thm_header_hover_color);
            }

        }
    }
}

.menu-placeholder{
    [for="toc-toggle"]{
        span{
            background:var(--thm_header_bg_color);
        }
    }
    .toc{
        background:var(--thm_primary_menu_background);
        color:var(--thm_primary_menu_color);
        a{
            color:var(--thm_primary_menu_link_color);
        }
        ul{
            @include font_size(5);
            li{
                &.toc-active{
                    list-style-type:disc;
                    color:red;
                    a{
                        color:var(--thm_primary_menu_link_color);
                    }
                }
            }
        }
    }
}
/**
 * Sidebar
 * ========================================================================== */
.postform,
[name="archive-dropdown"]{
    background:var(--thm_sidebar_bg_color);
}
.footer-widget-area,
.sidebar-widget-area{
    background:var(--thm_sidebar_bg_color);
    color:var(--thm_sidebar_text_color);
    a:any-link{
        color:var(--thm_sidebar_link_color);

        &:hover{
            color:var(--thm_sidebar_hover_color);
        }
    }

    .wp-block-navigation-link__container{
        color:var(--thm_black_color);
        a:any-link{
            color:var(--thm_black_color);
        }
    }
}
.widget{
    *:not(.has-text-color):not(input):not(textarea){
        color:var(--thm_sidebar_text_color);
    }
    .wp-block-navigation-link{
        background:var(--thm_sidebar_bg_color);
        .wp-block-navigation-link__content{
            .wp-block-navigation-link__label{

            }
        }
    }
}
.scheme-midnight{
    .footer-widget-area,
    .sidebar-widget-area{
        color:var(--thm_general_text_color);
        a:any-link{
            color:var(--thm_general_link_color);

            &:hover{
                color:var(--thm_general_link_hover_color);
            }
        }
        #wp-calendar caption,
        #wp-calendar td,
        #wp-calendar caption, #wp-calendar td{
            color:var(--thm_general_text_color);
            a:any-link{
                color:var(--thm_general_link_color);

                &:hover{
                    color:var(--thm_general_link_hover_color);
                }
            }
        }
    }
}
/**
 * Relate Contents
 * ========================================================================== */

.relate-content-wrapper{
    background:var(--thm_relate_posts_bg);
    color:var(--thm_relate_posts_color);
    a:any-link{
        color:var(--thm_relate_posts_link_color);
        &:hover{
            color:var(--thm_relate_posts_color);
        }
    }
}
.paginate-comment-links{
    .current{
        color:var(--thm_header_text_color);
        background: var(--thm_header_bg_color);
    }
}
figure.wp-block-table{
    &::-webkit-scrollbar-thumb{
        background-color: currentColor;
    }
}

/**
 * Comments
 * ========================================================================== */
.comment-wrapper{
    color:var(--thm_comments_color);
    background:var(--thm_comments_bg);
    a:any-link{
        color:var(--thm_comments_link_color);
        &:hover{
            color:var(--thm_comments_color);
        }
    }
}

/**
 * Grid
 * ========================================================================== */

.grid{
    .article-wrapper{
        article{
            header{
                color: var(--thm_header_text_color);
                background: var(--thm_header_bg_color);
                background: -webkit-gradient(linear, left top, right top, color-stop(70%, var(--thm_header_bg_color)), to(var(--thm_header_background_gradient_color)) );
                background: linear-gradient(90deg, var(--thm_header_bg_color) 70%, var(--thm_header_background_gradient_color) );
                a .entry-date,
                a{
                    color: var(--thm_header_link_color);
                    background: transparent;
                    &:hover{
                        color:var(--thm_header_text_color);
                    }
                }
                &.show-post-image{
                    color:var(--thm_white_color);
                    background-size:cover;
                    a .entry-date,
                    a{
                        color:var(--thm_white_color);
                        &:hover{
                            color:var(--thm_white_color);
                        }
                    }
                }
            }
        }
    }
}
.is-light{
    .grid{
        article{
            background:var(--thm_white_color);

        }
    }
}
.is-dark{
    .grid{
        article{
            background:#000;
        }
    }
}
/**
 * Stream
 * ========================================================================== */

.stream{
    article{
        .stream-wrapper{
            color:var(--thm_general_text_color);
            .entry-title{
                text-transform:var(--thm_heading_font_transform);
                font-weight:var(--thm_heading_font_weight);
                font-family:var(--thm_heading_font_family);
                color: var(--thm_general_text_color);
                a{
                    color:var(--thm_general_link_color);
                    &:hover{
                        color:var(--thm_general_link_hover_color);
                    }
                }
            }
            .posted-on{
                color: var(--thm_general_text_color);
                a{
                    color:var(--thm_general_link_color);
                    .entry-date{
                        color:var(--thm_general_link_hover_color);
                    }
                    &:hover{
                        color:var(--thm_general_link_hover_color);
                    }
                }
            }
            .content-col{
                color: var(--thm_general_text_color);
                a{
                    color:var(--thm_general_link_color);
                    .entry-date{
                        color:var(--thm_general_link_hover_color);
                    }
                }
            }
            /**
             * Exception handling because z-index: -1 is not valid
             */
            p.has-background{
                color:var(--thm_general_text_color);
                a{
                    color:var(--thm_general_link_color);
                }
            }
        }
    }
}
.is-light{

    .stream{
        .stream-wrapper{
            background:var(--thm_white_color);
        }
    }

}
.is-dark{
    .stream{
        .stream-wrapper{
            background:#000;
        }
    }

}
/**
 *
 * ========================================================================== */

/**
 * Table
 */
table{
    tr{
        th{
            border-color:var(--thm_common_border, rgba(188,188,188,.5));
            border-style:var(--thm_common_border_style);
            border-width:var(--thm_common_border_width);
            border-color:var(--thm_sub_background_color_darken);
        }
        td{
            border-color:var(--thm_common_border, rgba(188,188,188,.5));
            border-style:var(--thm_common_border_style);
            border-width:var(--thm_common_border_width);
            border-color:var(--thm_sub_background_color_darken);
        }
    }
    &:not(.has-background){
        background:inherit;
        color:inherit;
    }
}

.wp-block-table{
    table{
        background: var(--thm_background_color);
        border-spacing:0;

        &:not(.has-background){
            background:inherit;
            color:inherit;
        }
        &.has-background{
            th{
                color: var(--thm_black_color);
            }
            td{
                color:var(--thm_black_color);
            }

            thead tr{
                background: var(--thm_code_bg);

            }
            tfoot tr{
                background: var(--thm_code_bg);

            }

        }
    }
    thead tr{
        background:inherit;
        color:var(--thm_general_text_color);
        th{
            border-color:var(--thm_common_border, rgba(188,188,188,.5));
            border-style:var(--thm_common_border_style, solid);
            border-width:var(--thm_common_border_width, 1px);


        }
    }
    tfoot tr{
        background:inherit;
        color:var(--thm_general_text_color);
    }
    &.is-style-stripes table:not(.has-background){
        tbody tr:nth-child(odd) {
            background-color: var(--thm_sub_background_color_darken);
            color:var(--thm_general_text_color);
            td{
                color:var(--thm_general_text_color);
            }
        }
    }
    &.is-style-stripes table.has-background{
        thead tr th{
            background: var(--thm_code_bg);
            color:var(--thm_black_color);
            // color:var(--thm_general_text_color);
        }
        tfoot tr td{
            background: var(--thm_code_bg);
            color:var(--thm_black_color);
            // color:var(--thm_general_text_color);
        }
        &.is-style-stripes .has-subtle-light-gray-background-color tbody tr:nth-child(odd){
            background: var(--thm_code_bg);
        }
    }
    &.is-style-stripes{
        border:none;
        table{
            thead{
                tr{
                    th{
                        border-color:var(--thm_common_border, rgba(188,188,188,.5));
                        border-style:var(--thm_common_border_style);
                        border-width:var(--thm_common_border_width);

                    }
                }
            }
            tbody{
                tr{
                    td{
                        border-color:var(--thm_common_border, rgba(188,188,188,.5));
                        border-style:var(--thm_common_border_style);
                        border-width:var(--thm_common_border_width);

                    }
                }
            }
            &.has-subtle-light-gray-background-color{
                background:var(--thm_table_light_gray_background);
            }
            &.has-subtle-pale-blue-background-color{
                background:var(--thm_table_pale_blue_background);
            }
            &.has-subtle-pale-green-background-color{
                background:var(--thm_table_pale_green_background);
            }
            &.has-subtle-pale-pink-background-color{
                background:var(--thm_table_pale_pink_background);
            }
        }
    }
}

/**
 *
 * ========================================================================== */

/**
 *
 * ========================================================================== */
.has-category-colors{
    &.category{
        & > header{
            &.header-layer{
                .drawer-wrapper{
                    label[for="c1"]{
                        .icon{
                            fill:var(--thm_white_color);
                        }
                    }
                }
                &.template-part-header{
                    .header-layer-site-title-navigation{
                        .site-title-text{
                            color:var(--thm_white_color);
                        }
                        .site-description{
                            color:var(--thm_white_color);
                        }

                        .menu-main-container{
                            .sub-menu,
                            .children{
                                color:var(--thm_white_color);
                                a{
                                    color:var(--thm_white_color);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .page-wrapper{
        article{
            header{

                .cat-item{
                    a{
                        color:var(--thm_general_link_color);
                    }
                    &.current-cat{
                        a{
                            color:var(--thm_white_color);
                        }
                    }
                }
            }
        }
        &.show-post-image{

            .cat-item{
                a{
                    color:var(--thm_white_color);
                }
                &.current-cat{
                    a{
                        color:var(--thm_white_color);
                    }
                }
            }
        }
    }
}


/**
 *
 * ========================================================================== */

.is-dark{
    /**
     * Custom background is Dark
     * tooltip
     */
    .sidebar-is-dark,
    main{
        .ui-tooltip {
            background:var(--thm_white_color);
            color: var(--thm_black_color);
            .ui-tooltip-content:before{
                border-color:var(--thm_white_color);
                border: 10px solid transparent;
                border-top: 10px solid  var(--thm_white_color);
            }
            &.bottom-tooltip .ui-tooltip-content:before{
                border: 10px solid transparent;
                border-bottom: 10px solid  var(--thm_white_color);
            }
        }
    }
}
/**
 * Pullquote
 * ========================================================================== */
.wp-block-pullquote.has-background.is-style-default{
    //.is-style-default is not apply background color
    blockquote:not(.has-text-color){

        color:var(--thm_general_text_color);

        *:not(.has-text-color){
            color:var(--thm_general_text_color);
        }
    }
}
/**
 * Misc
 * ========================================================================== */
body{
    //list bullet style
    ul:not(.list-style-initial):not(.is-style-list-style-initial),
        ol:not(.list-style-initial):not(.is-style-list-style-initial){
        li:before{
            background:var(--thm_default_bullet_color);
            color:var(--thm_white_color);
        }
    }
    .has-white-background-color,
    .has-cool-background-color,
    .has-info-background-color,
    .has-alert-background-color,
    .has-notice-background-color{
        color: var(--thm_black_color);

        [class$="inner-container"] *:not(.has-background):not(.has-text-color){
            color: var(--thm_black_color);
        }

    }


    .has-dark-background-color,
    .mark-dark{
        color:var(--thm_white_color);
        background:var(--thm_black_color);
    }
    .list-style-tab.success-js{
        & > li{
            &.active{
                background:rgba(188, 188, 188, 0.5);
            }
        }
    }

    main{
        #wp-calendar caption,
        #wp-calendar td{
            color:var(--thm_general_text_color);
        }

        #wp-calendar thead th{
            color:var(--thm_black_color);
        }
    }
    .footer-widget-area,
    .sidebar-widget-area{
        #wp-calendar caption,
        #wp-calendar td{
            color:var(--thm_sidebar_text_color);
            a:any-link{
                color:var(--thm_sidebar_link_color);

                &:hover{
                    color:var(--thm_sidebar_hover_color);
                }
            }
        }

        #wp-calendar thead th{
            color:var(--thm_black_color);
        }

    }

    .wp-block-button{


        .wp-block-button__link{
            &:not(.has-background){

                background: var(--thm_header_bg_color);
            }
            &:not(.has-text-color){
                color:var(--thm_header_text_color);
            }
        }
        &.is-style-outline{

            .wp-block-button__link{

                background:transparent ! important;
                color:var(--thm_general_text_color);
                &:hover{
                    color:var(--thm_general_text_color);
                }
            }
        }
    }

    .header-layer{
        & ~ .scroll-button-top{
            &.skin-button{
                color:var(--thm_header_text_color);
                background: var(--thm_header_bg_color);
            }
        }
    }
    .wp-block-search .wp-block-search__button,
    .wp-block-file .wp-block-file__button,
    .comment-wrapper .comment-form .submit,
    .read-more .skin-button,
    .editor .skin-button{
        color:var(--thm_header_text_color);
        background: var(--thm_header_bg_color);
        text-decoration:none;
        &:hover{
            color:var(--thm_header_hover_color);
            background: var(--thm_header_bg_color);
        }
    }
    //TOC
    input[type="checkbox"][data-skin="inset"] + label span{
        color:var(--thm_header_text_color);
        background: var(--thm_header_bg_color);
    }
    input[type="checkbox"][data-skin="inset"] + label span:after{
        border:3px solid var(--thm_header_text_color);
    }
    input[type="checkbox"][data-skin="inset"]:checked + label span{
        background:#16a085;
    }


}

body{
    /**
     * Header reset
     */
    &.metabox-reset-post-header{
        .header-layer{
            &.no-header-media{
                &.header-is-default-color{
                    background:var(--thm_white_color);
                    color:var(--thm_black_color);
                    .entry-text .posted-on .entry-date,
                    .entry-text .posted-on a,
                    .entry-text .posted-on .author a,
                    .entry-text .posted-on .comment-link,
                    .site-title-text,
                    a:any-link{
                        color:var(--thm_gray_color);
                        &:hover{
                            color:var(--thm_black_color);
                        }
                    }
                }
            }
        }
    }
    /**
     * Custom background is light or dark
     * metabox reset page presentation
     */
    &.is-dark,
    &.is-light{
        &.metabox-reset-page-presentation{
            &.custom-background main *{
                border-color:#999;
            }
        }
    }

}

body[class]{
    .icon-success,
    .icon-cool{
        & > a >  svg.icon, //button
        & > li > svg.icon,
        & > svg.icon{
            --thm_social_icon_color:rgba(52, 152, 219, 1);
            fill:var(--thm_cool_color);
        }
    }
    .icon-notice{
        & > a >  svg.icon, //button
        & > li > svg.icon,
        & > svg.icon{
            --thm_social_icon_color:rgba(163, 140, 8, 1);
            fill:var(--thm_notice_color);
        }
    }
    .icon-info{
        & > a >  svg.icon, //button
        & > li > svg.icon,
        & > svg.icon{
            --thm_social_icon_color:rgba(22, 160, 133, 1);
            fill:var(--thm_info_color);
        }
    }
    .icon-alert{
        & > a >  svg.icon, //button
        & > li > svg.icon,
        & > svg.icon{
            --thm_social_icon_color:rgba(231, 76, 60, 1);
            fill:var(--thm_alert_color);
        }
    }
    .icon-dark{
        & > a >  svg.icon, //button
        & > li > svg.icon,
        & > svg.icon{
            --thm_social_icon_color:#000;
            fill:#000;
        }
    }
    /**
     * hand writing svg color class
     */
    svg.icon{
        &.icon-success,
        &.icon-cool{
            --thm_social_icon_color:rgba(52, 152, 219, 1);
            fill:var(--thm_cool_color);
        }
        &.icon-notice{
            --thm_social_icon_color:rgba(163, 140, 8, 1);
            fill:var(--thm_notice_color);
        }
        &.icon-info{
            --thm_social_icon_color:rgba(22, 160, 133, 1);
            fill:var(--thm_info_color);
        }
        &.icon-alert{
            --thm_social_icon_color:rgba(231, 76, 60, 1);
            fill:var(--thm_alert_color);
        }
        &.icon-dark{
            --thm_social_icon_color:#000;
            fill:#000;
        }
    }
}
/**
 * Plugin fallback
 * START
 * ========================================================================== */
.is-dark{
    .entry-content .shortcode-wrapper,
    .entry-content > div[id]:not([class|="wp-block"]){
        padding:1rem;
    }
}
#{$body_id}{
    .emulsion-add-light-color{
        color:var(--thm_black_color) ! important;
        a{
            color:var(--thm_gray_color);
        }
    }
    .emulsion-add-dark-color{
        color:var(--thm_white_color);
        a{
            color:#ccc;
        }
        .wp-block-button:not(.has-text-color):not(.has-background){
            a:not(.has-text-color){
                color: var(--thm_black_color);
            }
        }
        p{
            color:var(--thm_white_color);
            &.has-background:not(.has-text-color){
                color:var(--thm_white_color);
            }
        }
        .post-password-form .message,
        .wp-block-code,
        .wp-block-table th,
        .wp-block-table td,
        .wp-block-calendar th,
        .wp-block-calendar td,
        .product,
        .skin-button,
        pre,
        .has-background:not(.has-text-color){
            text-shadow:none;
            color: var(--thm_black_color);
            a{
                color:var(--thm_gray_color);
                text-shadow:none;
            }
        }
    }
    .entry-content{
        & > .wp-block-table > table,
        & > .shortcode-wrapper > div:not(.gallery),
            & > p:not(.has-text-color):not(.has-background),
            & > div:not([class|="wp-block"]):not(.shortcode-wrapper):not(.has-background-media) {

            &.emulsion-initial-color{
                background:var(--thm_white_color);
                li:before{
                    display:none;
                }
                color:var(--thm_black_color);
                a{
                    color:var(--thm_gray_color);
                }
                *{
                    color:var(--thm_black_color);
                }
            }
            &.emulsion-current-color{
                color:var(--thm_general_text_color);
                background:transparent;
                &.woocommerce,
                &.wc-block-grid{
                    background:transparent;
                }
                a{
                    color:var(--thm_general_link_color);
                }
            }
            &.wp-block-table{
                &.emulsion-current-color{
                    background:transparent;
                }
            }

        }
    }
}
.content-excerpt [class|="wp-container"].has-background,
.content-excerpt p.has-background{
    background:transparent;
}
/**
 * Plugin fallback
 * END
 * ========================================================================== */

//　default theme color

$twenty_twenty_one_palette: dark-gray #28303D, green #D1E4DD, blue #D1DFE4, purple #D1D1E4, red #E4D1D1, orange #E4DAD1, yellow #EEEADD;
body{
    @each $twenty_twenty_one_color in $twenty_twenty_one_palette {
        $slug: nth($twenty_twenty_one_color, 1);
        $color: nth($twenty_twenty_one_color, 2);

        .has-#{$slug}-color {
            // OW over write global-styles-inline-css
            color:#{$color} ! important;
        }
        --global--color-#{$slug}:#{$color};


        .has-#{$slug}-background-color{
            background:var(--global--color-#{$slug});
        }
    }
}
body{
    .has-purple-to-yellow-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
    }
    .has-yellow-to-purple-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
    }
    .has-green-to-yellow-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
    }
    .has-yellow-to-green-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
    }
    .has-red-to-yellow-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
    }
    .has-yellow-to-red-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
    }
    .has-purple-to-red-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
    }
    .has-red-to-purple-gradient-background {
        background-image: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
    }
    .has-dark-gray-background-color:not(.has-text-color){
        // twenty twenty one
        color:var(--thm_white_color);
    }
}

/**
 * FSE
 *
 * The pallet setting of theme.json is not reflected when using PHPtemplate
 * Let's write the palette value of theme.json below
 */

.has-emulsion-black-color{
    color:#000000;
}
.has-emulsion-white-color{
    color:#ffffff;
}
.has-emulsion-muted-color{
    color:#ecf0f1;
}
.has-emulsion-alert-color{
    color:#ED4F32;
}
.has-emulsion-warning-color{
    color:#EDE04D;
}
.has-emulsion-notice-color{
    color:#4bb1cf;
}
.has-emulsion-info-color{
    color:#4bb1cf;
}
.has-emulsion-black-background-color{
    background-color:#000000;
}
.has-emulsion-white-background-color{
    background-color:#ffffff;
}
.has-emulsion-muted-background-color{
    background-color:#ecf0f1;
}
.has-emulsion-alert-background-color{
    background-color:#ED4F32;
}
.has-emulsion-warning-background-color{
    background-color:#EDE04D;
}
.has-emulsion-notice-background-color{
    background-color:#4bb1cf;
}
.has-emulsion-info-background-color{
    color:#4bb1cf;
}