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

@import '../../../../../assets/sass/config';
@import '../../../../assets/sass/mixins/mixins';
@import '../../../../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;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--alpha-heading-font-family);
        font-weight: var(--alpha-heading-font-weight);
        line-height: var(--alpha-heading-line-height);
        letter-spacing: var(--alpha-heading-letter-spacing);
        text-transform: var(--alpha-heading-text-transform);
        color: var(--alpha-heading-color);
    }

    h1 {
        font-size: var(--alpha-heading-h1-font-size);
    }

    h2 {
        font-size: var(--alpha-heading-h2-font-size);
    }

    h3 {
        font-size: var(--alpha-heading-h3-font-size);
    }

    h4 {
        font-size: var(--alpha-heading-h4-font-size);
    }

    h5 {
        font-size: var(--alpha-heading-h5-font-size);
    }

    h6 {
        font-size: var(--alpha-heading-h6-font-size);
    }

    a:not(.btn) {
        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) {
    .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-unit-control-wrapper,
.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-unit-control-wrapper,
    .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: 1rem;
    }

    .components-color-picker__body {
        padding: 1.6rem 0 1.2rem .3rem;
    }

    .components-color-picker__inputs-wrapper {
        min-width: auto;
    }
}

.alpha-color-show {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: 10px;
}

// 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;
    text-align: left;
}

.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 {
    --alpha-btn-skin-color: var(--alpha-change-color-light-2);
    --alpha-btn-color: var(--alpha-change-color-dark-1);
    --alpha-btn-bd-color: var(--alpha-change-color-light-2);
    --alpha-btn-bg-color: var(--alpha-change-color-light-2);
    --alpha-btn-hover-color: var(--alpha-change-color-dark-1);
    --alpha-btn-hover-bd-color: var(--alpha-change-border-color-light);
    --alpha-btn-hover-bg-color: var(--alpha-change-border-color-light);
    --alpha-btn-active-color: var(--alpha-change-color-dark-1, --alpha-btn-hover-color);
    --alpha-btn-active-bd-color: var(--alpha-change-border-color-light, --alpha-btn-hover-bd-color);
    --alpha-btn-active-bg-color: var(--alpha-change-border-color-light, --alpha-btn-hover-bg-color);

    display: inline-block;
    border: 2px solid var(--alpha-btn-bd-color);
    background-color: var(--alpha-btn-bg-color);
    color: var(--alpha-btn-color);
    width: auto;
    outline: 0;
    border-radius: 0;
    // Height 44px, Width 120px for default
    padding: 1.8rem 3.9rem;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -.025em;
    line-height: 1;
    text-transform: capitalize;
    text-align: center;
    transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s;
    white-space: nowrap;
    cursor: pointer;

    i {
        display: inline-block;
        margin-#{$left}: var(--alpha-btn-icon-spacing);
        font-size: var(--alpha-btn-icon-size);
        vertical-align: -0.15em;
        line-height: 0;
    }

    svg {
        width: var(--alpha-btn-icon-size);
        height: var(--alpha-btn-icon-size);

        fill: var(--alpha-btn-color);
        stroke: var(--alpha-btn-color);

        transition: fill .3s, stroke .3s;
    }

    &:hover {
        color: var(--alpha-btn-hover-color);
        border-color: var(--alpha-btn-hover-bd-color);
        background-color: var(--alpha-btn-hover-bg-color);

        svg {
            fill: var(--alpha-btn-hover-color);
            stroke: var(--alpha-btn-hover-color);
        }
    }

    &:active,
    &:focus {
        color: var(--alpha-btn-active-color, --alpha-btn-hover-color);
        border-color: var(--alpha-btn-active-bd-color, --alpha-btn-hover-bd-color);
        background-color: var(--alpha-btn-active-bg-color, --alpha-btn-hover-bg-color);

        svg {
            fill: var(--alpha-btn-active-color, --alpha-btn-hover-color);
            stroke: var(--alpha-btn-active-color, --alpha-btn-hover-color);
        }
    }
}

