/* -------------------------------------------
    Alpha Layout Builder Admin
        1. Panel Header
        2. Condition
            2-1. Condition Category
            2-2. Condition
        3. Options
        4. Layout Box
        5. Page Layout on Studio Import Popup
---------------------------------------------- */
 
@import '../../../assets/sass/config';
@import '../../../assets/sass/mixins';
@import '../../../assets/sass/direction';

 // 1. Panel Header
 @keyframes quick-anim {
    0% { #{$left}: -50px }
    to { #{$left}: 120%; }
}
.alpha-layouts-save:not(.require-save) {
    display: none;
}
@keyframes save-anim-down {
    0% {opacity: 0; height: 0; }
    100% {opacity: 1; height: 45px; }
}
.alpha-layouts-save {
    .alpha-wrap &.button {
       padding: 0;
       min-height: 0;
       width: 178px;
    }
    &.require-save {
       position: relative;
       margin-bottom: 40px;
       overflow: hidden;

       .alpha-wrap & {			
           height: 45px;
           line-height: 45px;
           max-width: 178px;
           border: none;
           animation-name: save-anim-down;
           animation-duration: .7s;
           animation-fill-mode: both;
           animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
       }

        &.button-dark {
            min-height: auto;
            background-color: var(--alpha-primary-color);
            border-color: var(--alpha-primary-color);
        }
    }

    i {
        font-size: 16px;
        margin-#{$right}: .5em;
    }
}
.alpha-layouts-save.require-save:before {
    content: '';
    position: absolute;
    border-#{$left}: 20px solid rgba(255,255,255,.2);
    top: -50%;
    height: 200%;
    transform: rotate(20deg);
    animation: quick-anim infinite linear 1s;
}

// 2. Condition
// 2-1. Condition Category
.alpha-layouts-container > *{
    width: 100%;
}
@media(min-width: 576px) {
    .alpha-layouts-container {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12.5px;
        > * {
            width: 50%;
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 12.5px;
        }
    }
}
@media(min-width: 1299px) {
    .alpha-layouts-container > * {
        width: 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}
@media(max-width: 991px) {
    #alpha_layout_builder {
        .alpha-admin-panel-side {
            flex: 0 0 250px;
            max-width: 250px;
        }
        .alpha-admin-panel-content {
            flex: 0 0 calc(100% - 250px);
            max-width: calc(100% - 250px);
        }
    }
}
@media (max-width: 767px) {
    #alpha_layout_builder {
        display: block;
        .alpha-admin-panel-side,
        .alpha-admin-panel-content {
            max-width: none;
        }
        .alpha-admin-panel-side {
            margin-bottom: 10px;
            border-bottom: 1px solid var(--alpha-admin-border-color-1);
        }
        .alpha-layout-builder-categories {
            min-height: auto;
        }
    }
}
.alpha-layout-builder-categories {
    border-radius: 3px;
    margin: 0;
    min-height: 616px;
    img {
        width: 22px;
        vertical-align: middle;
        margin-#{$right}: 8px;
        opacity: .5;
    }
    li:first-child {
        border-radius: 3px 3px 0 0;
    }
    li:last-child {
        border-radius: 0 0 3px 3px;
    }
}
.alpha-condition-cat {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    transition: color .3s;
    cursor: pointer;
    &:hover,
    &.active {
        color: var(--alpha-primary-color);
        i {
            color: var(--alpha-primary-color);
        }
    }
    i {
        width: 30px;
        margin-top: -4px;
        padding-#{$right}: 10px;
        color: var(--alpha-light-color);
        font-size: 18px;
        text-align: center;
        transition: color .3s;
    }
    &:not(:last-child) {
        margin-bottom: 39px;
    }
    &.alpha-condition-cat-site i {
        margin-top: -2px;
        font-size: 20px;
    }
}
.alpha-condition-count {
    position: relative;
    top: 1px;
    margin-#{$left}: 5px;
}

// 2-2. Condition
.alpha-condition {
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 13px 20px;
    background: var(--alpha-white-color);
    border: 1px solid var(--alpha-admin-border-color-1);
    border-radius: 3px 3px 0 0;
    transition: background-color .3s;

    > img {
        position: absolute;
        #{$left}: 15px;
        width: 40px;
        opacity: 0.15;
        transition: opacity .2s, left .2s;

        .alpha-layout-item.edit &,
        .alpha-layout-item.edit-condition & {
            opacity: 0;
            #{$left}: -5px;
        }
    }

    &:before {
        content: '';
        position: absolute;
        z-index: -1;
        #{$left}: 31px;
        top: 24px;
        background: var(--alpha-admin-dark-grey-color-1);
        box-shadow: 0 0 300px 200px var(--alpha-admin-dark-grey-color-1);
        border-radius: 50%;
        width: 700px;
        height: 700px;
        transform: translate(if-ltr(-50%, 50%), -50%) scale(.05);
        opacity: 0;
        transition: transform .5s cubic-bezier(.4,0,.22,1), opacity .3s;
    }
    > .alpha-condition-button {
        border: 0;
        cursor: pointer;
        padding: 10px;
        margin: side-values(-10px -20px -10px 0);
        background: transparent;
        outline: 0;
        color: var(--alpha-white-color);
        transition: color .2s, opacity .2s, margin ease-out .2s;
        opacity: 0;

        &:first-of-type {
            margin-#{$left}: auto;
        }
    }
    .edit &,
    .edit-condition & {
        padding-#{$left}: 50px;
    }
}
.alpha-layout-item:hover {
    .alpha-condition-button {
        margin-#{$right}: 0;
        opacity: 1;
    }
}
.alpha-condition-layout {
    position: relative;
    border: 1px solid var(--alpha-admin-border-color-1);
    border-top: 0;
    border-radius: 0 0 3px 3px;
}
span.alpha-condition-edit-back {
    position: absolute;
    font-size: 20px;
    #{$left}: 25px;
    padding: 20px;
    opacity: 0;
    color: var(--alpha-light-color);
    visibility: hidden;
    cursor: pointer;
    transition: .3s;

    &:hover {
        color: var(--alpha-white-color);
    }
    &.fa-arrow-left {
        content: "\f061";
    }

    .alpha-layout-item.edit &,
    .alpha-layout-item.edit-condition & {
        opacity: 1;
        #{$left}: 0;
        visibility: visible;
        transition: opacity .3s, #{$left} .3s, color .3s;
    }
}
button.alpha-condition-edit-back {
    margin-top: 20px;
}
.alpha-layout-condition {
    padding: 15px 20px;
    cursor: pointer;
    border-top: 1px solid #eee;
}
.alpha-condition-title {
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.025em;
    cursor: pointer;
    min-width: 50px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color .15s;

    &:hover,
    &:focus,
    &:empty {
        border-bottom-color: var(--alpha-admin-border-color-1);
    }

    &:focus {
        outline: none;
    }
}
.alpha-condition-default {
    .alpha-condition-title:after {
        content: none;
    }
}
#alpha_layout_builder,
#alpha_layout_builder .alpha-admin-panel-content {
    position: relative;
}
#alpha_layout_builder {
    .alpha-admin-panel-side {
        padding: 30px;
    }
    .alpha-admin-panel-content {
        padding: 30px 40px 0;
    }
}
.alpha-condition-menu {
    position: absolute;
    z-index: 2;
    padding: 8px 0;
    background: var(--alpha-white-color);
    border: 1px solid #eee;
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.15);

    a {
        display: block;
        padding: 6px 20px;
        color: #444;
        text-decoration: none;
        transition: color .2s, background-color .2s;

        &:hover {
            color: var(--alpha-dark-color);
            background-color: #f3f3f5;
        }
        &:focus {
            color: var(--alpha-dark-color);
            background-color: #eee;
            box-shadow: none;
            outline: 0;
        }

        > i {
            width: 12px;
            margin: side-values(0 10px 0 -4px);
            vertical-align: middle;
            text-align: center;
        }
    }
}

