/**
 * default CSS variables values
 * If you want to enable @variables, please refer to the following URL
 * @see https://www.tenman.info/wp3/emulsion/en/2020/03/23/scss-%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%81%ae%e7%b7%a8%e9%9b%86%e3%82%92%e8%a1%8c%e3%81%86%e5%a0%b4%e5%90%88%e3%81%ab/
 */

:root{
    --thm_dummy:16px;
    --thm_post_display_date:$post_display_date;
    --thm_post_display_author:$post_display_author;
    --thm_post_display_category:$post_display_category;
    --thm_post_display_tag:$post_display_tag;
    --thm_favorite_color_palette:$favorite_color_palette;
    --thm_hover_color:$hover_color;
    --thm_excerpt_linebreak: $excerpt_linebreak;
    // when header media not exists
    --thm_heading_font_scale: $heading_font_scale;
    --thm_heading_font_base: $heading_font_base;
    --thm_default_header_height: $default_header_height;
    --thm_header_text_color: $header_text_color;
    --thm_header_link_color: $header_link_color;
    --thm_header_hover_color: $header_hover_color;
    --thm_header_bg_color: $header_bg_color;
    --thm_header_background_gradient_color:$header_background_gradient_color;
    --thm_header_image_dim:rgba(0,0,0,.3);
    --thm_background_image_dim:$background_image_dim;
    --thm_header_media_max_height:$header_media_max_height;
    --thm_heading-font-transform: $heading-font-transform;
    --thm_heading_font_weight: $heading_font_weight;
    --thm_heading_font_family: $heading_font_family;
    --thm_common_line_height: $common_line_height;
    --thm_common_font_family: $common_font_family;
    --thm_common_font_size: $common_font_size;
    --thm_general_text_color: $general_text_color;
    --thm_general_link_hover_color: $general_link_hover_color;
    --thm_general_link_color: $general_link_color;
    --thm_background_color: $background_color;
    --thm_sub_background_color_lighten:$sub_background_color_lighten;
    --thm_sub_background_color_darken:$sub_background_color_darken;
    --thm_meta_data_font_size: $meta_data_font_size;
    --thm_meta_data_font_family: $meta_data_font_family;
    --thm_meta_data_font_transform: $meta_data_font_transform;
    --thm_align_offset:$align_offset;
    --thm_main_width: $main_width;
    --thm_content_width: $content_width;
    --thm_content_gap: $content_gap;
    --thm_content_line_height: $content_line_height;
    --thm_content_margin_top: $content_margin_top;
    --thm_box_gap: $box_gap;
    --thm_sidebar_width: $sidebar_width;
    --thm_sidebar_bg_color:$sidebar_background;
    --thm_sidebar_link_color:$sidebar_link_color;
    --thm_sidebar_hover_color:$sidebar_hover_color;
    --thm_sidebar_text_color:$sidebar_color;
    --thm_primary_menu_background:$primary_menu_background;
    --thm_primary_menu_link_color:$primary_menu_link_color;
    --thm_primary_menu_color:$primary_menu_color;
    --thm_main_width-with-sidebar: calc(100vw - var(--thm_sidebar_width) - 48px );
    --thm_caption_height: $caption_height;
    --thm_social_icon_color:$general_link_color;
    --thm_social_icon_bg_color:transparent;
    --thm_i18n_no_title:$i18n_no_title;//fallback
    --thm_footer_widget_width: $footer_widget_width;
    --thm_gallery_section_link_color: $gallery_section_link_color;
    --thm_gallery_section_color: $gallery_section_color;
    --thm_gallery_section_bg: $gallery_section_bg;
    --thm_gallery_section_height:$gallery_section_height;
    --thm_columns_section_link_color: $columns_section_link_color;
    --thm_columns_section_color: $columns_section_color;
    --thm_columns_section_bg: $columns_section_bg;
    --thm_columns_section_height:$columns_section_height;
    --thm_media_text_section_link_color: $media_text_section_link_color;
    --thm_media_text_section_color: $media_text_section_color;
    --thm_media_text_section_bg: $media_text_section_bg;
    --thm_media_text_section_height:$media_text_section_height;
    --thm_relate_posts_link_color:$relate_posts_link_color;
    --thm_relate_posts_color:$relate_posts_color;
    --thm_relate_posts_bg:$relate_posts_bg;
    --thm_comments_link_color:$comments_link_color;
    --thm_comments_color:$comments_color;
    --thm_comments_bg:$comments_bg;
    --thm_common_border:1px solid rgba(188,188,188,.5);
}
/**
 *  Static Core Colors
 */
