sakura/resources/assets/less/yuuno/bem/profile.less

.profile {
    background: rgba(211, 191, 255, .8) !important;

    &__header {
        height: 200px;
        background: no-repeat center center / cover transparent;
        width: 100%;
        align-items: center;
        border-bottom: 1px solid #9475b2;
    }

    &__info {
        height: 100%;
        width: 100%;
        background: linear-gradient(0deg, rgba(211, 191, 255, .8), rgba(211, 191, 255, .8) 52px, transparent 52px, transparent);
        width: 100%;
        display: flex;
        align-items: center;

        @media (max-width: 1064px) {
            background: rgba(211, 191, 255, .5);
            flex-flow: column;
        }
    }

    &__avatar {
        height: 190px;
        width: 190px;
        margin: 0 2px;
        flex-grow: 0;
        flex-shrink: 0;

        @media (max-width: 1064px) {
            height: 120px;
            width: 120px;
            margin: 2px;
        }
    }

    &__username {
        align-self: flex-end;
        margin-left: 4px;
    }

    &__dates {
        font-size: .8em;
        line-height: 1.4em;
        text-align: right;
        align-self: flex-end;
        flex-grow: 5;
        height: 45px;

        @media (max-width: 500px) {
            display: none;
        }
    }

    @media (max-width: 1064px) {
        &__username,
        &__dates {
            flex-grow: 6;
            width: 100%;
            text-align: center;
        }

        &__date {
            display: inline-block;

            &:not(:first-child) {
                padding-left: 8px;
            }
        }
    }

    &__interactions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 2.5em;
        line-height: 1.4em;
        border-bottom: 1px solid #9475b2;

        &-item {
            color: #8364A1;
            text-decoration: none !important;
            text-shadow: 0 0 2px #9475B2;
            transition: all .2s;

            &:hover {
                text-shadow: 0 0 6px #9475B2;
            }

            &:active {
                color: #725390;
                text-shadow: 0 0 8px #8364A1;
            }
        }

        @media (max-width: 1064px) {
            flex-flow: column;
        }
    }

    &__navigation {
        margin-left: 5px;
    }

    &__actions {
        border-left: 1px solid #9475b2;
        min-width: 345px;
        text-align: right;
        margin-right: 5px;
    }

    @media (max-width: 1064px) {
        &__navigation,
        &__actions {
            border: 0;
            width: 100%;
            text-align: center;
            margin: 0;
        }
    }

    &__content {
        display: flex;
        justify-content: space-between;

        @media (max-width: 1064px) {
            flex-flow: column-reverse;
        }
    }

    &__data {
        display: block;
        width: 350px;
        border-left: 1px solid #9475b2;
        flex-shrink: 0;
        text-align: center;

        @media (max-width: 1064px) {
            width: 100%;
            border-bottom: 1px solid #9475b2;
            border-left: 0;
        }
    }

    &__mode {
        width: 100%;
        flex-grow: 0;
        margin-right: 2px;
        overflow: auto;

        &-title {
            padding-bottom: 2px;
            border-bottom: 1px solid #9475b2;
            margin-bottom: 2px;
        }

        @media (max-width: 1064px) {
            margin: 0;
        }
    }

    &__now-playing {
        text-shadow: 0 0 5px #8364A1;
        color: #614390;
        text-align: center;
        font-size: 1.2em;
        line-height: 1.5em;
        border-bottom: 1px solid #9475b2;
        display: flex;
        justify-content: space-between;

        &-link {
            color: inherit;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    &__friends {
        text-align: center;

        &--none {
            margin: 2em auto;
        }
    }
}