.btn,
.button {
    --alpha-btn-icon-spacing: .4rem;
    --alpha-btn-icon-size: 1.3em;
}

// Solid Button
.btn-solid {
    --alpha-btn-color: var(--alpha-change-color-dark-1);
    --alpha-btn-bd-color: var(--alpha-white-color);
    --alpha-btn-bg-color: var(--alpha-white-color);
    --alpha-btn-hover-color: var(--alpha-white-color);
    --alpha-btn-hover-bd-color: var(--alpha-change-color-dark-1);
    --alpha-btn-hover-bg-color: var(--alpha-change-color-dark-1);
    --alpha-btn-active-color: var(--alpha-white-color);
    --alpha-btn-active-bd-color: var(--alpha-change-color-dark-1);
    --alpha-btn-active-bg-color: var(--alpha-change-color-dark-1);
}

// Outline Button
.btn-outline {
    --alpha-btn-bd-color: var(--alpha-change-color-light-2);
    --alpha-btn-bg-color: transparent;
    --alpha-btn-hover-bd-color: var(--alpha-change-border-color-light);
    --alpha-btn-hover-bg-color: var(--alpha-change-border-color-light);
    --alpha-btn-active-bd-color: var(--alpha-change-border-color-light);
    --alpha-btn-active-bg-color: var(--alpha-change-border-color-light);

    &.btn-outline-light {
        padding: 1.07em 2.21em;
        border-width: 1px;
    }
}

.btn-outline2 {
    position: relative;
    border: 0;
    margin: 5px;

    &:after,
    &:before {
        content: "";
        position: absolute;
        top: -5px;
        left: -5px;
        bottom: -5px;
        right: -5px;
    }

    &:after {
        border: 1px solid;
        border-color: var(--alpha-btn-bd-color);
        opacity: 1;
        transition: margin .3s, opacity .3s;
    }

    &:hover:after {
        margin: 5px;
        opacity: 0;
    }
}

.btn-outline3 {
    --alpha-btn-color: var(--alpha-body-color);
    --alpha-btn-bd-color: #eee;
    --alpha-btn-bg-color: transparent;
    --alpha-btn-hover-bd-color: #eee;
    --alpha-btn-hover-bg-color: transparent;
    --alpha-btn-active-bd-color: #eee;
    --alpha-btn-active-bg-color: transparent;

    position: relative !important;
    border-top: 2px solid var(--alpha-btn-bd-color);
    border-right: none;
    border-bottom: 2px solid var(--alpha-btn-bd-color);
    border-left: none;

    &:before,
    &:after {
        content: '';
        width: 2px;
        height: 38%;
        position: absolute;
        background-color: var(--alpha-btn-bd-color);
        transition: height .3s, background-color .3s;
    }

    &:before {
        top: 0;
        right: 0;
    }

    &:after {
        left: 0;
        bottom: 0;
    }

    &:hover,
    &:active,
    &:focus {

        &:before,
        &:after {
            height: 100%;
        }
    }

    &:hover {
        & {
            border-color: var(--alpha-btn-hover-bd-color);
        }

        &:before,
        &:after {
            background-color: var(--alpha-btn-hover-bd-color);
        }
    }

    &:active,
    &:focus {
        & {
            border-color: var(--alpha-btn-active-bd-color);
        }

        &:before,
        &:after {
            background-color: var(--alpha-btn-active-bd-color);
        }
    }
}

// Button Icon
.btn-icon {
    --alpha-btn-icon-spacing: .8rem;

    >i:first-child:last-child {
        margin: 0;
        line-height: 1;
    }
}

.btn-icon-right {

    >i,
    >svg {
        margin-#{$left}: var(--alpha-btn-icon-spacing);
        margin-#{$right}: 0;
    }
}

.btn-icon-left {

    >i,
    >svg {
        margin-#{$left}: 0;
        margin-#{$right}: var(--alpha-btn-icon-spacing);
    }
}

