@use '/src/components/config' as *;

.fromcustomizer-wrapper {
    .wrapper-content {
        .form-section {            
            .input-section {
                max-width: 100%;
                display: flex;
                align-items: center;
                position: relative;

                .input-editor{
                    position: absolute;
                    bottom: 111%;
                    left: 0.0rem;
                    background: rgb(13, 0, 23);
                    color: $color-white;
                    padding: 0.35rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                    cursor: pointer;
                }

                .setting-wrapper{
                    position: absolute;
                    background: #f8f8f8;
                    width: 15.75rem;
                    top: 3.15rem;
                    border: $border-black-medius;
                    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.125);
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                    z-index: 1;

                    .setting-nav{
                        position: absolute;
                        top: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        cursor: move;
                        user-select: none;
                        line-height: 0;
                        user-select: none;
                        font-size: 1.5rem;
                    }

                    .setting-section-dev{
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;

                        .label{
                            color: $color-black;
                            font-weight: 400;
                        }

                        .property-section{
                            display: flex;
                            gap: 0.5rem;

                            input{
                                &:hover, &:focus{
                                    box-shadow: none !important; // To overwrite default wordpress css
                                }
                            }
                        }
                    }
                }
            }

            .button-section {
                display: flex;
                align-items: center;
            }
        }
    }
}