.wp-block-table{
    $table_light_gray_background:#f3f4f5;
    $table_pale_green_background:#e9fbe5;
    $table_pale_blue_background:#e7f5fe;
    $table_pale_pink_background:#ffccf8;
    --thm_table_light_gray_background:$table_light_gray_background;
    --thm_table_pale_green_background:$table_pale_green_background;
    --thm_table_pale_blue_background:$table_pale_blue_background;
    --thm_table_pale_pink_background:$table_pale_pink_background;
}
/**
 * Static Theme Colors
 */
:root{
    --thm_black_color:#333;
    --thm_gray_color:#727477;
    --thm_silver_color:#bebebe;
    --thm_cloud_color:#ecf0f1;
    --thm_white_color:#ffffff;
    --thm_alert_color:rgba(231, 76, 60, 1);
    --thm_notice_color:rgba(163, 140, 8, 1);
    --thm_info_color:rgba(22, 160, 133, 1);
    --thm_cool_color:rgba(52, 152, 219, 1);
    --thm_alert_color_alpha:rgba(231, 76, 60, .4);
    --thm_notice_color_alpha:rgba(163, 140, 8, .4);
    --thm_info_color_alpha:rgba(22, 160, 133, .4);
    --thm_cool_color_alpha:rgba(52, 152, 219, .4);
    --thm_lighten:linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2));
    --thm_darken:linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
}
/**
 * For System Theme Color
 * default false
 * @see wp_localize_script( 'emulsion-js', 'emulsion_script_vars', array(...) );
 */
@media (prefers-color-scheme: dark) {
    // example
    .prefers-color-scheme-dark {
        --thm_general_text_color:#eee;
        --thm_general_link_color:#bbb;
        --thm_general_link_hover_color:#eee;
        --thm_background_color:#333;
        --thm_sub_background_color_lighten:#727477;
        --thm_sub_background_color_darken:#000;
        --thm_primary_menu_background:#000;
        --thm_primary_menu_link_color:#bbb;
        --thm_primary_menu_color:#eee;
        --thm_sidebar_bg_color:#000;
        --thm_sidebar_text_color:#eee;
        --thm_sidebar_link_color:#bbb;
        background:var(--thm_background_color);
    }
}
@media (prefers-color-scheme: light) {
    // example
    .prefers-color-scheme-light{
        --thm_general_text_color:#333;
        --thm_general_link_color:#666;
        --thm_general_link_hover_color:#333;
        --thm_background_color:#eee;
        --thm_sub_background_color_lighten:#fff;
        --thm_sub_background_color_darken:#aaa;
        --thm_primary_menu_background:#333;
        --thm_primary_menu_link_color:#bbb;
        --thm_primary_menu_color:#eee;
        --thm_sidebar_bg_color:#333;
        --thm_sidebar_link_color:#bbb;
        --thm_sidebar_text_color:#eee;
        --thm_social_icon_color:#666;
        background:var(--thm_background_color);
    }
}
/**
 * Exception setting when background image is specified
 *
 * Background images are difficult to achieve automatic contrast, 
 * such as images that are close to the background color or completely different from the background color
 *.
 * The following is the style when white is selected as the text color 
 * in the background image settings in the customizer settings.
 */