// 3. Options
.alpha-layout-item {
    margin-bottom: 30px;

    .alpha-layout {
        font-size: 12px;
    }
    label {
        font-size: 12px;
        margin-bottom: 6px;
    }
    &:hover {
        .alpha-condition-title {
            color: var(--alpha-white-color);
        }
        .alpha-condition:before {
            transform: translate(if-ltr(-50%, 50%), -50%);
            opacity: 1;
        }
    }
}
.alpha-layout-more {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 487px;
    padding: 14px;
    margin-bottom: 25px;
    border: 3px dashed var(--alpha-admin-border-color, #444a4f);
    border-radius: 7px;
    color: var(--alpha-grey-color);
    text-align: center;
    cursor: pointer;
    transition: color .3s, border-color .3s;

    &:hover {
        color: #444;
        border-color: var(--alpha-light-color);
        .alpha-icon-plus {
            color: #444;
            box-shadow: 6px 3px 25px  rgba(0, 0, 0, 0.1);
        }
    }
}

.alpha-icon-plus {
    display: block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    font-size: 30px;
    border-radius: 50%;
    color: var(--alpha-grey-color);
    background: var(--alpha-admin-bg-color);
    transition: color .3s, box-shadow .3s;
    box-shadow: 4px 2px 15px  rgba(0, 0, 0, 0.06);

    &:before,
    &:after {
        content: '';
        position: absolute;
        display: block;
        top: 50%;
        #{$left}: 50%;
        margin-#{$left}: -.05em;
        margin-top: -.5em;
        width: .1em;
        height: 1em;
        border-radius: 1em;
        background: currentColor;
    }
    &:after {
        margin-#{$left}: -.5em;
        margin-top: -.05em;
        width: 1em;
        height: .1em;
    }
}

.alpha-layout-control .radio-default,
.alpha-radio-button-set input,
.alpha-radio-image-set input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.alpha-layout-options {
    position: absolute;
    #{$left}: 20%;
    #{$right}: 0;
    top: 0;
    bottom: 0;
    border-radius: 0 0 7px 7px;
    opacity: 0;
    background: var(--alpha-admin-bg-color);
    visibility: hidden;
    transition: left .2s, opacity .2s, visibility .3s;

    > div {
        height: 100%;
        overflow-y: auto;
        padding: 22px;
        &::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    &:before,
    &:after {
        content: '';
        position: absolute;
        #{$left}: 0;
        #{$right}: 0;
        bottom: 0;
        height: 30px;
        border-radius: 7px;
        background: linear-gradient(rgba(255,255,255,0), var(--alpha-white-color));
    }
    &:before {
        content: '';
        position: absolute;
        #{$left}: 0;
        #{$right}: 0;
        top: 0;
        height: 30px;
        background: linear-gradient(var(--alpha-white-color), rgba(255,255,255,0));
    }

    img {
        max-width: 100%;
    }

    .alpha-layout-item.edit & {
        #{$left}: 0;
        opacity: 1;
        visibility: visible;
        transition: left .3s, opacity .3s;
    }

    .alpha-radio-image-set {
        display: flex;
        flex-wrap: wrap;

        input:checked + label > img {
            filter: none;
        }
        label {
            position: relative;
            display: block;
            width: calc(33.33% - 10px);
            margin: side-values(0 15px 5px 0);
        }
        label:last-child {
            margin-#{$right}: 0;
        }
        img {
            display: block;
            filter: grayscale(1) opacity(0.32);
        }
    }
    .alpha-layout-control[data-option="loadmore_type"] .alpha-radio-image-set {
        flex-wrap: nowrap;
    }
    label.alpha_content_archive_product_loadmore_type_page {
        width: 34%;
    }
    label.alpha_content_archive_product_loadmore_type_button {
        width: 40%;
    }
    label.alpha_content_archive_product_loadmore_type_scroll {
        width: 15%;
    }

    .alpha-layout-part-control {
        font-size: 13px;
        width: 100%;
        padding: 1px 10px;
        border: 1px solid var(--alpha-admin-border-color-1, #444a4f);
        outline: 0;
        transition: box-shadow .3s;

        &:focus {
            box-shadow: none;
        }
    }
}
.alpha-scheme-options {
    position: absolute;
    #{$left}: 0;
    #{$right}: 0;
    top: 0;
    height: 100%;
    opacity: 0;
    padding: 22px;
    visibility: hidden;
    background: var(--alpha-admin-bg-color);
    transition: opacity .3s, visibility .3s;
    overflow-y: auto;

    label {
        display: block;
        margin-bottom: 10px;
    }

    .apply-text {
        margin-bottom: 15px;
    }
    > .disabled > :not(label) {
        display: none;
    }

    .alpha-scheme-all:not(.disabled) ~ div {
        opacity: .4;
        pointer-events: none;

        input[type=checkbox] {
            border-color: #e1e2e8;
            &:before {
                color: #e1e2e8;
            }
        }
    }

    .alpha-layout-item.edit-condition & {
        visibility: visible;
        opacity: 1;
        transition: opacity .3s;
    }

    .select2-search--inline:first-child {
        width: 100%;
    }
    .select2-search--inline input.select2-search__field {
        min-width: 100%;
    }
    .select2-container {
        min-width: 100%;
        margin-bottom: 15px;
    }
    span.select2-dropdown {
        border-color: var(--alpha-light-color);
    }
    .select2.select2-container .select2-selection {
        min-height: auto;
        border-color: #e1e2e8;
        border-radius: 3px;
    }
    span.select2-selection--multiple .select2-selection__choice {
        border: 0;
        background: #eee;
    }
    .select2-dropdown li {
        margin-bottom: 0;
    }
    .select2-search__field {
        min-height: auto;
        line-height: 1;
        
        &::placeholder {
            color: var(--alpha-grey-color);
        }
    }
    .select2-selection--multiple ul.select2-selection__rendered {
        overflow: visible;
    }
    .select2-results__option[aria-selected=true],
    .select2-results__option[data-selected=true] {
        background: #eee;
    }
}

.alpha-layout-control {
    position: relative;
    padding: 7px 0;
    
    label {
        padding: 5px 0;
        & + p {
            margin: -8px 0 5px;
            font-size: 12px;
        }
    }
    .alpha-radio-image-set {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -10px;
    }
    textarea {
        width: 100%;
    }
    .label-default {
        padding: 0;
        margin: -6px 0 0;
        font-size: 15px;
        color: #aaa;
        #{$right}: 0;
        position: absolute;
        top: 20px;
        transition: color .3s;
    }
    .label-default:hover,
    input:checked + .label-default {
        color: var(--alpha-dark-color);
    }
    > input + label.label-default:before {
        color: inherit;
    }
}
h4.alpha-layout-control {
    font-size: 15px;
}
.alpha-layout-control .alpha-block-select {
    display: flex;
    flex-wrap: wrap;
}

.alpha-block-select {
    .alpha-layout-part-control {
        padding: side-values(1px 20px 1px 10px);
    }
    &.inactive-my {
        select,
        .alpha-radio-button-extend,
        .new-block-template {
            display: none;
        }
    }
    select {
        margin-top: 10px;
    }
    a {
        padding: 12px 7px;
        color: var(--alpha-grey-color);
        transition: color .3s;
        text-decoration: none;

        &:hover {
            color: var(--alpha-dark-color);
        }
    }
    .new-block-template {
        padding: side-values(10px 0 0 2px);
        text-decoration: underline;
        &:hover {
            color: var(--alpha-primary-color);
        }
    }
}
.alpha-radio-button-extend:last-child {
    width: 100%;
}
.alpha-radio-button-set {
    flex: 0 0 100%;

    label {
        border: 1px solid var(--alpha-admin-border-color-1, #444a4f);
        padding: 7px 10px;
        background: var(--alpha-admin-bg-color);
        margin: 0;
        transition: color .3s, background-color .3s, border-color .3s;
        &:before {
            display: inline-block;
            padding: 3px;
            font-size: 16px;
        }
    }
    input:checked + label {
        background: var(--alpha-primary-color);
        border-color: var(--alpha-primary-color);
        color: var(--alpha-white-color);
        &::before {
            color: var(--alpha-white-color);
        }
    }
    input:first-child + label {
        border-radius: corner-values(4px 0 0 4px);
    }
    label:last-child {
        border-radius: corner-values(0 4px 4px 0);
    }
    label:not(:last-child) {
        border-#{$right}: 0;
    }
    + .alpha-radio-button-extend {
        position: absolute;
        #{$right}: -7px;
    }
}

// 4. Layout Box
.alpha-layout {
    position: relative;
    padding: 40px 16px 16px;

    .layout-part {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        padding: 2px;
        background: var(--alpha-white-color);
        text-align: center;
        cursor: pointer;
        transition: background .15s;
        border-bottom: 1px solid var(--alpha-admin-border-color-1);
        user-select: none;

        &:hover {
            .block-name {
                opacity: 0;
                margin-top: -20px;
            }
            .block-value {
                margin-top: 0;
                opacity: 1;
            }
        }
    }
    .set {
        background: var(--alpha-admin-bg-color-1);
    }

    .block-name {
        transition: margin-top .3s, opacity .3s, background-color .3s;
    }
    .block-name:before {
        display: inline-block;
        margin-#{$right}: 5px;
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
    }
    .hide > .block-name:before {
        content: "\f070";
    }
    .block-value {
        position: absolute;
        margin-top: 20px;
        opacity: 0;
        transition: margin-top .3s, opacity .3s;

        &:before {
            content: "\f044";
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
            font-size: 15px;
            vertical-align: middle;
        }
    }
    .layout-part.disabled {
        color: var(--alpha-grey-color);
        font-size: 0;
        background: repeating-linear-gradient(-45deg,#f4f4f4,#f4f4f4 3px,var(--alpha-white-color) 3px,var(--alpha-white-color) 8px);
    }
    .disabled > .block-value:before {
        content: "\f00d";
        font-weight: 900;
    }
    .hide > .block-value:before,
    .set > .block-value:before {
        margin-#{$right}: 5px;
    }

    .content-wrapper {
        display: flex;
    }

    .left-sidebar, .right-sidebar {
        flex: 1;
        height: 144px;
    }

    .layout-part.content {
        height: 64px;
    }
    .layout-part.footer {
        border-bottom: 0;
    }

    .content-inwrap {
        flex-wrap: wrap;
        flex: 3;
        border-#{$left}: 1px solid #eee;
        border-#{$right}: 1px solid #eee;
    }

    .general {
        position: absolute;
        #{$left}: 0;
        top: 0;
        height: 100%;
        align-items: flex-start;
        background: #eee;
        border: solid var(--alpha-white-color);
        border-width: 39px 15px 15px;
        border-radius: 0 0 3px 3px;
        transition: border-color .3s;

        span {
            margin-top: -32px;
        }

        alpha-options {
            top: -3px;
        }

        &.set, &.active {
            background: #eee;
            border-color: #f5f5f5;
        }
    }
}

// 5. Page Layout on Studio Import Popup
.alpha-studio-popup {

    button {
        cursor: pointer;
        border-radius: 3px;
    }

    label {
        cursor: pointer;
    }

    input, select {
        line-height: 2;
        min-height: 30px;
    }

    input, select, textarea, .button {
        font-family: inherit;
    }

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background: #ccc;
    }

    &::-webkit-scrollbar-track {
        background: #fff;
    }
    
    #wpfooter {
        display: none;
    }

    .alpha-wrap,
    .alpha-admin-panel,
    .alpha-admin-panel-row {
        min-height: 100%;
    }

    .alpha-wrap {
        padding: 0;
        max-width: none;
    }

    .alpha-admin-page,
    .alpha-admin-panel,
    .alpha-admin-panel-side {
        margin: 0;
    }

    .alpha-admin-panel-content {
        margin-#{$left}: auto;
        background: #f2f3f5;

        > h3 {
            margin: 15px 0 0;
            color: #313438;
            font-size: 22px;
            font-weight: 600;
            line-height: 1.3;
        }

        > p {
            margin: 2px 0 30px;
            padding-bottom: 23px;
            font-size: 13px;
            font-weight: 300;
            color: var(--alpha-body-color);
            border-bottom: 1px solid #e1e1e1;
        }
    }

    .alpha-admin-panel-side>* {
        position: static;
        top: auto;
        padding: 0;
        min-height: 0;
    }

    .alpha-layouts-save.require-save {
        width: 100%;
        max-width: none;
        margin: 0 0 20px;
    }

    .alpha-condition-cat {
        line-height: 35px;
        padding: 7px 10px;
        margin-bottom: 0;

        &:not(:last-child) {
            border-bottom: 1px solid var(--alpha-change-border-color);
        }

        &.active i,
        &:hover i {
            color: var(--alpha-light-color);
        }
    }
    
    @media(min-width: 1299px) {
        .alpha-layouts-container > * {
            width: 25%;
            flex: 0 0 25%;
            max-width: 25%;
        }
    }

    @media(min-width: 576px) {
        .alpha-layouts-container {
            margin: 0 -10px;
            > * {
                padding: 0 10px;
            }
        }
    }

    .alpha-admin-panel-side {
        overflow-y: auto;
        width: 275px;
        padding: 30px;
        position: absolute;
        background: #fff;
        top: 0;
        bottom: 0;
        #{$left}: 0;
        border: none;

        @media (min-width: 768px) {
            & {
                flex: 0 0 275px;
                max-width: 275px;
            }
        }

		h3 {
			text-align: center;
			margin: 17px 0 28px;
            font-size: 24px;
            font-weight: 700;
            line-height: 1.8;
			color: #333;

			figure {
                line-height: 0.9;
                margin: 0;
			}
		}

		img {
			width: 34px;
			height: auto;
		}

		&::-webkit-scrollbar {
			width: 2px;
		}

		&::-webkit-scrollbar-thumb {
			background: #c1c6cd;
		}
	}
}