@use '~@epam/assets/scss/promo/fonts' as *;

.container {
    display: flex;

    .color-item {
        width: 12px;
        height: 12px;
        cursor: pointer;
        margin-right: 6px;
        border-style: solid;
        border-width: 3px;
        border-radius: 50%;
    }
}

.tooltip {
    &:global(.uui-tooltip-container[data-placement^='top']) {
        :global(.uui-tooltip-arrow) {
            top: 100%;

            &::after {
                transform: translateX(30%) translateY(-50%) rotate(45deg);
            }
        }
    }

    :global(.uui-tooltip-body) {
        padding: 3px 12px;
        line-height: 18px;
        font-size: 12px;
        font-family: $font-sans;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
        border-radius: 3px;
        word-wrap: break-word;
        background-color: #2C2F3C;
    }

    :global(.uui-tooltip-arrow) {
        position: absolute;
        width: 12px;
        height: 12px;
        overflow: hidden;
    }

    :global(.uui-tooltip-arrow)::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
        background-color: #2C2F3C;
    }
}

.tooltip-content {
    padding: 6px;
    background: #2C2F3C;
    color: white;
    line-height: 18px;
    font-size: 12px;
    font-family: $font-sans;
}