#document{
    .is-singular.emulsion-has-custom-background-image.has-background-img-text-white:not(.noscript){
        header.header-layer ~ .layout-block .page-wrapper .post-navigation,
        header.header-layer ~ .page-wrapper .post-navigation{
            background:transparent;
            color:#eee;
            text-shadow: #000 1px 0 10px;
            a{
                color:#bbb;         
            }
            .nav-previous,.nav-next{
                .text{
                    color:#eee;
                }
                &:hover{
                    background: rgba(0,0,0,.2);
                }
            }
        }
        .wp-block-latest-comments article{
            background:transparent;
            .wp-block-latest-comments__comment-date{
                background:transparent;
            }
        }
        .comment-wrapper{
            .comment-body{
                text-shadow:none;
                a{
                    text-shadow:none;
                }
            }
        }
        .emulsion-current-color{
            text-shadow:none;
        }
        .wp-block-latest-posts__post-full-content{
            .wp-block-group{
                position:relative ! important;

                .wp-block-table table{
                    background:transparent;
                }
                .wp-block-pullquote{
                    color: var(--thm_black_color);
                }

            }
            code,
            .wp-block-code,
            // .wp-block-table td,
            .emulsion-current-color,
            .mark-cool,
            .mark-notice,
            .mark-gray,
            .mark-info,
            .nark-alert,
            .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;
                }
            }
            .has-background:not(.has-text-color){
                text-shadow:none;
                color: var(--thm_black_color);
                a{
                    color:var(--thm_gray_color);
                    text-shadow:none;
                }
                figcaption{
                    text-shadow:none;
                    color: var(--thm_black_color);
                }
            }
        }
        .emulsion-current-color{
            box-sizing:border-box;
        }

    }

    .is-light.is-singular.emulsion-has-custom-background-image.has-background-img-text-white:not(.noscript){
        /**
         * has background image
         */
        &.custom-background[class].is-dark .layout article *:not(.wp-block-separator),
            &.custom-background[class].is-light .layout article *:not(.wp-block-separator){
            border-color: rgba(188,188,188,.3);
        }

        [data-block],
        .entry-content{
            & > .wp-block-group[style|="background"],
            & > .wp-block-group.has-background,
            & > .wp-block-table > table,
            & > .shortcode-wrapper > div:not(.gallery),
                &  > p:not(.has-text-color),
                & > div:not([class|="wp-block"]):not(.shortcode-wrapper):not(.transparent-block) {


                &.emulsion-initial-color{
                    padding:1rem;
                    color:var(--thm_black_color);
                    a{
                        color:var(--thm_gray_color);
                    }
                    *{
                        color:var(--thm_black_color);
                    }
                }
                &.emulsion-current-color{
                    /**
                     * exception todo
                     */
                    &:not(.has-background){

                        color:var(--thm_general_text_color);
                        background:transparent;

                        a{
                            color: var(--thm_general_link_color);
                            &:hover{
                                color: var(--thm_general_link_hover_color);
                            }
                        }
                    }
                    .wp-block-group__inner-container *:not(.has-background){
                        color:var(--thm_general_text_color);
                    }

                    &.woocommerce,
                    &.wc-block-grid{
                        background:transparent;
                        color:var(--thm_general_text_color);
                        a{
                            color:var(--thm_general_link_color);
                        }
                    }
                }
                &.wp-block-table{
                    &.emulsion-current-color{
                        background:transparent;
                    }
                }
                &.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;
                    }
                    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 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;
                        }
                    }
                }
            }
        }
        &:not(.bbpress) {
            // bbpress css backgroud image remove
            [data-block],
            article,
            .entry-content,
            .placeholder-header{

                *:not(.has-background){
                    --thm_social_icon_color:#ffffff;        
                    --thm_general_text_color:#eee;
                    --thm_general_link_color:#bbb;
                    --thm_general_link_hover_color:#eee;
                    --thm_sub_background_color_lighten:#666;
                    --thm_sub_background_color_darken:#000;
                }
                text-shadow: #000 1px 0 10px;

                a{
                    color:var(--thm_silver_color);
                    text-shadow: #000 1px 0 10px;
                }
                .wp-block-navigation-link__content{

                    text-shadow:none;
                }
                section[class|="sectionized"].sectionized-wp-block-columns *{
                    color:var(--thm_white_color);

                    code,
                    .wp-block-code,
                    .wp-block-table td,
                    .emulsion-current-color,
                    .mark-cool,
                    .mark-notice,
                    .mark-gray,
                    .mark-info,
                    .nark-alert,
                    .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_silver_color);
                            text-shadow:none;
                        }
                    }
                }
                .post-password-form .message,
                .wp-block-categories,
                .wp-block-verse,
                .social-navigation{
                    color:var(--thm_white_color);
                }

                .wp-block-code,
                .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_silver_color);
                        text-shadow:none;
                    }
                }
                .mark-cool,
                .mark-notice,
                .mark-gray,
                .mark-info,
                .nark-alert{
                    text-shadow:none;
                    a{
                        text-shadow:none;
                    }
                }   

                .has-background,
                blockquote,
                .wp-block-table{
                    text-shadow:none;
                }

                .wp-block-latest-posts li:hover{
                    background:transparent!important;
                }
            }
        }       
    }
}
/**
 * No Script Presentation
 */
