/**
 * Gutengerg Editor Preview
 *
 *      1. Base Style
 *      2. Gutenberg Heading Widget
 *      3. Gutenberg Button Widget
 *      4. Gutenberg Container Widget
 *      5. Gutenberg Image Widget
 *      6. Gutenberg Icon Box Widget
 */

@import '../../../../../assets/sass/config';
@import '../../../../../framework/assets/sass/mixins/_mixins';
@import '../../../../../framework/assets/sass/mixins/direction';

// 1. Base Style
html {
    font-size: 62.5%;
}
body {
    font-size: 1.4rem;
}
.spacer {
    margin-bottom: 1.5rem;
}
.dashicons-alpha {
    width: 24px;
    height: 24px;
    background-size: 24px;
    background-position: center;
    background-image: url(../../../../../assets/images/mini-logo.png);
}
.block-editor-block-navigation-leaf .block-editor-block-icon {
    width: 24px;
}
.editor-styles-wrapper {
    color: var(--alpha-body-color, #777);
    body & {
        font-family: var(--alpha-body-font-family),sans-serif;
        font-size: 1.4rem;
    }
    a {
        color: var(--alpha-link-color);
    }
}
.edit-post-visual-editor__post-title-wrapper .editor-post-title {
    margin-bottom:  2em;
    border-bottom: 1px solid var(--alpha-change-border-color);
}
// Responsive Display Classes
@media (min-width: 1200px) { .hide-on-xl { display: none !important; } }
@media (max-width: 1199px) and (min-width: 992px) { .hide-on-lg { display: none !important; } }
@media (max-width: 991px) and (min-width: 768px) { .hide-on-md { display: none !important; } }
@media (max-width: 767px) and (min-width: 576px) { .hide-on-sm { display: none !important; } }
@media (max-width: 575px) { .hide-on-xs { display: none !important; } }

// Default panel styles
.icon-library {
    margin-bottom: 2.4rem;
}
h3.component-title {
    margin-top: 2rem;
}
.block-editor-block-card .block-editor-block-card__content {
    margin-bottom: 0;
    .block-editor-block-card__title {
        margin-bottom: 0;
    }
}
.components-font-size-picker .components-font-size-picker__controls .components-unit-control-wrapper {
    margin-bottom: 0;
}
.components-panel .components-flex {
    height: auto;
}
.alpha-ajaxselect2 select { width: 100% }
.components-base-control,
.components-base-control + h3,
.components-base-control + p,
.components-panel__body + p,
.components-panel__body + h3 {
    padding-left: 15px;
    padding-right: 15px;
    word-break: break-word;
}
.components-panel__body {
    .components-base-control,
    .components-base-control + p,
    .components-base-control + h3 {
        padding-left: 0;
        padding-right: 0;
    }
    .components-unit-control-wrapper {
        margin-bottom: 2.4rem;
    }
}
.components-base-control .css-pezhm9-StyledLabel {
    margin-bottom: .4rem;
}
.alpha-typography-control {
    border: 1px solid #e1e1e1;
    margin: 1rem 1rem 1.5rem;
    > h3 {
        padding-left: 0;
        padding-right: 0;
        margin-top: -1.1rem;
        width: fit-content;
        background: var(--alpha-white-color);
        margin-#{$left}: 1.5rem;
    }
    .components-panel__body & {
        padding: 0 1rem 1rem;
        margin-left: 0;
        margin-right: 0;
    }
}
.alpha-dimension-control {
    display: flex;
    flex-wrap: wrap;
    > div {
        width: 100%;
        flex: 0 0 auto;
    }
    .components-unit-control-wrapper {
        flex: 1;
        padding: 0 2px;
        .components-input-control__label {
            font-size: 1rem;
            text-transform: uppercase;
        }
    }
    .components-base-control {
        margin-bottom: 2.4rem;
    }
    .components-color-picker__body {
        padding: 1.6rem 0 1.2rem .3rem;
    }
    .components-color-picker__inputs-wrapper {
        min-width: auto;
    }
}

// 2. Gutenberg Heading Widget
.divider {
    display: inline-block;
    vertical-align: middle;
    height: 2.5rem;
    width: .1rem;
    margin: 0 1.5rem;
    background-color: var(--alpha-light-color);
}
.title-wrapper {
    display: flex;
    align-items: center;
    .link {
        display: inline-flex;
        align-items: center;
        color: var(--alpha-dark-color);
        &:hover {
            color: var(--alpha-primary-color);
        }
    }
    .divider {
        margin: 0 1.5rem;
    }
    svg {
        width: var(--alpha-heading-icon-size);
        height: inherit;
    }
    .title {
        width: 100%;
        margin: 0;
        border-width: inherit;
    }
}
.title {
    margin-bottom: 0;
    max-width: 100%;

    &::before,
    &::after {
        height: 2px;
        background: #edeef0;
    }
}
.title-left .title {
    margin-#{$right}: auto;
}
.title-right .title {
    margin-#{$left}: auto;
    text-align: right;
}
.title-center .title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.rtl .title-left .#{$theme-icon-prefix}-icon-long-arrow-right:before {
    content: "\e92b";
}
.link-left {
    .title { margin-left: 0; margin-right: 0; }
    &.title-left { justify-content: if-ltr(flex-start, flex-end); text-align: left; }
    &.title-center { justify-content: center; }
    &.title-right { justify-content: if-ltr(flex-end, flex-start); text-align: right; }
}
// Title Cross
.title-cross {
    .title {
        display: flex;
        position: relative;
        align-items: center;
        flex: 1;
        &::before {
            margin-#{$right}: 3rem;
        }
        &::after {
            margin-#{$left}: 3rem;
        }
        &::before,
        &::after {
            flex: 1;
            content: '';
        }
    }
    &.title-left .title::before,
    &.title-right .title::after { content: none }
}

