.op3-modal.op3-modal-style-picker {
    .op3-modal-content {
        h5 {
            margin: 0;
        }

        ul {
            display: flex;
            padding: 0;
            flex: 1 1 auto;
            flex-wrap: wrap;
            align-items: flex-start;
            transform: translate3d(0, 0, 0);
        }

        li {
            display: block;
            margin: -1px 0 0 -1px;
            padding: 0;
            align-self: stretch;
            flex: 1 1 auto;
            text-align: center;
        }

        a {
            display: block;
            padding: 1.5em;
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            transition: all 0.2s ease;
            line-height: 1;
            user-select: none;

            &:focus {
                outline: 0 none;
            }

            &:hover {
                background: #fafafa;
                box-shadow: 0 0 2em -0.5em rgba(0, 0, 0, 0.2);
                transform: translateY(-0.25em);
            }

            &.selected {
                background: #fafafa;
            }
        }

        img {
            width: 4em;
        }
    }

    &.op3-modal-style-picker-thumb-size {
        &-large .style-item-wrapper {
            width: 50%;
            max-width: 50%;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        &-full .style-item-wrapper {
            width: 100%;
            margin-bottom: 1em;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }

        &-small .style-item-wrapper {
            width: 2em;

            img {
                width: 2em;
                height: auto;
                object-fit: contain;
            }
        }
    }
}