body{
    &.noscript{

        $hover_color:#727477;
        $favorite_color_palette:#ffffff;
        $header_text_color:#333;
        $header_link_color:#727477;

        $general_link_color:#727477;
        $general_text_color:#333;
        $general_link_hover_color:#727477;

        $background_color:#ffffff;
        $sub_background_color_lighten:#727477;
        $sub_background_color_darken:#727477;

        $sidebar_background:#ffffff;
        $sidebar_link_color:#727477;
        $sidebar_hover_color:#333;
        $sidebar_color:#333;

        $primary_menu_background:#fff;
        $primary_menu_link_color:#727477;
        $primary_menu_color:#333;
        $primary_menu_link_color:#727477;


        --thm_header_image:rgba(0,0,0,0);
        --thm_white_color:#ffffff;

        --thm_favorite_color_palette:$favorite_color_palette;
        --thm_hover_color:$hover_color;
        --thm_header_bg_color: #eee;
        --thm_header_background_gradient_color:#eee;

        --thm_header_text_color: $header_text_color;
        --thm_header_link_color: $header_link_color;
        --thm_header_hover_color: $header_hover_color;

        --thm_general_text_color: $general_text_color;
        --thm_general_link_hover_color: $general_link_hover_color;
        --thm_general_link_color: $general_link_color;

        --thm_background_color: $background_color;
        --thm_sub_background_color_lighten:$sub_background_color_lighten;
        --thm_sub_background_color_darken:$sub_background_color_darken;

        --thm_sidebar_bg_color:$sidebar_background;
        --thm_sidebar_link_color:$sidebar_link_color;
        --thm_sidebar_hover_color:$sidebar_hover_color;
        --thm_sidebar_text_color:$sidebar_color;

        --thm_primary_menu_background:$primary_menu_background;
        --thm_primary_menu_link_color:$primary_menu_link_color;
        --thm_primary_menu_color:$primary_menu_color;

        --thm_social_icon_color:$general_link_color;
        --thm_social_icon_bg_color:transparent;

        --thm_gallery_section_link_color: $gallery_section_link_color;
        --thm_gallery_section_color: $gallery_section_color;
        --thm_gallery_section_bg: $gallery_section_bg;

        --thm_columns_section_link_color: $columns_section_link_color;
        --thm_columns_section_color: $columns_section_color;
        --thm_columns_section_bg: $columns_section_bg;

        --thm_media_text_section_link_color: $media_text_section_link_color;
        --thm_media_text_section_color: $media_text_section_color;
        --thm_media_text_section_bg: $media_text_section_bg;
        --thm_media_text_section_height:$media_text_section_height;

        --thm_relate_posts_link_color:$relate_posts_link_color;
        --thm_relate_posts_color:$relate_posts_color;
        --thm_relate_posts_bg:$relate_posts_bg;

        --thm_comments_link_color:$comments_link_color;
        --thm_comments_color:$comments_color;
        --thm_comments_bg:$comments_bg;

        --thm_common_border:1px solid rgba(188,188,188,.5);

        &.single-post.custom-background.emulsion-has-custom-background-image, 
        &.page.custom-background.emulsion-has-custom-background-image{
            background-image:none;
            background-color:var(--thm_background_color)!important;
        }
        .header-layer.header-image-active{
            background:var(--thm_header_bg_color);

            .header-text,
            .entry-text{
                *{
                    text-shadow:none ! important;  
                }
                &:before{
                    display:none;
                }
            }
            .wp-post-image{
                //visibility:hidden;
            }
        }

        figure.wp-block-gallery{
            margin-left:auto;
            margin-right:auto;
        }
        &.enable-alignfull{

            .wp-block-image{
                &.alignwide,
                &.alignfull{
                    position:static;
                    max-width:100%;
                    margin-left:auto;
                    margin-right:auto;
                }
            }

            .wp-block-embed{
                height:auto;
                &:after{
                    content:'required javascript';
                    display:block;
                    margin-top:1.5rem;
                    margin-bottom:.75rem;
                    width:100%;
                    text-align:center;
                }
            }
            .wp-block-pullquote.has-background{
                background:#eee!important;
            }
            .wp-block-group.has-background{
                background:#eee;

            }

            .wp-block-button.wp-block-button__link,
            [class*="mark-"]{
                // .has-background{ //@since 1.1.2 remove
                background:#eee;
                color:#333;
            }
            .badge{
                background:#eee;
            }
            .layout ul:not(.list-style-initial):not([id]) li:before, 
                .layout ol:not(.list-style-initial):not([id]) li:before{
                background:#eee;
            }
            .wp-block-cover.has-background-dim:before{
                // display:none!important;
                // background:transparent;
            }
            &.is-singular.emulsion-has-custom-background-image.has-background-img-text-white{
                .post-navigation{
                    .nav-links{
                        .nav-next:hover,
                            .nav-previous:hover{
                            background:#eee;
                        }
                        *{
                            text-shadow:none;   
                        }

                        .prev,.next{
                            color:var(--thm_general_text_color);
                        }
                        a{
                            color:var(--thm_general_text_color);
                        }
                    }
                }
            }
        }
    }
}

