/* Gutenberg Editor */

@import '../theme/mixins';
@import '../theme/direction';

html {
    font-size: 10px;
}

#riode-post-layout-meta-box {
    .mfp-content .mfp-body {
        max-height: 43.2rem;
    }
    input[type=checkbox],
    input[type=radio] {
        width: 1.6rem;
        height: 1.6rem;
    }
}

body .editor-styles-wrapper h1 { font-size: 4rem; }
body .editor-styles-wrapper h2 { font-size: 3.4rem; }
body .editor-styles-wrapper h3 { font-size: 3rem; }
body .editor-styles-wrapper h4 { font-size: 2.4rem; }
body .editor-styles-wrapper h5 { font-size: 1.8rem; }
body .editor-styles-wrapper h6 { font-size: 1.5rem; }

.editor-styles-wrapper { font-size: 1.4rem; }

body .editor-styles-wrapper {
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--heading-font-family, var(--body-font-family)), sans-serif;
        font-weight: var(--heading-font-weight, 600);
        line-height: var(--heading-line-height, var(--body-line-height));
        letter-spacing: var(--heading-letter-spacing, var(--body-letter-spacing));
        text-transform: var(--heading-text-transform, var(--body-text-transform));
        color: var(--heading-color, var(--body-color));
    }
}

@media (min-width: 768px) {
    .editor-styles-wrapper .block-editor-default-block-appender,
    .editor-styles-wrapper .block-editor-block-list__block {
        margin-left: 0;
        margin-right: 0;
    }
}

.block-editor-block-inspector > div > .components-base-control {
    padding-left: 10px;
    padding-right: 10px;
}

[class*='editor-block-list-item-riode-'] {
    .block-editor-block-types-list__item-icon {
        padding: 10px 0;
    }

    .block-editor-block-icon {
        width: 30px;
        height: 30px;
        background-size: cover;
        background-position: center;
        background-image: url('../../images/favicon.png');
    }
}

input[type=checkbox]:checked::before {
    width: auto;
    height: auto;
    margin: 0;
}

.setting-group .checkbox-setting {
    display: flex;
    align-items: center;
}

textarea {
    background-color: #fff;
}

.wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption.aligncenter {
    margin-left: auto;
    margin-right: auto; 
}

.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
    margin-left: 0;
}

.editor-styles-wrapper .block-editor-block-list__block {
    margin-top: 0;
    margin-bottom: 0;
}

.block-editor-block-list__layout .block-editor-block-list__block[data-align=full] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.block-editor-block-list__block .block-list-appender {
    &,
    textarea {
        margin: 0;
    }
}

.block-list-appender .wp-block {
    padding: 0;
}

.banner {
    background-repeat: no-repeat;
    background-size: cover;
}

.banner img {
    width: 100%;
}

.banner-content .block-editor-block-list__block {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

.components-panel {
    .components-base-control {
        & + .description {
            margin-top: -20px;
            margin-bottom: 24px;
        }
    }

    .checkbox-list {
        margin-bottom: 24px;
    }
}

.block-editor-block-inspector .dimension {
    margin-bottom: 24px;
    border: 1px solid #e1e1e1;
}

.block-editor-block-inspector .dimension h4 {
    margin-top: -10px;
    margin-left: 10px;
    width: fit-content;
    background: #fff;
    font-size: inherit;
}

.block-editor-block-inspector .dimension .options {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 5px;

    .components-base-control {
        margin: 0 5px;
        width: calc( 50% - 10px );
    }
}

.components-custom-select-control__button {
    min-width: 115px;
}

[aria-expanded=true] + .components-custom-select-control__menu {
    border: 1px solid #e1e1e1;
}

.components-custom-select-control__item {
    padding: 10px 10px 10px 20px;
}

.components-panel__body.is-opened>.components-panel__body-title {
    margin-bottom: 20px;
}

.button_tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 24px;
    border: 1px solid #a4afb7;

    p {
        width: 100%;
    }

    button {
        padding: 8px;
        flex: 1;
        justify-content: center;
        border: none;
        background-color: #fff;
    }

    button.active {
        background-color: #a4afb7;
        color: #fff;
    }
}

.grid-space {
    width: calc(100% / 60) !important;
    height: 0px;
}

.wp-block {
    max-width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}
.wp-block[data-align="left"],
.wp-block[data-align="right"] {
    padding: 0;
}

.wp-block[data-align=left]>* {
    margin-right: 1.5rem;
}