// Underline
.title-underline {
    position: relative;
    text-align: $left;
    &:after {
        content: '';
        margin: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        height: 1px;
        background: #edeef0;
    }
    .title {
        display: inline-block;
        flex: 0 0 auto;
        position: relative;
        z-index: 2;
        &::after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0;
            background: var(--alpha-primary-color);
        }
    }
}
// Extra Fixed Titles
.title-underline2 {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--alpha-change-border-color);
    .title {
        font-weight: 700;
        font-size: 2rem;
    }
    .btn-link {
        padding: .5rem 0;
    }
}
@include mq(sm, max) {
    .title-wrapper {
        flex-wrap: wrap;
    }
}

// 3. Gutenberg Button Widget
.btn {
    display: inline-block;
    border: 2px solid #eee;
    background-color: #eee;
    color: var(--alpha-dark-color);
    width: auto;
    outline: 0;
    border-radius: 0;
    padding: .9em 2em;
    font-weight: 600;
    font-size: 1em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s;
    white-space: nowrap;
    cursor: pointer;

    i,
    svg {
        display: inline-block;
        margin-#{$left}: .5em;
        vertical-align: -0.1em;
    }
    svg {
        width: 1em;
        vertical-align: middle;
    }
}
.btn-block {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.btn-xl {
    font-size: 1.4em;
}
.btn-lg {
    font-size: 1.2em;
}
.btn-md {
    font-size: .9em;
}
.btn-sm {
    font-size: .8em;
}
.btn-border-thin {
    border-width: 1px;
}
.btn-rounded {
    &,
    &::before,
    &::after {
        border-radius: var(--alpha-border-radius-form);
    }
}
.btn-ellipse {
    &,
    &::before,
    &::after {
        border-radius: 7em;
    }
}
.btn-circle {
    &,
    &::before,
    &::after {
        border-radius: 50%;
    }
}

// Outline Button
.btn-outline {
    border: 2px solid #eee;
    color: var(--alpha-body-color);
    background-color: transparent;

    &:hover,
    &:active,
    &:focus {
        border-color: var(--alpha-body-color);
        background-color: var(--alpha-body-color);
        color: var(--alpha-white-color);
    }
   
    &.btn-bg {
        color: var(--alpha-white-color);
    }
}

// Button Icon
.btn-icon-left {
    > i,
    > svg {
        margin-#{$right}: .5em;
        margin-#{$left}: 0;
    }
}

// Reveal Button
.btn-reveal-left {
    i,
    svg {
        opacity: 0;
        margin-#{$left}: -1em;
        transform: translateX(if-ltr(.5em, -.5em));
        margin-#{$right}: 0;
        transition: transform .3s, opacity .3s, margin .3s;
    }
    &:hover,
    &:active,
    &:focus {
        i,
        svg {
            opacity: 1;
            margin-#{$left}: 0;
            transform: translateX(0);
            margin-#{$right}: .5em;
        }
    }
}
.btn-reveal-right {
    i,
    svg {
        opacity: 0;
        margin-#{$right}: -1em;
        transform: translateX(if-ltr(-.5em, .5em));
        margin-#{$left}: 0;
        transition: transform .3s, opacity .3s, margin .3s;
    }
    
    &:hover,
    &:active,
    &:focus {
        i,
        svg {
            opacity: 1;
            margin-#{$left}: .5em;
            transform: translateX(0);
            margin-#{$right}: 0;
        }
    }
}

// Slide Button
@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(if-ltr(-.5em, .5em));
    }
    100% {
        transform: translateX(0);
    }
}