.emulsion-has-sidebar{
    .has-column{
        .page-wrapper{
            main{
                max-width:100%;
            }
        }
        .wp-nav-menu{
            --thm_main_width:calc(100vw - var(--thm_sidebar_width) - 48px );
        }
    }
}
.has-column{
    main{
        .grid{
            --thm_main_width:calc(100vw - var(--thm_sidebar_width) - 48px );
        }
        .stream{
            --thm_main_width:calc(100vw - var(--thm_sidebar_width) - 48px );
            --thm_content_width:410px;
        }
    }
}
main{
    // for customizer
    .grid{
        --thm_content_width: 300px;
        article{
            --thm_content_width: 100%;
        }
    }
    .stream{
        --thm_content_width: 400px;
        article{
            --thm_content_width: 100%;
        }
    }
}
#{$stream-condition},
#{$grid-condition}{
    .has-column{
        main{
            .grid{
                --thm_main_width:calc(100vw - var(--thm_sidebar_width) - 48px );
            }
            .stream{
                --thm_main_width:calc(100vw - var(--thm_sidebar_width) - 48px );
                --thm_content_width:410px;
            }
        }
    }
    main{
        .grid{
            --thm_content_width: 300px;
            article{
                --thm_content_width: 100%;
            }
        }
        .stream{
            --thm_content_width: 400px;
            article{
                --thm_content_width: 100%;

                .content{
                    display:block;
                }
                .entry-content{
                    display:none;
                }
                &.preview-is-active{
                    .content{
                        display:none;
                    }
                    .entry-content{
                        display:block;
                    }
                }
            }
        }
    }
}
/**
 * Template gallery main width
 */
#document{
    .enable-alignfull{
        &.emulsion-no-sidebar{
            &.post-template-gallery{
                --thm_main_width:100vw;
            }
        }
    }
}