// Reveal Button
.btn-icon-left.btn-reveal {

    i,
    svg {
        opacity: 0;
        margin-#{$left}: -1em;
        transform: translateX(if-ltr(.5em, -.5em));
        margin-#{$right}: 0;
        transition: transform .3s, opacity .3s, margin .3s;
    }

    &:not(:hover, :active, :focus) svg {
        width: 0;
    }

    &:hover,
    &:active,
    &:focus {
        --alpha-btn-icon-spacing: .7rem;

        i,
        svg {
            opacity: 1;
            margin-#{$left}: 0;
            transform: translateX(0);
            margin-#{$right}: var(--alpha-btn-icon-spacing);
        }
    }
}

.btn-icon-right.btn-reveal {

    i,
    svg {
        opacity: 0;
        margin-#{$right}: -1em;
        transform: translateX(if-ltr(-.5em, .5em));
        margin-#{$left}: 0;
        transition: transform .3s, opacity .3s, margin .3s;
    }

    &:not(:hover, :active, :focus) svg {
        width: 0;
    }

    &:hover,
    &:active,
    &:focus {
        --alpha-btn-icon-spacing: .7rem;

        i,
        svg {
            opacity: 1;
            margin-#{$left}: var(--alpha-btn-icon-spacing);
            transform: translateX(0);
            margin-#{$right}: 0;
        }
    }
}

// Slide Button
.btn-slide-left {

    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideLeft;
        }
    }
}

.btn-slide-right {

    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideRight;
        }
    }
}

.btn-slide-up {

    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideUp;
        }
    }
}

.btn-slide-down {

    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideDown;
        }
    }
}

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

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(if-ltr(-.5em, .5em));
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(if-ltr(.5em, -.5em));
    }

    100% {
        transform: translateX(0);
    }
}


@keyframes slideUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-.5em);
    }

    100% {
        transform: translateY(0);
    }
}


@keyframes slideDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(.5em);
    }

    100% {
        transform: translateY(0);
    }
}


// Shadow Button
.btn.btn-shadow-lg {
    box-shadow: 0 5px 50px rgba(0, 0, 0, .1);

    &:hover,
    &:active,
    &:focus {
        box-shadow: none;
    }
}

.btn.btn-shadow {
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);

    &:hover,
    &:active,
    &:focus {
        box-shadow: none;
    }
}

.btn.btn-shadow-sm {
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);

    &:hover,
    &:active,
    &:focus {
        box-shadow: none;
    }
}

// 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%;
        border-bottom: 3px solid;
        transform: scaleX(0);
        transition: transform .3s;
        content: '';
    }
}

.btn-underline.sm:after {
    width: 46%;
}

.btn-underline.lg:after {
    width: 60%;
    margin-#{$left}: 0;
    transform-origin: $left;
}

// Link Button
.btn-link {
    --alpha-btn-color: var(--alpha-change-color-dark-1);
    --alpha-btn-bg-color: transparent;
    --alpha-btn-hover-bg-color: transparent;
    --alpha-btn-active-bg-color: transparent;

    padding: 0;
    border: 0;
}

// Box Shadow Button
.btn-boxshadow {
    position: relative;
    border: none;
    transition: ease transform .3s, color .3s, background-color .3s, border-color .3s, box-shadow .3s;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        opacity: 0.4;
        border-radius: inherit;
        transform: translate3d(5px, 5px, 0);
        transition: ease transform .3s;
    }

    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
    }

    >* {
        z-index: 1;
    }

    &:hover {
        transform: translate3d(2.5px, 2.5px, 0);

        &:before {
            transform: translate3d(0, 0, 0) !important;
        }
    }

    span {
        position: relative;
    }
}

// Button Shapes
.btn-rounded {

    &,
    &:before,
    &:after {
        border-radius: $corner-sm;
    }
}

.btn-ellipse {

    &,
    &:before,
    &:after {
        border-radius: 100px;
    }
}