.btn-slide-left {
    &:hover,
    &:active,
    &:focus {
        i,
        svg {
            animation: .5s ease slideLeft;
        }
    }
}
@keyframes slideRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(if-ltr(.5em, -.5em));
    }
    100% {
        transform: translateX(0);
    }
}

.btn-slide-right {
    &:hover,
    &:active,
    &:focus {
        i,
        svg {
            animation: .5s ease slideRight;
        }
    }
}
@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-.5em);
    }
    100% {
        transform: translateY(0);
    }
}

.btn-slide-up {
    &:hover,
    &:active,
    &:focus {
        i,
        svg {
            animation: .5s ease slideUp;
        }
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(.5em);
    }
    100% {
        transform: translateY(0);
    }
}

.btn-slide-down {
    &:hover,
    &:active,
    &:focus {
        i,
        svg {
            animation: .5s ease slideDown;
        }
    }
}

.btn-infinite {
    &:hover {
        i,
        svg {
            animation-iteration-count: infinite;
        }
    }
}

// Shadow Button
.btn.btn-shadow-lg {
    box-shadow: 0 13px 20px -10px rgba(0,0,0,.15);
    &:hover,
    &:active,
    &:focus {
        box-shadow: 0 13px 20px -10px rgba(0,0,0,.2);
    }
}

.btn.btn-shadow {
    box-shadow: 0 15px 20px -15px rgba(0,0,0,.15);
    &:hover,
    &:active,
    &:focus {
        box-shadow: 0 15px 20px -15px rgba(0,0,0,.2);
    }
}

.btn.btn-shadow-sm {
    box-shadow: 0 17px 20px -20px rgba(0,0,0,.15);
    &:hover,
    &:active,
    &:focus {
        box-shadow: 0 17px 20px -20px rgba(0,0,0,.2);
    }
}

// Underline Button
.btn-underline {
    &:hover,
    &.active,
    &:focus {
        &::after {
            transform: scaleX(1);
        }
    }
    &::after {
        display: block;
        margin-top: 3px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 3px;
        border-top: 1px solid;
        border-bottom: 2px solid;
        transform: scaleX(0);
        transition: transform .3s;
        content: '';
    }
}
.btn-underline.sm::after { width: 46%; }
.btn-underline.lg::after { 
    margin-left: -16.5%;
    margin-right: -16.5%;
    width: 133%;
}

// Link Button
.btn-link {
    padding: 0;
    color: var(--alpha-dark-color);
    border: 0;
    &,
    &:hover,
    &.active,
    &:focus {
        background-color: transparent;
    }
}

