$col-accent: #8c53ff;
$col-accent-alt2: #0014ff;
$col-accent-admin: var(--wp-components-color-accent, var(--wp-admin-theme-color, #{$col-accent-alt2}));

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.components-panel__row.align-right {
    justify-content: flex-end;

}

.safi-fi-panel {
    position: relative;
    // background-color: rgb(240 240 240);
    // background-color: rgb(246 246 246);
    // background-color: #dde1ff;
    // background-color: rgba($col-accent-admin, 0.2);
    // background-color: color-mix(in srgb, $col-accent-admin 15%, transparent);
    // padding: 10px 8px;
    padding: 16px;
    // border-radius: 2px;
    // margin: 16px -8px 0;
    margin: 0 0 16px;
    margin-inline: -16px;
    border-top: 3px solid #00000014;
    // border-top: 3px solid color-mix(in srgb, $col-accent-admin 15%, transparent);
    border-top: 1.5px solid $col-accent-admin;
    border-bottom: 1px solid #ebebeb;
    // box-shadow: 0 0 4px #8e8e8e1f inset;
    box-shadow: 0 0 32px #00000010 inset;

    .safi-select-tip {
        font-size: 11px;
        font-style: italic;
        color: gray;
        color: #80808080;
        // margin: -8px 0 0 0 !important;
    }

    .safi-template {
        position: relative;
        box-shadow: none;
        // border-radius: 8px 8px 0 0;
        border-radius: 8px;
        /* position: relative; */
        display: block;
        background-color: #fff;
        cursor: pointer;
        box-sizing: border-box;
        /* box-shadow: 0 0 5px #e8dcff; */
        /* border-radius: 8px; */
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        user-select: none;
        // padding-top: 52.33%;
        padding-top: 52.63%;
        width: 100%;
        margin-bottom: 0;

        &:after {
            border-radius: inherit;
            visibility: hidden;
            content: 'Click to edit';
            pointer-events: none;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 5px;
            color: white;
            font-weight: bold;
            background-color: #00000080;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;

            transition: opacity 0.3s, visibility 0.3s;
        }

        &:hover {
            &:after {
                visibility: visible;
                opacity: 1;
                // animation: all 0.2s;
                transition: opacity 0.3s, visibility 0.3s;
            }
        }
    }
}

.safi-fi-panel-title {
    text-align: center;
    text-transform: uppercase;
    // font-size: 10px;
    // font-weight: 600;
    // color: $col-accent-admin;
    font-size: 9px;
    font-weight: 700;
    color: rgb(0 0 0 / 75%);
    position: absolute;
    top: -10px;
    // background: white;
    // padding: 2px 4px;
    // border-radius: 2px;
    left: 50%;
    transform: translateX(-50%);
    white-space: pre;
    background: #fcfcfc;
    padding: 2px 4px;
    border-radius: 12px;
}

.safi-active-template {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: white;
    // padding: 0 0 6px 0;
    padding: 0;
    margin: 6px 0 12px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    // border: 1px solid $col-accent-admin;


    // span {
    //     font-size: 16px;
    //     font-weight: 600;
    //     text-align: center;
    // }

    &::before {
        z-index: 1;
        content: "Selected template";
        position: absolute;
        // top: -10px;
        top: 0;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 200;
        color: white;
        background-color: $col-accent-admin;
        padding: 0 8px;
        // border-radius: 10px;
        border-radius: 0 0 10px 10px;
        // border: 1px solid $col-accent-alt2;
    }

    &:hover {
        .safi-custom-template-controls {
            opacity: 1;
            background-color: white;
        }

        .safi-custom-template-name {
            // top: 24px;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    }
}

.safi-custom-template-controls {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 8px 0 8px 0;
    transition: all 0.3s;
    opacity: 0.5;

}

.safi-custom-template-name {
    position: absolute;
    pointer-events: none;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 200;
    font-style: italic;
    text-align: center;
    color: white;
    transition: all 0.3s;
    // border: 1px solid $col-accent-alt2;
}

.safi-panel-button {
    // margin-left: 6px;
}

.safi-editor-button{

}

.safi-modal-overlay {
    background-color: rgb(255 255 255 / 40%);
    backdrop-filter: blur(1.5px);
}

.safi-modal {
    min-height: calc(100vh - 30px) !important;
    width: calc(100vw - 30px) !important;

    .components-modal__content {
        display: flex;
        flex-direction: column;
        // align-items: center;
    }
}

.safi-modal--content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.safi-modal--footer {
    text-align: right;
}

#safi-preview-content-wrap {

    position: relative;
    margin: 0 auto;
    // box-shadow: 0 0 30px #00000014;
}

#safi-preview-content {
    // position: relative;
    // margin: 0 auto;
    box-shadow: 0 0 30px #00000014;
    margin-bottom: 15vh;

    &.--hidden {
        visibility: hidden !important;
    }
}

.safi-preview-comp-group {
    position: absolute;
    // top: -30px;
    z-index: 1;
    height: 30px;
    // left: 50%;
    // transform: translateX(-50%);
    color: white;
}

$circle-size: 16px;

.safi-auto-generate {
    padding: 6px 10px;
    border-radius: 8px;
    /* border: 1px solid #d04040; */
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    white-space: pre-wrap;

    &.no-autogen {
        // background-color: #ffdcdc;
        color: #6b6b6b;
        // border: 1px dashed #d8d8d8;

        &::before {
            content: '';
            width: $circle-size;
            height: $circle-size;
            border-radius: 50%;
            display: inline-block;
            background-color: #6b6b6b;
            margin-right: 6px;

        }
    }

    &.autogen {
        cursor: pointer;
        // background-color: #d0ffdc;
        color: #0d840d;
        // border: 1px dashed #d8d8d8;

        &:hover {
            &::before {
                    color: #aaaaaa !important;
            }
        }

        &::before {
            // content: '';
            content: '\2713';
            width: $circle-size;
            height: $circle-size;
            border-radius: 50%;
            display: inline-block;
            // background-color: #0d840d;
            color: #0d840d;
            margin-right: 6px;
            border: 1.5px solid #0d840d;
            font-size: 10px;
            font-weight: 700;
            line-height: 1.35;
        }

        &.autogen-disabled {
            &::before {
                content: '' !important;
                border-color: #aaaaaa !important;
            }

            &:hover {
                &::before {
                border-color: #333 !important;
                    font-style: normal !important;
                    color: #aaaaaa !important;
                    content: '\2713' !important;
                }
            }
        }

        // &::before {
        //     // content: '';
        //     content: '\2713';
        //     width: $circle-size;
        //     height: $circle-size;
        //     border-radius: 50%;
        //     display: inline-block;
        //     background-color: #0d840d;
        //     color: #ffffff;
        //     margin-right: 6px;
        //     border: 1.5px solid #0d840d;
        //     font-size: 10px;
        //     font-weight: 700;
        //     line-height: 1.35;
        // }
    }

    &.autogen-disabled {
        // justify-content: center;
        color: #aaaaaa;
        font-style: italic;
        // padding: 0;
    }
}

a.safi-autogen-link {
    color: currentColor;
    // text-decoration: dotted;
    text-decoration-style: dotted;

    &:hover {
        text-decoration: underline;
        color: var(--wp-admin-theme-color-darker-10, #{$col-accent-admin});
    }
}

// #iframe-preview{
//     box-shadow: 0 0 60px #ffffff60;
// }
.safi-fi-panel-body {
    max-height: 320px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;

    &.--collapsed {
        max-height: 0;
    }
}

.fi-panel-footer {
    height: 16px;
    cursor: pointer;
    /* background: yellow; */
    /* position: absolute; */
    // margin-top: 4px;
    // margin-bottom: -16px;
    // margin-inline: -16px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fbfbfb;

    &:hover {
        background-color: #eee;
    }
}