.progressmatify-control-container {
    &.box-shadow-control {
        .shadow-indicator {
            background: none;
            border: none;
            cursor: pointer;
            position: relative;
            width: 25px;
            height: 25px;
        }
        .shadow-indicator {
            transform: translateY(5px);
            &:focus {
                outline: none !important;
                box-shadow: none !important;
            }
            .dashicon {
                font-size: 18px;
            }
        }
    }
}
.progressmatify-shadow-panel {
    min-width: 250px;
    padding: 20px;
    box-sizing: border-box;

    .box-shadow-color-picker {
        margin: 15px 0;
        .components-base-control__field,
        .components-base-control__label,
        .components-base-control {
            margin: 0 !important;
        }

        .color-indicator {
            background: none;
            border: none;
            cursor: pointer;
            position: relative;
            width: 25px;
            height: 25px;
        }
        .component-color-indicator {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-image: linear-gradient(45deg, #ddd 25%, transparent 0), linear-gradient(-45deg, #ddd 25%, transparent 0),
                linear-gradient(45deg, transparent 75%, #ddd 0), linear-gradient(-45deg, transparent 75%, #ddd 0);
            background-size: 10px 10px;
            background-position: 0 0, 0 5px, 5px -5px, -5px 0;
        }
    }

    .components-input-control__backdrop {
        border-color: #e0e0e0 !important;
    }
}