.blockish-css-filters{
    .blockish-css-filters-button{
        width: 100%;
        box-shadow: none !important;
        outline: none !important;
        border: 1px solid #dddddd !important;
        color: #111111 !important;
        transition: all 0.2s ease-in-out !important;

        &:hover{
            border-color: #1677ff !important;
            color: #1677ff !important;

            .components-text{
                color: #1677ff !important;
            }
        }

        &:disabled{
            opacity: 0.5 !important;
            cursor: not-allowed !important;
        }
    }
}

.blockish-css-filters-content{
    .blockish-css-filters-range{
        .components-range-control__root{
            .components-range-control__track{
                color: transparent;
            }

            .e1epgpqk10{
                box-shadow: inset 0 0 1px 1px rgba(0,0,0,.2);
            }
        }

        &.blockish-css-filters-blur{
            .e1epgpqk10{
                background: var(--track-background);
                background-position: 50%;
                background-size: cover;
            }
        }

        &.blockish-css-filters-brightness{
            .e1epgpqk10{
                background: linear-gradient(90deg,#000,#fff);
            }
        }

        &.blockish-css-filters-contrast{
            .e1epgpqk10{
                background: var(--track-background);
                background-size: 100% 100%;
            }
        }

        &.blockish-css-filters-saturation{
            .e1epgpqk10{
                background: linear-gradient(90deg,gray,red);
            }
        }

        &.blockish-css-filters-hue{
            .e1epgpqk10{
                background: linear-gradient(90deg,red,orange,#ff0,#adff2f,#32cd32,#00bfff,blue,#9400d3 95%);
            }
        }

        &.blockish-css-filters-invert{
            .e1epgpqk10{
                background: var(--track-background);
                background-size: 100% 100%;
            }
        }

        &.blockish-css-filters-grayscale{
            .e1epgpqk10{
                background: var(--track-background);
                background-size: 100% 100%;
            }
        }

        &.blockish-css-filters-sepia{
            .e1epgpqk10{
                background: var(--track-background);
                background-size: 100% 100%;
            }
        }
    }
}