/* -------------------------------------------
    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
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13px;
    line-height: 1.4em;
    color: #3c434a;
}

@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: 25px;
    }

    &.alpha-condition-cat-site i {
        margin-top: -2px;
        font-size: 20px;
    }
}

.alpha-condition-count {
    position: relative;
    top: -1px;
    margin-#{$left}: auto;
    width: 18px;
    height: 18px;
    background: var(--alpha-primary-color);
    border-radius: 50%;
    color: var(--alpha-white-color);
    text-align: center;
    font-size: 11px;
    line-height: 18px;
}

// 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 {
        width: 25px;
        height: 25px;
        min-width: 25px;
        border: 0;
        padding: 0;
        cursor: pointer;
        margin: side-values(-10px -20px -10px 0);
        background: var(--alpha-white-color);
        outline: 0;
        color: var(--alpha-dark-color);
        transition: background .2s, color .2s, opacity .2s, margin ease-out .2s;
        opacity: 0;
        border-radius: 50%;
        font-size: 12px;
        line-height: 23px;

        &:first-of-type {
            margin-#{$left}: auto;
        }

        &:hover {
            background: #f0f0f1;
            // color: var(--alpha-white-color);
        }
    }

    .edit &,
    .edit-condition & {
        padding-#{$left}: 43px;
    }
}

.alpha-layout-item:hover {
    .alpha-condition-button {
        margin-#{$right}: 5px;
        opacity: 1;

        &:last-child {
            margin-#{$right}: 0;
        }
    }
}

.alpha-condition-layout {
    position: relative;
    border: 1px solid var(--alpha-admin-border-color-1);
    border-width: 0 1px 1px;
}

span.alpha-condition-edit-back {
    position: absolute;
    font-size: 16px;
    #{$left}: 25px;
    padding: side-values(20px 10px 20px 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;
    margin-#{$right}: 10px;
    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;
        overflow: hidden;
    }
}

.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 {
        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;
    }

    .layout-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: "\f05e";
        font-weight: 900;
    }

    .layout-hide>.block-value:before,
    .set>.block-value:before {
        margin-#{$right}: 5px;
    }

    .content-wrapper {
        display: flex;
        direction: ltr;
    }

    .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;

        .block-name {
            margin-top: -32px;
        }

        .block-value {
            margin-top: -12px;
        }

        alpha-options {
            top: -3px;
        }

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

        &:hover {
            .block-name {
                margin-top: -52px;
            }

            .block-value {
                margin-top: -32px;
            }
        }
    }

    .layout-part.templates-nav {
        background: #fff;
    }

    .templates-nav.set {
        background-color: #eee;
    }
}

.display-conditions {
    .alpha-layout {
        max-height: 300px;
        overflow: hidden;
    }

    .alpha-layout-more {
        max-height: 352px;
    }

    .templates-nav {
        border: none;
        z-index: 1;

        &.layout-part {
            position: absolute;
            align-items: center;
            left: 0;
            top: 0;
            height: 100%;
        }

        &.layout-hide {
            background: var(--alpha-admin-bg-color-1);

            i:before {
                content: "\f070";
            }
        }

        i {
            font-size: 1.2rem;
        }
    }

    .alpha-layout-options {
        z-index: 1;

        [data-option="wrap"],
        [data-option="top_bar"] {
            display: none;
        }
    }

    .alpha-scheme-options {
        z-index: 1;
    }
}

.alpha-condition-disp {
    position: relative;
    font-size: 13px;
    padding: 14px 15px;
    border: 1px solid var(--alpha-admin-border-color-1);
    background: var(--alpha-white-color);
    border-top: none;
    overflow: hidden;

    ul,
    li {
        margin: 0;
        padding: 0;
    }

    ul {
        transition: filter .2s;
    }

    li {
        position: relative;
        padding-#{$left}: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 20px;
        overflow: hidden;

        &+li {
            margin-top: 5px;
        }
    }

    li:before {
        content: '';
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--alpha-primary-color);
        border-radius: 50%;
        top: 7px;
        #{$left}: 0;
    }

    .no-condition li {
        padding-#{$left}: 20px;

        &:before {
            content: '\f013';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            width: auto;
            height: auto;
            background: transparent;
            font-size: .9em;
            opacity: .6;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .manage-conditions {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 49px;
        background-color: var(--alpha-admin-dark-grey-color-1);
        color: #fff;
        font-size: 1em;
        transform: translateY(100%);
        transition: transform .2s, box-shadow .2s;

        &:before {
            content: '\f013';
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            width: auto;
            height: auto;
            background: transparent;
            margin-#{$right}: 7px;
        }

        &:hover {
            cursor: pointer;
        }
    }

    &:hover {
        ul:not(:last-child) {
            filter: blur(2px);
        }

        .manage-conditions {
            box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
            transform: none;
        }
    }

    .edit-condition & {
        display: none;
    }
}

// 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;
        }
    }
}