.animation {
    z-index: -1000;
    height: 0%;
    position: absolute;
    top: 22%;
    right: 10%;
}

.lottie-size {
    height: 120px;
}

.user-menu {
    margin: 0 16px;

    @media (--sm-up) {
        max-width: 200px;
    }

    .username-btn {
        display: flex;
        align-items: center;
    }
    & .toggle {
        outline: none;
        border: none;
        padding: 0;
        width: 100%;

        display: flex;
        align-items: center;

        background: transparent;

        & .avatar-wrap {
            margin-inline-end: 10px;
        }

        & .name {
            margin-inline-end: 10px;
            max-width: 100%;
            font-family: var(--base-font-family);
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media (--xs-down) {
                display: none;
            }
        }

        & svg {
            margin: 0 11px 0 0;
            transition: transform var(--easing) var(--transition-duration);
        }

        .rotate-180 {
            transform: rotate(180deg);
        }
    }

    & .menu-wrap {
        position: relative;
    }

    & .menu {
        position: absolute;
        top: 0;
        right: 0;

        flex-direction: column;
        display: none;

        & .triangle {
            padding-top: 15px;
            display: inline-block;
            border-bottom: 4px solid var(--blue);
        }

        & ul {
            margin: 0;
            padding: 0;
            list-style: none;
            background: var(--white);
            box-shadow: 0 2px 5px 0 var(--light-grey);
        }

        & li:hover {
            background: var(--desert-storm);

            & hr {
                visibility: hidden;
            }
        }

        & a {
            padding: 10px 20px;
            display: flex;
            flex-direction: row;
            align-items: center;

            & svg {
                margin-inline-end: 12px;
                height: 16px;
            }
        }

        & hr {
            margin: 0 auto;
            width: calc(100% - 40px);
        }
    }

    &.active {
        & .menu {
            display: flex;
        }

        & svg {
            fill: var(--blue);
        }

        & .name {
            color: var(--blue);
        }
    }
}
