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

.TooltipComponent {

    position: absolute;
    z-index: 1;

    box-sizing: border-box;
    padding: 3px 5px;

    color: $primary-color-white;
    font-size: 12px;

    background-color: $primary-color-orange;
    border-radius: 3px;

    visibility: hidden;

    cursor: default;

    opacity: 0;

    transition: opacity ease-in-out 0.5s, visibility ease-in-out 0.5s;

    &::after {
        position: absolute;
        top: 100%;
        left: 50%;

        margin-left: -5px;

        border-color: $primary-color-orange transparent transparent;
        border-style: solid;

        border-width: 5px;

        content: '';
    }

    &--active {
        visibility: visible;

        opacity: 1;

        transition: opacity 0s, visibility 0s;
    }
}