@import '../styles/constants.less';

.reactist_color_picker {
    .color_trigger {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 24px;
        width: 24px;
        border-radius: 50%;
        cursor: pointer;

        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAgMSAuNzA3LjcwOEwxMi42MDQgMTRhMSAxIDAgMCAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwIDEgLjcwNy0uNzA4eiIvPjwvc3ZnPg==);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 24px;

        &--inner_ring {
            background-color: rgba(0, 0, 0, 0.1);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            visibility: hidden;
        }
        &:hover {
            .color_trigger--inner_ring {
                visibility: visible;
            }
        }

        &.small {
            height: 18px;
            width: 18px;

            .color_trigger--inner_ring {
                width: 12px;
                height: 12px;
            }
        }
    }

    .color_item {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        cursor: pointer;

        &--inner_ring {
            background-color: transparent;
            border: 2px solid white;
            height: 24px;
            width: 24px;
            border-radius: 50%;
            visibility: hidden;
        }
        &:hover {
            .color_item--inner_ring {
                visibility: visible;
            }
        }

        &.active {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMSAxIC44NjMuNDk5bC00LjQ3IDcuNzQ0YS40OTkuNDk5IDAgMCAxLS43MzUuMTQ3LjUwMi41MDIgMCAwIDEtLjA2MS0uMDQ4bC0zLjM2Ni0zLjE0YS40OTkuNDk5IDAgMSAxIC42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    .color_options {
        padding: 6px;
        display: flex;
        flex-wrap: wrap;
        width: 164px; // 4 * 32 + 3 * 8 + 2 * 6
        position: relative;
    }

    .with_arrow:after,
    .with_arrow:before {
        visibility: hidden;
    }
}
