toggle-corp/react-store

@import '../../../stylesheets/utils';

:root {
    --border-radius-tooltip: 4px;
    --tooltip-max-width: 480px;
}

.container {
    @include shadow-small;
    background-color: var(--color-foreground);
    max-width: var(--tooltip-max-width);
    animation: slide-in var(--duration-fast) ease forwards;
    pointer-events: none;

    &.center {
        &:after {
            position: absolute;
            bottom: -6px;
            left: calc(50% - 6px);
            border-top: 6px solid var(--color-foreground);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            width: 0;
            height: 0;
            content: '';
        }
    }

    &.text-tooltip {
        border-radius: var(--border-radius-tooltip);
        padding: var(--spacing-medium);
    }
}

@keyframes slide-in {
    from {
        transform: translateY(-4px);
        opacity: .5;
    }

    to {
        transform: none;
        opacity: 1;
    }
}