.wp-block[data-align=right]>* {
    margin-left: 1.5rem;
}

.wp-block[data-align="center"]>* {
    text-align: center;
}

.block-editor-block-list__layout .block-editor-block-list__block:before {
    top: 0;
    bottom: 0;
}

.block-editor-panel-color-gradient-settings fieldset {
    padding: 0;
}

.wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout {
    > [data-type="core/column"] {
        flex: 1;

        &:not(:first-child) {
            margin-left: 0;
        }
    }
}

.block-editor-block-list__layout {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

[data-align="full"] .block-editor-block-list__block{
    max-width: none;
}


.owl-carousel .editor-block-list__layout > .wp-block {
    margin: 0;
}

.product {
    .btn-action {
        display: block;
        width: 36px;
        height: 36px;
        margin: 5px;
        background-color: #f1f1f1;
        color: #444;
        line-height: 36px;
        text-align: center;
        transition: opacity .3s, visibility .3s, transform .3s, color .3s, background .3s, border .3s
    }

    figure {
        .btn-action {
            margin: 0 0 5px;
            border-radius: 50%;
            border: 1px solid #e1e1e1;
            background-color: #fff;
            color: #999;
        }

        .cart::after {
            content: '\e942';
            font-family: "riode";
            font-size: 18px;
        }

        .wishlist::after {
            content: '\f004';
            font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
            font-weight: 500;
            font-size: 16px;
        }

        .view {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 12px 30px;
            border: none;
            border-radius: 0;
            line-height: 1.4;
            opacity: 0;
            color: #fff;

            &::after {
                content: 'Quick View';
                font-size: 14px;
            }
        }
    }

    .product-details {
        .cart::after {
            content: 'Add To Cart';
            padding: 0 20px;
            font-size: 12px;
            font-weight: 700;
        }

        .wishlist::after {
            content: '\f004';
            font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
            font-weight: 500;
            font-size: 16px;
        }

        .view::after {
            content: '\f35d';
            font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
            font-weight: 600;
            font-size: 16px;
        }

        .wishlist {
            visibility: hidden;
            opacity: 0;
            transform: translateX(-300%);
        }

        .view {
            visibility: hidden;
            opacity: 0;
            transform: translateX(-600%);
        }

        .cart {
            width: auto;
            margin-left: 0;
            z-index: 1;
        }

        .p-action-group {
            overflow-x: hidden;
        }
    }

    .center-aligned {
        .cart {
            margin-left: 5px;
        }

        .wishlist {
            order: -1;
            transform: translateX(300%);
        }

        .view {
            transform: translateX(-300%);
        }
    }

    .right-aligned {
        .cart {
            margin-left: 5px;
            margin-right: 0;
        }

        .wishlist {
            transform: translateX(300%);
        }

        .view {
            transform: translateX(600%);
        }
    }

    &:hover {
        figure .view {
            opacity: 0.8;

            &:hover {
                opacity: 1;
            }
        }
        .product-details .btn-action {
            visibility: visible;
            opacity: 1;
            transform: none;
        }
    }
}

.product-tab .tabs {
    padding: 0;
    margin: 0 0 15px;
}

.product-category {
    .category-title {
        margin: 0;
    }

    .count {
        line-height: 1.4;
    }

    img {
        width: 100%;
    }

    .btn-shop {
        text-transform: uppercase;
        line-height: 1.4;
        font-weight: 700;
    }
}

.inner-content,
.bottom-category,
.semicircle-category {
    .category-content {
        width: auto;
        padding: 1.5rem 2rem;
    }
}

.inner-content {
    .category-content {
        padding: 0;
    }
}

.product-category-group.grid {
    figure, img {
        height: 100%;
    }

    img {
        object-fit: cover;
    }
}

.cross-txt {
  display: flex;
  align-items: center;
  justify-content: center;

  &::before,
  &::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #f4f4f4;
  }

  &::before {
    margin-right: 3rem;
  }

  &::after {
    margin-left: 3rem;
  }
}

// Define cols-1 ~ cols-8
@for $i from 1 through 8 {
    .cols-#{$i} > * {
        flex: 0 0 #{100% / $i};
        width: #{100% / $i};
    }
}

[class*='cols-'] {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;

    >* {
        padding-left: 10px;
        padding-right: 10px;
    }

    .block-editor-inner-blocks {
        flex: 100%;
        width: 100%;
    }
}

