@prefix: graphjs;

@{prefix}-profile-header.@{prefix}-root {
    overflow: hidden;
    display: block;
    width: 100%;
    min-height: 17.5em;
    // ThemeOption: color: @text-color-normal;
    text-align: center;
    &.@{prefix}-box {
        .@{prefix}-information {
            // ThemeOption: background-color: @background-color-contrast;
        }
    }
    & + * {
        margin-top: 1.5em;
    }
    .@{prefix}-option {
        display: inline-block;
        width: 3.75em;
        height: 3.75em;
        padding: 1em;
        text-align: center;
        // ThemeOption: .icon-color-states(@primary-color);
        &.@{prefix}-left {
            float: left;
        }
        &.@{prefix}-right {
            float: right;
        }
        svg {
            position: relative;
            max-width: 1.5em;
            max-height: auto;
            vertical-align: middle;
            path {
                // ThemeOption: fill: @primary-color;
                .transition(fill .35s ease);
            }
        }
    }
    .@{prefix}-information {
        height: 15em;
        padding-top: 2em;
        img {
            width: 6.5em;
            height: 6.5em;
            border-width: 4px;
            border-style: solid;
            // ThemeOption: border-color: fade(@default-color, 15%);
            border-color: transparent; // ThemeFix
            .border-radius(@border-radius-full);
        }
        a {
            display: inline-block;
            overflow: hidden;
            width: 90%;
            max-height: 2.5em;
            margin: 0 5%;
            margin-top: .5em;
            // ThemeOption: .text-color-states(@primary-color);
            font-size: 1.2em;
            line-height: 1.25em;
            .heavy-font;
        }
        p {
            display: inline-block;
            overflow: hidden;
            width: 90%;
            max-height: 2.5em;
            margin: 0 5%;
            margin-top: .75em;
            // ThemeOption: color: @text-color-normal;
            line-height: 1.25em;
        }
    }
    ul {
        margin: 0;
        .no-padding;
        border-top-width: 2px;
        border-top-style: solid;
        border-top-color: fade(black, 5%);
        .border-radius(0);
        list-style: none;
        li {
            display: inline-block;
            background-color: transparent;
            .transition(background-color .35s ease);
            &:hover {
                a {
                    opacity: 1;
                    // ThemeOption: color: @text-color-normal;
                }
            }
            &.@{prefix}-active {
                a {
                    opacity: 1;
                    // ThemeOption: color: @text-color-normal;
                    pointer-events: none;
                }
            }
            a {
                display: inline-block;
                opacity: .75;
                padding: 0 1em;
                cursor: pointer;
                // ThemeOption: color: @text-color-normal;
                .bold-font;
                line-height: 2.5em;
                .disable-selection;
                &.@{prefix}-count {
                    &::before {
                        content: attr(data-count);
                    }
                    &::after {
                        // ThemeOption: color: @text-color-weak;
                    }
                }
                span {
                    // ThemeOption: color: @text-color-normal;
                    .bold-font;
                }
                svg {
                    display: none;
                    path {
                        // ThemeOption: fill: @primary-color;
                    }
                }
            }
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        .@{prefix}-card {
            display: block;
            width: 100%;
            height: 15em;
            max-width: 24em;
            margin: 0 auto;
            padding-top: 2em;
            background-color: transparent !important;
            .@{prefix}-avatar {
                display: block;
                width: 6.5em;
                height: 6.5em;
                margin: 0 auto;
            }
            .@{prefix}-title {
                display: block;
                width: 40%;
                height: 1em;
                margin: 0 30%;
                margin-top: 1em;
                .border-radius(calc(1em / 2));
            }
            .@{prefix}-description {
                display: block;
                width: 90%;
                height: .85em;
                margin: 0 5%;
                margin-top: 1.15em;
                .border-radius(calc(.85em / 2));
            }
        }
        .@{prefix}-list {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 2.5em;
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-profile-header.@{prefix}-root {
        min-height: 18.75em;
        &.@{prefix}-box {
            ul {
                li {
                    &.@{prefix}-active {
                        // ThemeOption: background-color: @background-color-contrast;
                    }
                }
            }
        }
        &.@{prefix}-inline {
            ul {
                li {
                    background-color: fade(black, 5%);
                    &.@{prefix}-active {
                        background-color: transparent;
                    }
                }
            }
        }
        ul {
            display: flex;
            border-top: none !important;
            li {
                flex-grow: 1;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: fade(black, 5%);
                border-right-width: 1px;
                border-right-style: solid;
                border-right-color: fade(black, 5%);
                vertical-align: middle;
                &:last-of-type {
                    border-right: none;
                }
                &.@{prefix}-active {
                    border-top: none;
                }
                a {
                    position: relative;
                    width: 100%;
                    padding: 1.25em 0;
                    line-height: 1em;
                    &.@{prefix}-count{
                        &::before {
                            display: none;
                        }
                        &::after {
                            content: attr(data-count);
                            display: inline-block;
                            position: absolute;
                            top: 4.25em;
                            left: 0;
                            width: 100%;
                            font-size: .6em;
                            line-height: 1.25em;
                            text-align: center;
                        }
                    }
                    span {
                        display: none;
                    }
                    svg {
                        display: inline;
                        width: 2.25em;
                        height: 1.25em;
                    }
                    &[data-link="followers"], &[data-link="following"] {
                        svg {
                            padding-left: .25em;
                        }
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-list {
                height: 3.75em;
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-profile-header.@{prefix}-root {
        min-height: 19.5em;
        &.@{prefix}-box {
            ul {
                li {
                    &.@{prefix}-active {
                        // ThemeOption: background-color: @background-color-contrast;
                    }
                }
            }
        }
        &.@{prefix}-inline {
            ul {
                li {
                    background-color: fade(black, 5%);
                    &.@{prefix}-active {
                        background-color: transparent;
                    }
                }
            }
        }
        ul {
            display: flex;
            border-top: none !important;
            li {
                flex-grow: 1;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: fade(black, 5%);
                border-right-width: 1px;
                border-right-style: solid;
                border-right-color: fade(black, 5%);
                vertical-align: middle;
                &:last-of-type {
                    border-right: none;
                }
                &.@{prefix}-active {
                    border-top: none;
                }
                a {
                    position: relative;
                    width: 100%;
                    padding: 1.25em 0;
                    font-size: 1.2em;
                    line-height: 1em;
                    &.@{prefix}-count {
                        &::before {
                            display: none;
                        }
                        &::after {
                            content: attr(data-count);
                            display: inline-block;
                            position: absolute;
                            top: 4.25em;
                            left: 0;
                            width: 100%;
                            font-size: .6em;
                            line-height: 1.25em;
                            text-align: center;
                        }
                    }
                    span {
                        display: none;
                    }
                    svg {
                        display: inline;
                        width: 2.25em;
                        height: 1.25em;
                    }
                    &[data-link="followers"], &[data-link="following"] {
                        svg {
                            padding-left: .25em;
                        }
                    }
                }
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-list {
                height: 4.5em;
            }
        }
    }
}