// Button Color Styles
.btn-primary {
    @include button-variant(var(--alpha-primary-color), var(--alpha-primary-color-hover));
}
.btn-secondary {
    @include button-variant(var(--alpha-secondary-color), var(--alpha-secondary-color-hover));
}
.btn-success  {
    @include button-variant($success-color, lighten( $success-color, 10% ));
}
.btn-warning { 
    @include button-variant($warning-color, lighten( $warning-color, 10% ));
}
.btn-danger { 
    @include button-variant($danger-color, lighten( $danger-color, 10% ));
}
.btn-dark {
    @include button-variant(var(--alpha-dark-color), var(--alpha-dark-color-hover));
}
.btn-white {
    color: var(--alpha-dark-color);
    background-color: var(--alpha-white-color);
    border-color: var(--alpha-white-color);

    &:hover,
    &:active,
    &:focus {
        color: var(--alpha-white-color);
        border-color: var(--alpha-primary-color);
        background-color: var(--alpha-primary-color);
    }

    &.btn-outline {
        color: var(--alpha-white-color);
        background-color: transparent;
        border-color: var(--alpha-white-color);
        &:hover,
        &:active,
        &:focus {
            color: var(--alpha-primary-color);
            background-color: var(--alpha-white-color);
        }
    }
    &.btn-link {
        color: var(--alpha-white-color);
        background-color: transparent;
        &:hover,
        &:active,
        &:focus {
            color: var(--alpha-white-color);
            background-color: transparent;
        }
    }
}

