.Hylia-o-businessCard {
    position: relative;

    display: flex;
    flex-direction: column;

    &:hover {
        .Hylia-o-businessCard-panel {
            transition: background 0.3s, transform 0.3s;
            transform: translateY(0.5rem);

            background-color: @stormtrooper;
        }

        .Hylia-o-businessCard__nick {
            i {
                top: 0.8rem;

                transition: color 0.3s, top 0.3s;
            }
        }
    }

    &__nick {
        font-size: 1.5rem;

        position: absolute;
        bottom: 0;
        left: 50%;

        width: 3.6rem;
        height: 1.5rem;

        cursor: pointer;
        transform: translate(-50%, 0%);
        text-align: center;

        &:hover {
            i {
                color: @smart;
            }
        }

        i {
            font-size: 1.4rem;

            position: relative;
            z-index: 4;
            top: 0.5rem;

            transition: color 0.3s, top 0.3s;

            color: @apprentice;
        }

        &:before {
            position: absolute;
            z-index: 4;
            bottom: 0;
            left: 50%;

            display: block;

            width: 3.6rem;
            height: 2.6rem;

            content: "";
            transform: translate(-50%, 50%);

            border-radius: 50%;
            box-shadow: inset 0 21px 17px -20px rgba(0, 0, 0, 0.25);
        }

        &:after {
            position: absolute;
            z-index: 3;
            bottom: 0;
            left: 50%;

            display: block;

            width: 3.6rem;
            height: 1rem;

            content: "";
            transform: translate(-50%, 50%);

            background-color: @stormtrooper;
        }
    }

    &__wrapper {
        position: relative;
        z-index: 3;

        display: flex;
        flex-direction: column;

        width: 33rem;
        min-height: 17.5rem;
        padding: 1.5rem 1.5rem 0 1.5rem;

        border-radius: @radius;
        background-color: @stormtrooper;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
    }

    &__header {
        display: flex;
    }

    &__state {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 0;

        width: 2.1rem;
        height: 2.1rem;

        border: 0.3rem solid @stormtrooper;
        border-radius: 50%;

        &--online {
            background-color: @namek;
        }

        &--busy {
            background-color: @ruban;
        }

        &--offline {
            background-color: @apprentice;
        }
    }

    &__actions {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;

        button:last-child {
            margin-left: 1rem;
        }
    }

    &__identity {
        margin-left: 1.5rem;
    }

    // Handle State
    &__avatar {
        position: relative;
    }
}

.Hylia-o-businessCard-identity {
    display: flex;
    overflow: hidden;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;

    &__name {
        font-family: @condensed_bold;
        font-size: 1.4rem;
        line-height: normal;

        color: @smart;

        &[href] {
            &:hover {
                text-decoration: underline;
            }
        }
    }

    &__job {
        font-family: @regular_regular;
        font-size: 1.4rem;
        font-weight: normal;

        color: @vader;
    }

    &__hierarchy {
        font-family: @condensed_regular;
        font-size: 1.2rem;
        line-height: normal;

        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;

        color: @knight;
    }
}

.Hylia-o-businessCard-panel {
    position: relative;
    z-index: 2;
    top: -2.2rem;
    left: 1rem;

    max-width: 31rem;
    padding: 1.5rem;

    transition: transform 0.3s;

    border-radius: @radius;
    background-color: @acolyte;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);

    &--open {
        .Hylia-o-businessCard-panel__wrapper {
            overflow: auto;

            height: 5rem;

            transition: height 0.2s, opacity 0.2s 0.5s;

            opacity: 1;
        }
    }

    &__wrapper {
        font-family: @regular_regular;
        font-size: 1.4rem;

        overflow: hidden;

        height: 0;

        transition: height 0.2s 0.2s, opacity 0.2s;

        opacity: 0;
    }
}