.btn-circle {

    &,
    &:before,
    &:after {
        border-radius: 50%;
    }
}

.btn {
    &.btn-block {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    &.btn-xl {
        font-size: 2.2rem;
        padding: 2.8rem 5.1rem;
    }

    &.btn-lg {
        font-size: 1.8rem;
        padding: 2.15rem 4.4rem;
    }

    &.btn-md {
        font-size: 1.4rem;
        padding: 1.4rem 2.9rem;
    }

    &.btn-sm {
        font-size: 1.2rem;
        padding: 1.1rem 1.9rem;
    }

    &.btn-link {
        padding: 0;
    }

    &.btn-border-thin {
        border-width: 1px;
        padding: 1.4rem 2.9rem;
    }
}

// 8. Button Color Styles
.btn-default {
    --alpha-btn-color: var(--alpha-change-color-dark-1);
    --alpha-btn-bd-color: var(--alpha-change-color-light-3);
    --alpha-btn-bg-color: var(--alpha-change-color-light-3);
    --alpha-btn-hover-color: var(--alpha-change-color-dark-1);
    --alpha-btn-hover-bd-color: var(--alpha-change-border-color);
    --alpha-btn-hover-bg-color: var(--alpha-change-border-color);
    --alpha-btn-active-color: var(--alpha-change-color-dark-1);
    --alpha-btn-active-bd-color: var(--alpha-change-border-color);
    --alpha-btn-active-bg-color: var(--alpha-change-border-color);

    &.disabled {
        --alpha-btn-bd-color: var(--alpha-change-color-light-3);
        --alpha-btn-bg-color: var(--alpha-change-color-light-3);
    }

    &.btn-outline {
        --alpha-btn-bg-color: transparent;
    }
}

.btn-primary {
    --alpha-btn-skin-color: var(--alpha-primary-color);
    --alpha-btn-skin-color-hover: var(--alpha-primary-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-primary-color);
    --alpha-btn-bg-color: var(--alpha-primary-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-primary-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-primary-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-primary-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-primary-color-hover);
}

.btn-secondary {
    --alpha-btn-skin-color: var(--alpha-secondary-color);
    --alpha-btn-skin-color-hover: var(--alpha-secondary-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-secondary-color);
    --alpha-btn-bg-color: var(--alpha-secondary-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-secondary-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-secondary-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-secondary-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-secondary-color-hover);
}

.btn-accent {
    --alpha-btn-skin-color: var(--alpha-accent-color);
    --alpha-btn-skin-color-hover: var(--alpha-accent-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-accent-color);
    --alpha-btn-bg-color: var(--alpha-accent-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-accent-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-accent-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-accent-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-accent-color-hover);
}

.btn-success {
    --alpha-btn-skin-color: var(--alpha-success-color);
    --alpha-btn-skin-color-hover: var(--alpha-success-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-success-color);
    --alpha-btn-bg-color: var(--alpha-success-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-success-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-success-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-success-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-success-color-hover);
}

.btn-info {
    --alpha-btn-skin-color: var(--alpha-info-color);
    --alpha-btn-skin-color-hover: var(--alpha-info-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-info-color);
    --alpha-btn-bg-color: var(--alpha-info-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-info-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-info-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-info-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-info-color-hover);
}

.btn-warning {
    --alpha-btn-skin-color: var(--alpha-alert-color);
    --alpha-btn-skin-color-hover: var(--alpha-alert-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-alert-color);
    --alpha-btn-bg-color: var(--alpha-alert-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-alert-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-alert-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-alert-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-alert-color-hover);
}

.btn-danger {
    --alpha-btn-skin-color: var(--alpha-danger-color);
    --alpha-btn-skin-color-hover: var(--alpha-danger-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-danger-color);
    --alpha-btn-bg-color: var(--alpha-danger-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-danger-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-danger-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-danger-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-danger-color-hover);
}

.btn-dark {
    --alpha-btn-skin-color: var(--alpha-dark-color);
    --alpha-btn-skin-color-hover: var(--alpha-dark-color-hover);
    --alpha-btn-color: #fff;
    --alpha-btn-bd-color: var(--alpha-dark-color);
    --alpha-btn-bg-color: var(--alpha-dark-color);
    --alpha-btn-hover-color: #fff;
    --alpha-btn-hover-bd-color: var(--alpha-dark-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-dark-color-hover);
    --alpha-btn-active-color: #fff;
    --alpha-btn-active-bd-color: var(--alpha-dark-color-hover);
    --alpha-btn-active-bg-color: var(--alpha-dark-color-hover);
}

.btn-white {
    --alpha-btn-skin-color: var(--alpha-white-color);
    --alpha-btn-skin-color-hover: var(--alpha-primary-color);
    --alpha-btn-color: var(--alpha-dark-color);
    --alpha-btn-bd-color: var(--alpha-white-color);
    --alpha-btn-bg-color: var(--alpha-white-color);
    --alpha-btn-hover-color: var(--alpha-white-color);
    --alpha-btn-hover-bd-color: var(--alpha-primary-color);
    --alpha-btn-hover-bg-color: var(--alpha-primary-color);
    --alpha-btn-active-color: var(--alpha-white-color);
    --alpha-btn-active-bd-color: var(--alpha-primary-color);
    --alpha-btn-active-bg-color: var(--alpha-primary-color);
}

.btn-primary,
.btn-secondary,
.btn-accent,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dark,
.btn-white {
    &.btn-solid {
        --alpha-btn-color: var(--alpha-btn-skin-color);
        --alpha-btn-bd-color: #fff;
        --alpha-btn-bg-color: #fff;
        --alpha-btn-hover-color: #fff;
        --alpha-btn-hover-bd-color: var(--alpha-btn-skin-color);
        --alpha-btn-hover-bg-color: var(--alpha-btn-skin-color);
        --alpha-btn-active-color: #fff;
        --alpha-btn-active-bd-color: var(--alpha-btn-skin-color);
        --alpha-btn-active-bg-color: var(--alpha-btn-skin-color);
    }

    &.btn-outline {
        --alpha-btn-color: var(--alpha-btn-skin-color);
        --alpha-btn-bd-color: var(--alpha-btn-skin-color);
        --alpha-btn-bg-color: transparent;
        --alpha-btn-hover-color: #fff;
        --alpha-btn-hover-bd-color: var(--alpha-btn-skin-color);
        --alpha-btn-hover-bg-color: var(--alpha-btn-skin-color);
        --alpha-btn-active-color: #fff;
        --alpha-btn-active-bd-color: var(--alpha-btn-skin-color);
        --alpha-btn-active-bg-color: var(--alpha-btn-skin-color);
    }

    &.btn-outline3 {
        --alpha-btn-color: var(--alpha-btn-skin-color);
        --alpha-btn-bd-color: var(--alpha-btn-skin-color);
        --alpha-btn-bg-color: transparent;
        --alpha-btn-hover-color: var(--alpha-btn-skin-color-hover);
        --alpha-btn-hover-bg-color: transparent;
        --alpha-btn-active-color: var(--alpha-btn-skin-color-hover);
        --alpha-btn-active-bg-color: transparent;
    }

    &.btn-link {
        --alpha-btn-color: var(--alpha-btn-skin-color);
        --alpha-btn-bg-color: transparent;
        --alpha-btn-hover-color: var(--alpha-change-color-dark-1);
        --alpha-btn-hover-bg-color: transparent;
        --alpha-btn-active-color: var(--alpha-change-color-dark-1);
        --alpha-btn-active-bg-color: transparent;
    }

    &.btn-underline {
        --alpha-btn-hover-color: var(--alpha-btn-skin-color);
        --alpha-btn-active-color: var(--alpha-btn-skin-color);
    }
}

.btn-white {
    &.btn-outline {
        --alpha-btn-hover-color: var(--alpha-primary-color);
        --alpha-btn-active-color: var(--alpha-primary-color);
    }

    &.btn-link {
        --alpha-btn-hover-color: var(--alpha-white-color);
        --alpha-btn-active-color: var(--alpha-white-color);
    }
}

// Gradient Button
.btn-gradient {
    --alpha-btn-color: var(--alpha-white-color);
    --alpha-btn-hover-color: var(--alpha-white-color);
    --alpha-btn-active-color: var(--alpha-white-color);

    position: relative;
    background: linear-gradient(113deg, #f4f4f4, #edf7fa);
    border: none;
    padding: 2rem 4.9rem;
    transition: background .25s, color .25s, border .25s, box-shadow .25s;
    overflow: hidden;

    &.btn-xl {
        padding: 3rem 4.9rem;
    }

    &.btn-lg {
        padding: 2.45rem 4.4rem;
    }

    &.btn-md {
        padding: 1.6rem 3rem;
    }

    &.btn-sm {
        padding: 1.25rem 2rem;
    }

    &: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-primary {
    background: linear-gradient(100deg, var(--alpha-primary-gradient-2) 26%, var(--alpha-primary-gradient-1) 74%);
}

.btn-gra-purple {
    background: linear-gradient(135deg, #8b47de 26%, #1637e2 74%);
}

.btn-gra-blue {
    background: linear-gradient(148deg, #00cfff 26%, #00a2ff 74%);
}

.btn-gra-orange {
    background: linear-gradient(142deg, #fc7638 26%, #fd5d42 74%);
}

.btn-gra-pink {
    background: linear-gradient(148deg, #da008b 29%, #9400f4 71%);
}

.btn-gra-green {
    background: linear-gradient(124deg, #3ac3d5 26%, #aab927 74%);
}

.btn-gra-dark {
    background: linear-gradient(128deg, #7f7c7c 27%, #414141 73%);
}

.btn-link-gradient {
    background: transparent;

    &,
    & i:before {
        background-size: 100%;
        background-attachment: scroll;
        background-position: 0 0;
        background-repeat: repeat;
        -webkit-box-decoration-break: clone;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    &:after {
        content: none;
    }

    &.btn {
        padding: 0;
    }

    &.btn-gra-primary {

        &,
        & i:before {
            background-image: linear-gradient(100deg, var(--alpha-primary-gradient-2) 26%, var(--alpha-primary-gradient-1) 74%);
        }
    }

    &.btn-gra-purple {

        &,
        & i:before {
            background-image: linear-gradient(135deg, #8b47de 26%, #1637e2 74%);
        }
    }

    &.btn-gra-blue {

        &,
        & i:before {
            background-image: linear-gradient(148deg, #00cfff 26%, #00a2ff 74%);
        }
    }

    &.btn-gra-orange {

        &,
        & i:before {
            background-image: linear-gradient(142deg, #fc7638 26%, #fd5d42 74%);
        }
    }

    &.btn-gra-pink {

        &,
        & i:before {
            background-image: linear-gradient(148deg, #da008b 29%, #9400f4 71%);
        }
    }

    &.btn-gra-green {

        &,
        & i:before {
            background-image: linear-gradient(124deg, #3ac3d5 26%, #aab927 74%);
        }
    }

    &.btn-gra-dark {

        &,
        & i:before {
            background-image: linear-gradient(128deg, #7f7c7c 27%, #414141 73%);
        }
    }

    &:hover,
    &:active,
    &:focus {
        background-position: 3em 0;
    }
}

// Button Text Hover Styles
.btn-text-hover-effect {
    vertical-align: middle;
    overflow: hidden;

    span {
        display: inline-block;
        position: relative;
        z-index: 3;
        transition: opacity .65s, transform .85s;

        &:after {
            content: attr(data-text);
            position: absolute;
            white-space: nowrap;
            top: 50%;
            opacity: 0;
            transition: inherit;
        }
    }

    &:hover span:after {
        opacity: 1;
    }
}

.btn-text-switch-left {
    span:after {
        left: 100%;
        transform: translate(50%, -50%);
    }

    &:hover span {
        transform: translateX(-200%);

        &:after {
            transform: translate(100%, -50%);
        }
    }
}

.btn-text-switch-up {
    span:after {
        left: 50%;
        transform: translate(-50%, 100%);
    }

    &:hover span {
        transform: translateY(-200%);

        &:after {
            transform: translate(-50%, 150%);
        }
    }
}

.btn-text-marquee-left {
    span:after {
        left: 100%;
        transform: translate(100%, -50%);
    }

    &:hover span {
        animation: btnMarqueeLeft 2s linear infinite;
    }
}

.btn-text-marquee-up {
    span:after {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 100%);
    }

    &:hover span {
        animation: btnMarqueeUp 1s linear infinite;
    }
}

.btn-text-marquee-down {
    span:after {
        top: -100%;
        left: 50%;
        transform: translate(-50%, -100%);
    }

    &:hover span {
        animation: btnMarqueeDown 1s linear infinite;
    }
}

/* Hover Text effects */
@keyframes btnMarqueeLeft {
    100% {
        transform: translateX(-200%);
    }
}

@keyframes btnMarqueeUp {
    100% {
        transform: translateY(-200%);
    }
}

@keyframes btnMarqueeDown {
    100% {
        transform: translateY(200%);
    }
}

/* Button Background Hover Styles */

// Sweep Effects
.btn-bg-hover-effect {
    position: relative;
    overflow: hidden;

    span,
    i {
        position: relative;
        z-index: 1;
    }

    &:before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: all .4s;
        background-color: var(--alpha-btn-hover-bg-color);
    }

    &.btn-outline {
        background-color: transparent;
    }

    &.btn-antiman:before {
        width: 100%;
        height: 100%;
    }

    &.btn-bubble,
    &.btn-bubble.btn-outline {
        --alpha-btn-color: var(--alpha-dark-color);

        padding: 0;
        border: none;
    }
}

.btn-sweep-to-right {
    &:before {
        transform: scaleX(0);
        transform-origin: 0 50%;
    }

    &:hover:before,
    &:focus:before {
        transform: scaleX(1);
    }

    &:hover {
        background-color: var(--alpha-btn-bg-color);
    }
}

.btn-sweep-to-left {
    &:before {
        transform: scaleX(0);
        transform-origin: 100% 50%;
    }

    &:hover:before,
    &:focus:before {
        transform: scaleX(1);
    }

    &:hover {
        background-color: var(--alpha-btn-bg-color);
    }
}

.btn-sweep-to-bottom {
    &:before {
        transform: scaleY(0);
        transform-origin: 50% 0%;
    }

    &:hover:before,
    &:focus:before {
        transform: scaleY(1);
    }

    &:hover {
        background-color: var(--alpha-btn-bg-color);
    }
}

.btn-sweep-to-top {
    &:before {
        transform: scaleY(0);
        transform-origin: 50% 100%;
    }

    &:hover:before,
    &:focus:before {
        transform: scaleY(1);
    }

    &:hover {
        background-color: var(--alpha-btn-bg-color);
    }
}

.btn-sweep-to-horizontal {
    &:before {
        transform: scaleX(0);
        transform-origin: 50% 50%;
    }

    &:hover:before,
    &:focus:before {
        transform: scaleX(1);
    }

    &:hover {
        background-color: var(--alpha-btn-bg-color);
    }
}

.btn-sweep-to-vertical {
    &:before {
        transform: scaleY(0);
        transform-origin: 50% 50%;
    }

    &:hover:before,
    &:focus:before {
        transform: scaleY(1);
    }

    &:hover {
        background-color: var(--alpha-btn-bg-color);
    }
}

.btn-antiman,
.btn-bubble {
    overflow: visible;
}

.btn-antiman {
    &:before {
        opacity: 0;
        transform: scale3d(1.3, 1.3, 1);
    }

    &:hover:before,
    &:focus:before {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.btn-bubble {
    background-color: transparent !important;

    &:before {
        #{$left}: -1.875em;
        top: 50%;
        width: 3.75em;
        height: 3.75em;
        border-radius: 3.75em;
        background-color: var(--alpha-btn-bg-color);
        transform: translateY(if-ltr(-50%, 50%));
    }

    &.btn-outline {
        &:before {
            border: 2px solid var(--alpha-btn-bd-color);
            background-color: transparent;
        }
    }

    &:hover:before {
        width: calc(100% + 3.75em);
        background-color: var(--alpha-btn-hover-bg-color);
    }

    &.btn-outline:hover:before {
        border-color: var(--alpha-btn-hover-bd-color);
    }

    &:focus:before,
    &:active:before {
        width: calc(100% + 3.75em);
        background-color: var(--alpha-btn-active-bg-color);
    }

    &.btn-outline:hover:before {
        border-color: var(--alpha-btn-active-bd-color);
    }
}

// For gutenberg
.btn.hover-bg-primary {
    --alpha-btn-hover-bg-color: var(--alpha-primary-color-hover);
    --alpha-btn-active-bd-color: var(--alpha-primary-color-hover);

    &.btn-bubble.btn-outline {
        --alpha-btn-hover-color: var(--alpha-dark-color);
        --alpha-btn-active-color: var(--alpha-dark-color);
        --alpha-btn-hover-bg-color: transparent;
        --alpha-btn-active-bg-color: transparent;
    }
}

.btn.hover-bg-secondary {
    --alpha-btn-hover-bg-color: var(--alpha-secondary-color-hover);
    --alpha-btn-active-bd-color: var(--alpha-secondary-color-hover);

    &.btn-bubble.btn-outline {
        --alpha-btn-hover-color: var(--alpha-dark-color);
        --alpha-btn-active-color: var(--alpha-dark-color);
        --alpha-btn-hover-bg-color: transparent;
        --alpha-btn-active-bg-color: transparent;
    }
}

.btn.hover-bg-warning {
    --alpha-btn-hover-bg-color: var(--alpha-warning-color-hover);
    --alpha-btn-active-bd-color: var(--alpha-warning-color-hover);

    &.btn-bubble.btn-outline {
        --alpha-btn-hover-color: var(--alpha-dark-color);
        --alpha-btn-active-color: var(--alpha-dark-color);
        --alpha-btn-hover-bg-color: transparent;
        --alpha-btn-active-bg-color: transparent;
    }
}

.btn.hover-bg-danger {
    --alpha-btn-hover-bg-color: var(--alpha-danger-color-hover);
    --alpha-btn-active-bd-color: var(--alpha-danger-color-hover);

    &.btn-bubble.btn-outline {
        --alpha-btn-hover-color: var(--alpha-dark-color);
        --alpha-btn-active-color: var(--alpha-dark-color);
        --alpha-btn-hover-bg-color: transparent;
        --alpha-btn-active-bg-color: transparent;
    }
}

.btn.hover-bg-dark {
    --alpha-btn-hover-bg-color: var(--alpha-dark-color-hover);
    --alpha-btn-active-bd-color: var(--alpha-dark-color-hover);

    &.btn-bubble.btn-outline {
        --alpha-btn-hover-color: var(--alpha-dark-color);
        --alpha-btn-active-color: var(--alpha-dark-color);
        --alpha-btn-hover-bg-color: transparent;
        --alpha-btn-active-bg-color: transparent;
    }
}

// 4. Gutenberg Container Widget
.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-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;
    }
}

// 6. Gutenberg Icon Widget
.alpha-icon {
    display: inline-block;
    line-height: 1;
    transition: .25s;

    i {
        display: flex;
        width: 1em;
        align-items: center;
        justify-content: center;
    }
}