: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{
    a{
        color:var(--thm_general_link_color);
        &:hover{
            color:var(--thm_general_link_hover_color);
        }
    }
    .emulsion-prepend-page-wrapper,
    main{

        color:var(--thm_general_text_color);

        .has-background:not(.has-link-color){
            *{
                color:inherit;
                a{
                    color:inherit;
                    &:hover{
                        color:inherit;
                    }
                }
            }
        }
    }
}


.show-post-image{
    color: var(--thm_white_color, #ffffff);
    *{
        color: var(--thm_white_color, #ffffff);
    }
    a:any-link{
        color: var(--thm_white_color, #ffffff);
        text-decoration-color: var(--thm_white_color, #ffffff);
        background:transparent;
        &:hover{
            color: var(--thm_white_color, #ffffff);
            text-decoration-color: var(--thm_white_color, #ffffff);
        }
    }
}
/**
 * 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
 */
body.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, #ffffff);
                &:after,
                    &:before{
                    background:var(--thm_white_color, #ffffff);
                }
            }
            input[type="checkbox"][data-skin="hamburger"]:checked + label[for="primary-menu-controll"] span{
                background:transparent;
                &:after,
                    &:before{
                    background:var(--thm_white_color, #ffffff);
                }
            }


        }
        &.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, #ffffff);
                    &: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, #ffffff);
        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, #ffffff);
                text-shadow: #000 1px 0 10px;
                background:transparent;
                &: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, #ffffff);
            background:transparent;
            &:hover{
                color:var(--thm_white_color, #ffffff);
            }
        }
    }



}

/**
 * Search Drawer
 * ========================================================================== */
body.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{
        color:var(--thm_primary_menu_color);
        background:var(--thm_primary_menu_background);
        a{
            color:var(--thm_primary_menu_link_color);
            &:hover{
                color:var(--thm_primary_menu_color);
            }
        }
        .children,
        .sub-menu{
            color:var(--thm_primary_menu_color);
            background:var(--thm_primary_menu_background);
            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{
            color:var(--thm_header_text_color);
            background:var(--thm_header_background_gradient_color);
            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);
            li:hover{
                color:var(--thm_header_hover_color);
            }

        }
        @media screen and ( max-width : 768px) {
            color:var(--thm_header_text_color);
            background:var(--thm_header_bg_color);
        }

    }
}

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

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

    .wp-block-navigation-item__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-item{
        background:var(--thm_sidebar_bg_color);

    }
}
.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{
    color:var(--thm_relate_posts_color);
    background:var(--thm_relate_posts_bg);
    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, #ffffff);
                    background-size:cover;
                    a .entry-date,
                    a{
                        color:var(--thm_white_color, #ffffff);
                        &:hover{
                            color:var(--thm_white_color, #ffffff);
                        }
                    }
                }
            }
        }
    }
}
.is-light{
    .grid{
        article{
            background:var(--thm_white_color, #ffffff);

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

.stream{
    article{
        .stream-wrapper{
            color:var(--thm_general_text_color);
            .entry-title{
                font-family:var(--thm_heading_font_family);
                font-weight:var(--thm_heading_font_weight);
                color: var(--thm_general_text_color);
                text-transform:var(--thm_heading_font_transform);
                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, #ffffff);
        }
    }

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

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

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

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

        &:not(.has-background){
            color:inherit;
            background: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{
        color:var(--thm_general_text_color);
        background:inherit;
        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{
        color:var(--thm_general_text_color);
        background:inherit;
    }
    &.is-style-stripes table:not(.has-background){
        tbody tr:nth-child(odd) {
            color:var(--thm_general_text_color);
            background-color: var(--thm_sub_background_color_darken);
            td{
                color:var(--thm_general_text_color);
            }
        }
    }
    &.is-style-stripes table.has-background{
        thead tr th{
            color:var(--thm_black_color);
            background: var(--thm_code_bg);
            // color:var(--thm_general_text_color);
        }
        tfoot tr td{
            color:var(--thm_black_color);
            background: var(--thm_code_bg);
            // 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);
            }
        }
    }
}

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

/**
 *
 * ========================================================================== */
.primary-menu-wrapper{
    .menu-main-container{
        color:var(--thm_primary_menu_color);
        background:var(--thm_primary_menu_background);
        .wp-nav-menu{
            &.primary{
                a{
                    color:var(--thm_primary_menu_color);
                }
            }
        }
    }
}
.has-category-colors{
    &.category{
        & > header{
            &.header-layer{
                .drawer-wrapper{
                    label[for="c1"]{
                        .icon{
                            fill:var(--thm_white_color, #ffffff);
                        }
                    }
                }
                &.template-part-header{
                    .header-layer-site-title-navigation{
                        .site-title-text{
                            color:var(--thm_white_color, #ffffff);
                        }
                        .site-description{
                            color:var(--thm_white_color, #ffffff);
                        }

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

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

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


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

.is-dark{
    /**
     * Custom background is Dark
     * tooltip
     */
    .sidebar-is-dark,
    main{
        .ui-tooltip {
            color: var(--thm_black_color);
            background:var(--thm_white_color, #ffffff);
            .ui-tooltip-content:before{
                border: 10px solid transparent;
                border-color:var(--thm_white_color, #ffffff);
                border-top: 10px solid  var(--thm_white_color, #ffffff);
            }
            &.bottom-tooltip .ui-tooltip-content:before{
                border: 10px solid transparent;
                border-bottom: 10px solid  var(--thm_white_color, #ffffff);
            }
        }
    }
}
/**
 * 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{
        color:var(--thm_white_color, #ffffff);
        background:var(--thm_default_bullet_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, #ffffff);
    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{
            color:var(--thm_general_text_color);

            background:transparent ! important;
            &: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,
.emulsion .wp-block-file a.wp-block-file__button,
.comment-wrapper .comment-form .submit,
.read-more .skin-button,
.editor .skin-button{
    color:var(--thm_header_text_color);
    text-decoration:none;
    background: var(--thm_header_bg_color);
    &: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
 */
body.metabox-reset-post-header{
    .header-layer{
        &.no-header-media{
            &.header-is-default-color{
                color:var(--thm_black_color);
                background:var(--thm_white_color, #ffffff);
                .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_black_color);
                    &:hover{
                        color:var(--thm_black_color);
                    }
                }
            }
        }
    }
}
/**
 * Custom background is light or dark
 * metabox reset page presentation
 */
body.is-dark,
body.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, #ffffff);
        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, #ffffff);
            &.has-background:not(.has-text-color){
                color:var(--thm_white_color, #ffffff);
            }
        }
        .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){
            color: var(--thm_black_color);
            text-shadow:none;
            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{
                color:var(--thm_black_color);
                background:var(--thm_white_color, #ffffff);
                li:before{
                    display:none;
                }
                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));
}
body .has-yellow-to-purple-gradient-background {
    background-image: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
}
body .has-green-to-yellow-gradient-background {
    background-image: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
}
body .has-yellow-to-green-gradient-background {
    background-image: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
}
body .has-red-to-yellow-gradient-background {
    background-image: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
}
body .has-yellow-to-red-gradient-background {
    background-image: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
}
body .has-purple-to-red-gradient-background {
    background-image: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
}
body .has-red-to-purple-gradient-background {
    background-image: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
}
body .has-dark-gray-background-color:not(.has-text-color){
    // twenty twenty one
    color:var(--thm_white_color, #ffffff);
}



/**
 * 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{
    background-color:#4bb1cf;
}
.has-emulsion-black-link-color a{
    color:#000000;
}
.has-emulsion-white-link-color a{
    color:#ffffff;
}
.has-emulsion-muted-link-color a{
    color:#ecf0f1;
}
.has-emulsion-alert-link-color a{
    color:#ED4F32;
}
.has-emulsion-warning-link-color a{
    color:#EDE04D;
}
.has-emulsion-notice-link-color a{
    color:#4bb1cf;
}
.has-emulsion-info-link-color a{
    color:#4bb1cf;
}