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

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

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

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

    .shadow-item {
        margin: 0;
        padding: 0;
    }

    .shadow-preset {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        background-color: $op-grey-border;
        color: $op-grey;
        cursor: pointer;
        text-decoration: none;
        border: 2px solid darken($op-grey-border, 5%);

        &:hover {
            border-color: darken($op-grey-border, 15%);
        }
    }

    .shadow-preset-1 {
        &::after {
            content: "";
            display: block;
            width: 2px;
            height: 100px;
            position: absolute;
            right: -1px;
            top: 0;
            transform-origin: 0 0;
            transform: rotate(63.5deg);
            background: darken($op-grey-border, 5%);
        }

        &:hover::after {
            background: darken($op-grey-border, 15%);
        }
    }

    &.shadow-presets-box-shadow {
        .shadow-preset-2 {
            box-shadow: rgba(0, 0, 0, .07) 0 4px 0 0;
        }

        .shadow-preset-3 {
            box-shadow: rgba(0, 0, 0, .07) 4px 4px 0 0;
        }

        .shadow-preset-4 {
            box-shadow: rgba(0, 0, 0, .43) 5px 5px 37px -4px;
        }

        .shadow-preset-5 {
            box-shadow: rgba(0, 0, 0, .27) 0 0 20px -4px;
        }

        .shadow-preset-6 {
            box-shadow: rgba(0, 0, 0, .14) 0 0 34px 6px;
        }

        .shadow-preset-7 {
            box-shadow: rgba(0, 0, 0, .33) 0 0 35px 1px;;
        }

        .shadow-preset-8 {
            box-shadow: rgba(0, 0, 0, .11) 0 13px 36px -1px;
        }

        .shadow-preset-9 {
            box-shadow: rgba(0, 0, 0, .45) 0 27px 44px -22px;
        }

        .shadow-preset-10 {
            box-shadow: rgba(0, 0, 0, .3) 0 17px 44px -2px;
        }

        .shadow-preset-11 {
            box-shadow: rgba(0, 0, 0, .45) 0 4px 8px -1px;
        }

        .shadow-preset-12 {
            box-shadow: rgba(0, 0, 0, .25) 0 14px 28px -10px;
        }

        .shadow-preset-13 {
            box-shadow: rgba(0, 0, 0, .18) 0 11px 10px -6px;
        }
    }

    &.shadow-presets-text-shadow {

        .shadow-preset::before {
            content: "A";
            display: block;
            font-size: 1.5em;
            line-height: 40px;
            font-weight: bold;
            color: #b5b5b5;
            text-align: center;
        }

        .shadow-preset-2 {
            text-shadow: rgb(0, 0, 0) 0 2px 0;
        }

        .shadow-preset-3 {
            text-shadow: rgb(0, 0, 0) 2px 0 0;
        }

        .shadow-preset-4 {
            text-shadow: rgb(0, 0, 0) 0 0 2px;
        }

        .shadow-preset-5 {
            text-shadow: rgb(0, 0, 0) 0 0 40px;
        }

        .shadow-preset-6 {
            text-shadow: rgb(0, 0, 0) 0 -2px 0;
        }
    }
}