// Define col-1 ~ col-11
@for $i from 1 through 11 {
    div.col-#{$i} {
        flex: 0 0 #{100% / 12 * $i};
        width: #{100% / 12 * $i};
    }
}

// Define col-1-5 ~ col-4-5
@for $i from 1 through 4 {
    div.col-#{$i}-5 {
        flex: 0 0 #{100% / 20 * $i};
        width: #{100% / 20 * $i};
    }
}

.owl-carousel[class*='cols-'] {
    overflow: inherit;
    width: auto;

    >* {
        width: auto;
    }
}

// WP Block Editor Icon
.components-toolbar-group,
.components-panel,
.block-editor-block-navigation-tree {
    .block-editor-block-icon .dashicons-riode {
        position: relative;
        &:before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            box-shadow: -2px 2px 0 5px;
            width: 6px;
            height: 6px;
            transform: translate(-50%,-50%) rotate(45deg);
            transform-origin: center;
        }
    }
}
.block-editor-block-card {
    display: flex;
    align-items: center;
    .block-editor-block-card__title {
        margin-bottom: 0;
    }
}

// Wp Core Blocks
.editor-styles-wrapper .block-editor-block-list__block.wp-block-column:not(:first-child) {
    margin-left: 0;
}
// Gutenberg Editor
@import '../theme/config';
@import '../theme/mixins';
@import '../theme/components/slider';

.wp-block-freeform.block-library-rich-text__tinymce {
    a {
        color: #000;
    }
    p {
        margin: 0 0 2rem;
    }
    code {
        display: inline-block;
        border-radius: 4px;
        padding: 2px 5px;
        font-size: 1.4rem;
        background: none;
        color: var(--rio-primary-color);
    }
    pre {
        margin: 20px 0;
        padding: 20px;
        font-size: 16px;
        color: var(--rio-primary-color);
        background-color: #f2f3f5;
        overflow: auto;
    }
    blockquote {
        position: relative;
        padding: .8em 1em;
        border-left: 2px solid var(--rio-primary-color);
        background-color: #f2f3f5;
        p {
            margin-bottom: 0;
        }
    }
    .gallery .gallery-item {
        text-align: left;
    }
    .gallery .gallery-caption {
        margin: 0;
        padding-top: 10px;
        line-height: 1.5;
    }
} 