// Gradient Button
.btn-gradient {
    position: relative;
    color: var(--alpha-white-color);
    background: linear-gradient(135deg, #edf7fa, #cee3ea);
    border: none;
    transition: background .25s, color .25s, border .25s;
    overflow: hidden;
    vertical-align: middle;
    
    &:hover,
    &:focus {
        color: var(--alpha-white-color);
    }

    &::after {
        content: "";
        position: absolute;
        top: -50%;
        left: 0%;
        right: 0%;
        bottom: -50%;
        background-image: linear-gradient(90deg,rgba(255,255,255,0) 20%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 80%);
        transform: skewX(-45deg) translateX(-100%);
        transition: transform 0.8s;
    }

    &:hover::after {
        transform: skewX(-45deg) translateX(100%);
    }
}
.btn-gra-default {
    color: #222;

    &:hover{
        color: #222;
    }
}
.btn-gra-blue {
    background: linear-gradient(135deg, #3b8df1, #5449ff);
}
.btn-gra-orange {
    background: linear-gradient(135deg, #ffa35f, #e95454);
}
.btn-gra-pink {
    background: linear-gradient(135deg, #f85283, #b33c9e);
}
.btn-gra-green {
    background: linear-gradient(135deg, #a0ec69, #87cf47);
}
.btn-gra-dark {
    background: linear-gradient(135deg, #555555, #222222);
}

// 4. Gutenberg Container Widget
.d-flex { display: flex !important; }
.text-start { text-align: #{$left} !important; }
.text-center { text-align: center !important; }
.text-end { text-align: #{$right} !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
// Only For Backend
.alpha-gb-container {
    &.d-flex {
        > .block-editor-inner-blocks {
            width: 100%;
            justify-content: inherit;
            align-items: inherit;
        }

        .block-editor-block-list__layout {
            display: flex;
            justify-content: inherit;
            align-items: inherit;
            flex-wrap: wrap;
            .wp-block {
                margin: 0;
            }
        }
        .block-list-appender {
            width: 100%
        }
    }
}

// 5. Gutenberg Image Widget
.alpha-gb-image {
    figure {
        margin: 0;
    }
    img {
        border: 0;
    }
}

// 6. Post Type Builder
.editor-styles-wrapper {
    a, ins {
        text-decoration: none
    }
}
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]).is-selected:after { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); border-radius: 2px; top: 1px; left: 1px; right: 1px; bottom: 1px; }
[data-type="#{$theme-name}-tb/#{$theme-name}-featured-image"] {
    overflow: hidden;
}
[data-type="#{$theme-name}-tb/#{$theme-name}-featured-image"] *,
.wp-block[data-type="#{$theme-name}-tb/#{$theme-name}-featured-image"] .block-editor-block-list__block {
    position: static
}
[data-type="#{$theme-name}-tb/#{$theme-name}-featured-image"] .block-editor-block-list__block[data-type^="#{$theme-name}"]:not([contenteditable]).is-selected:after { content: none; }
[data-type="#{$theme-name}-tb/#{$theme-name}-featured-image"] .block-editor-block-list__block[data-type^="#{$theme-name}"]:not([contenteditable]).is-selected [class^="#{$theme-name}-"],
[data-type="#{$theme-name}-tb/#{$theme-name}-featured-image"] .block-editor-block-list__block[data-type^="#{$theme-name}"]:not([contenteditable]).is-selected [class^="tb-"] { outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); border-radius: 2px }
.wp-block[data-type="#{$theme-name}-tb/#{$theme-name}-featured-image"] .wp-block {
    margin: 0;
}
.wp-block[data-type="#{$theme-name}-tb/#{$theme-name}-woo-buttons"] {
    display: inline-block
}


// Product Label
.product-label-group {
    position: absolute;
    #{$left}: 2rem;
    top: 2rem;
    max-width: 11rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.product-label {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .6rem 1rem;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--alpha-white-color);
    text-transform: uppercase;
    text-align: center;
    border-radius: 3px;

    &.label-featured {
        background: var(--alpha-success-color);
    }
    &.label-new {
        background: var(--alpha-primary-color);
    }
    &.label-sale {
        background: var(--alpha-secondary-color);
    }
    &.label-stock {
        background: var(--alpha-light-color);
    }
    &.label-img {
        padding: 0;
    }
}

// Product Rating
.woocommerce-product-rating {
    display: flex;
    align-items: center;
    margin-#{$left}: 1px; // issue : need?
    line-height: 1.1;
    margin-bottom: .2rem;
    font-size: 1.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    justify-content: flex-start;
}
.star-rating {
    display: inline-block;
    position: relative;
    font-family: $theme-font;
    margin-#{$right}: .5rem;
    letter-spacing: .2em;
    cursor: pointer;

    &::before {
        content: "\e986" "\e986" "\e986" "\e986" "\e986";
        color: rgba(0, 0, 0, 0.2);
    }

    &:hover {
        .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    }

    span {
        position: absolute;
        top: 0;
        #{$left}: 0;
        white-space: nowrap;
        overflow: hidden;
        text-align: $left;
        text-indent: -9999rem;

        &::after {
            content: "\e986" "\e986" "\e986" "\e986" "\e986";
            text-indent: 0;
            position: absolute;
            #{$left}: 0;
            color: var(--alpha-secondary-color);
        }
    }

    .tooltiptext {
        #{$left}: 50%;
        top: auto;
        bottom: 150%;
        text-indent: 0;
        overflow: initial;
        letter-spacing: 0;

        &::after {
            float: none;
            content: '';
            #{$left}: inherit;
        }
    }

    + a {
        margin: 2px 0;
        // font-size: 1em;
        line-height: 1.1;
        color: #aaa;
        text-transform: capitalize;
        overflow: hidden;
        text-overflow: ellipsis;
        &:hover {
            color: var(--alpha-primary-color);
        }
    }
}

.alpha-tb-featured-image {
    .slider-wrapper {
        display: flex;
        overflow: hidden;

        & > * {
            width: 100%;
            flex: 0 0 auto;
        }
    }

    .image-gallery {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% + 2 * var(--alpha-gap, 10px));
        margin-left: calc(-1 * var(--alpha-gap, 10px));
        margin-right: calc(-1 * var(--alpha-gap, 10px));
        > * {
            width: 33.3333%;
            flex: 0 0 auto;
            padding-left: var(--alpha-gap, 10px);
            padding-right: var(--alpha-gap, 10px);
        }
    }
} 

// Product Price
.tb-woo-price .price {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: .6rem;
    font-size: 1.6em ;
    font-weight: 600;
    letter-spacing: -.05em;
    color: var(--alpha-dark-color);

    del {
        color: #aaa;
        font-weight: 400;
    }
    ins {
        margin-#{$right}: 6px;
        text-decoration: none;
    }
}