// Sidebar box-shadow presets options
.background-stripes-presets-widget {
    padding: 22px;

    #toolbar & {
        padding: 16px 22px 0;
    }

    label {
        display: block;
        margin: 0 0 10px 0;
        font-size: 12px;
        color: #333;
    }

    .background-stripes-presets-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .background-stripes-presets-item {
        margin: 0;
        padding: 0;
        background: #e2e2e2;
        border-radius: 5px;

        &:hover {
            filter: brightness(105%);
        }
    }

    .background-stripes-preset {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        color: #707070;
        cursor: pointer;
        text-decoration: none;
        font-size: 13px;
        border: 0 solid #bdbdbd;
        border-radius: 5px;
        transition: all 0.1s ease;
    }

    // Full row width, no border
    .background-stripes-presets-item:first-child {
        grid-column: 1 / 3;
    }

    // Stripes
    .background-stripes-preset-2 {
        background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 10px, transparent 10px, transparent 20px);
    }

    // Stripes Backward
    .background-stripes-preset-3 {
        background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 10px, transparent 10px, transparent 20px);
    }

    // Stripes Wide
    .background-stripes-preset-4 {
        background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 20px, transparent 20px, transparent 40px);
    }

    // Stripes Wide Backward
    .background-stripes-preset-5 {
        background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 20px, transparent 20px, transparent 40px);
    }
}