.edit-post-visual-editor {
    .editor-post-title .editor-post-title__input {
        color: #222;
    }

    &.editor-styles-wrapper {
        font-family: var(--body-font-family), sans-serif;
        font-size: var(--body-font-size);
        font-weight: var(--body-font-weight);
        line-height: var(--body-line-height);
        letter-spacing: var(--body-letter-spacing);
        text-transform: var(--body-text-transform);
        color: var(--body-color);
    }
    // base
    @include set-default(
        (
            base: (
                // max-width of '.container'
                _container-width: 1220px,
                // max-width of '.container-fluid'
                _container-fluid-width: 1820px,
                // grid spaces
                _gutter-lg: 15px,
                _gutter-md: 10px,
                _gutter-sm: 5px,
                _gutter-xs: 1px,
                // background of grey section
                _grey-section-bg: #f6f7f9,
                // Body
                body: (
                    margin: 0,
                    background-color: #fff,
                ),
                page-wrapper: (
                    margin-left: false,
                    margin-right: false,
                ),
            ),
        )
    );
    *, ::after, ::before {
        box-sizing: inherit;
    }

    .main-content {
        &::after {
            content: '';
            display: block;
            clear: both;
        }
    }
    
    table {
        margin-bottom: 2rem;
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        td, th {
            padding: 10px;
            text-align: $left;
            vertical-align: top;
            border-bottom: 1px solid #e9e9e9;

            &:first-child {
                padding-#{$left}: 0;
            }
        }
    }
    
    dl {
        dt {
            font-weight: 700;
            font-size: 1.1em;
        }
    }
    
    ul {
        padding-inline-start: 20px;
        ul {
            list-style: circle;
            ul {
                list-style: square;
            }
        }
    }

    ul, ol {
        margin-bottom: 2rem;
    }
    
    ol ol {
        list-style: upper-alpha;
        ol {
            list-style: lower-roman;
        }
    }
    
    .menu, .menu ul,
    .mobile-menu, .mobile-menu ul,
    .nav, .nav ul, .tabs,
    .widget ul,
    .list,
    .breadcrumb,
    .dropdown-box,
    .pagination,
    .commentlist,
    .comments > ol,
    .comment > ol,
    .nav-filters,
    .product-category ul,
    .products,
    .product-nav,
    .product-tabs>div ul,
    .woocommerce-error {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .breadcrumb,
    .post-meta,
    .post-cats,
    .post .post-title,
    .tagcloud,
    .menu .menu-item >,
    header,
    .product-category,
    .product_meta,
    .product-cat,
    .product .woocommerce-loop-product__title,
    .widget_product_categories,
    .yith-woocommerce-ajax-product-filter,
    .riode-price-filter,
    .pagination,
    .mobile-icon-bar,
    .mobile-menu-wrapper,
    .card-header,
    .cart_item,
    .nav-tabs,
    .nav-filters {
        a {
            color: inherit;
        }
    }
    
    .size-guide {
        color: inherit;
    }
    
    a {
        text-decoration: none;
        color: #000;
        transition: color .3s;
    
        &:hover,
        &:focus {
            color: var(--rio-primary-color);
        }
    }
    
    :focus {
        outline: 0;
    }
    
    figure {
        margin: 0;
    }
    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle
    }
    hr {
        margin-bottom: 2rem; // updated(925)
        border: 0;
        border-top: 1px solid $border-color-light;
    }
    input { 
        -webkit-appearance: none;
        border: 0;
        padding: 0;
        font-family: inherit;
        background: transparent;
    
        &:focus {
            outline: 0;
        }
    }
    ins {
        text-decoration: none;
    }
    i {
        font-style: normal;
    }
    button {
        &:focus {
            outline: none;
        }
    }
    input,
    textarea,
    button,
    select,
    optgroup {
        margin: 0;
    }
    
    blockquote {
        margin: 0 0 20px;
        padding: 20px;
        border-#{$left}: 2px solid var(--rio-primary-color);
        background: #f4f4f4;
    }
    
    code {
        display: inline-block;
        border-radius: 4px;
        padding: 2px 5px;
        font-size: 1.4rem;
        color: var(--rio-primary-color);
    }
    pre {
        margin: 20px 0;
        padding: 20px;
        color: var(--rio-primary-color);
        background-color: #f2f3f5;
        overflow: auto;
        font-size: font-size(16px);
    }

    dd {
        margin-left: 1rem;
    }

    .single-attachment .attachment > a {
        display: inline-block;
    }

    .screen-reader-text,
    script {
        display: none !important;
    }

    // Product Category
    .woocommerce-loop-category__title {
        margin-top: 0;
    }

    @import '../theme/base/helper';
    @import '../theme/base/type';
    @import '../theme/base/layout';
    @import '../theme/base/grid';
    @import '../theme/base/spacing';
    @import '../theme/wp-plugin/wp';
    @import '../theme/wp-plugin/gutenberg';
    @import '../theme/components/banner';
    @import '../theme/components/post';
    @import '../theme/components/button';
    @import '../theme/components/category';
    @import '../theme/components/form';
    @import '../theme/components/icon-box';
    @import '../theme/components/icon';
    @import '../theme/components/overlay';
    @import '../theme/components/product';
    @import '../theme/components/tooltip';
    @import '../theme/components/title';

    // Editor: make easy to select items by giving padding top and bottom
    .block-editor-block-list__block:not(.has-background) {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .is-root-container > .wp-block-columns {
        max-width: calc(var(--container-width, 1220px) - 20px);
        margin-left: auto;
        margin-right: auto;
    }
    
    .is-root-container > [data-align="wide"].wp-block {
        max-width: var(--container-fluid-width, 1820px);
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .block-editor-block-list__layout.is-root-container > div.wp-block[data-align="full"] {
        margin-left: 0;
        margin-right: 0;
    }
    .wp-block > .wp-block-columns {
        margin-left: calc( -1 * var(--gutter-md, 10px));
        margin-right: calc( -1 * var(--gutter-md, 10px));
    }
    .wp-block-columns > .wp-block-column {
        padding-left: var(--gutter-md, 10px);
        padding-right: var(--gutter-md, 10px);
        margin-left: 0;
    }

    // Products
    .woocommerce-loop-product__title {
        margin-top: 0;
    }

    // Posts
    .post-wrap > .post .post-content > p {
        @include text-block(4);
    }
    .post-wrap .post-title {
        margin-top: 0;
    }
    
    // Table
    .wp-block-table td, .wp-block-table th {
        border: 1px solid;
    }
    .wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
        border-color: transparent;
    }
}
// Titles 
.editor-styles-wrapper {
    .title { margin-top: 0; margin-bottom: 0; }
}