@import './variables';
@import '../../../styles/sizes.media';

.new-items-indicator {
    position: absolute;
    top: 3px;
    left: 14px;
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: .5em;
    background-color: $lsb-menu-notification-icon;
    border: 2px solid $bdl-gray-02;
    border-radius: 50%;
    transform: scale(0, 0);
    opacity: 0;
    transition: opacity .3s, transform .3s cubic-bezier(0, 0, .5, 1.5);

    &.is-showing {
        transform: scale(1, 1);
        opacity: 1;
    }

    @include medium-size {
        top: 10px;
        left: 13px;
        width: 14px;
        height: 14px;

        .is-forced-open & {
            top: 3px;
            left: 14px;
            width: 11px;
            height: 11px;
        }
    }
}