@prefix: graphjs;

@{prefix}-profile-card.@{prefix}-root {
    display: block;
    height: 18em;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-information {
            // ThemeOption: background-color: @background-color-contrast;
        }
    }
    .@{prefix}-option {
        display: inline-block;
        position: absolute;
        width: 3.75em;
        height: 3.75em;
        padding: 1em;
        text-align: center;
        // ThemeOption: .icon-color-states(@primary-color);
        &.@{prefix}-left {
            top: 0;
            left: 0;
        }
        &.@{prefix}-right {
            top: 0;
            right: 0;
        }
        svg {
            position: relative;
            max-width: 1.5em;
            max-height: auto;
            vertical-align: middle;
            path {
                .transition(fill .35s ease);
            }
        }
    }
    .@{prefix}-information {
        padding-top: 2em;
        img {
            width: 6.5em;
            height: 6.5em;
            vertical-align: middle;
            border-width: 4px;
            border-style: solid;
            // ThemeOption: border-color: fade(@default-color, 15%);
            border-color: transparent; // ThemeFix
            .border-radius(@border-radius-full);
        }
        b {
            display: inline-block;
            overflow: hidden;
            width: 90%;
            max-height: 2.5em;
            margin: 0 5%;
            margin-top: .5em;
            font-size: 1.2em;
            line-height: 1.25em;
            .heavy-font;
            // ThemeOption: .text-color-states(@primary-color);
        }
        p {
            display: inline-block;
            overflow: hidden;
            width: 90%;
            max-height: 2.5em;
            margin: 0 5%;
            margin-top: .75em;
            // ThemeOption: color: @text-color-normal;
            font-size: .95em;
            line-height: 1.25em;
        }
    }
    /* Placeholder */
    .@{prefix}-placeholder {
        .@{prefix}-link {
            display: inline-block;
            width: 100%;
            height: 15em;
            padding-top: 2em;
            .@{prefix}-avatar {
                display: inline-block;
                width: 6.5em;
                height: 6.5em;
                margin: 0 auto;
            }
            .@{prefix}-title {
                display: inline-block;
                width: 60%;
                height: 1em;
                margin: 0 20%;
                margin-top: .75em;
                margin-bottom: .25em;
                .border-radius(calc(1em / 2));
            }
            .@{prefix}-description {
                display: inline-block;
                width: 90%;
                height: 2.5em;
                margin: 0 5%;
                margin-top: 1em;
                padding: .1em 0;
                .@{prefix}-line {
                    height: .85em;
                    margin-bottom: .3em;
                    .border-radius(calc(.85em / 2));
                }
            }
        }
        .@{prefix}-button {
            display: inline-block;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 3em;
        }
    }
}

// Responsive

/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-profile-card.@{prefix}-root {
        height: 13.5em;
        .@{prefix}-option {
            width: 3em;
            height: 3em;
            padding: .75em;
            svg {
                max-width: 1.25em;
            }
        }
        .@{prefix}-information {
            padding-top: 1em;
            img {
                width: 4.5em;
                height: 4.5em;
                border-width: 2px;
            }
            b {
                font-size: 1.1em;
            }
            p {
                margin-top: .25em;
                font-size: .9em;
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-link {
                height: 11em;
                padding-top: 1em;
                .@{prefix}-avatar {
                    width: 4.5em;
                    height: 4.5em;
                }
                .@{prefix}-title {
                    height: .85em;
                    .border-radius(calc(.85em / 2));
                }
                .@{prefix}-description {
                    height: 2.2em;
                    margin-top: .6em;
                    .@{prefix}-line {
                        height: .75em;
                        .border-radius(calc(.75em / 2));
                    }
                }
            }
            .@{prefix}-button {
                height: 2.5em;
            }
        }
    }
}

/* 480 â‰¤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-profile-card.@{prefix}-root {
        height: 15.25em;
        .@{prefix}-option {
            width: 3.5em;
            height: 3.5em;
            padding: .875em;
            svg {
                max-width: 1.5em;
            }
        }
        .@{prefix}-information {
            padding-top: 1.5em;
            img {
                width: 5.5em;
                height: 5.5em;
                border-width: 3px;
            }
            b {
                font-size: 1.15em;
            }
            p {
                margin-top: .5em;
                font-size: .925em;
            }
        }
        /* Placeholder */
        .@{prefix}-placeholder {
            .@{prefix}-link {
                height: 12.5em;
                padding-top: 1.5em;
                .@{prefix}-avatar {
                    width: 5.5em;
                    height: 5.5em;
                }
                .@{prefix}-title {
                    height: .9em;
                    .border-radius(calc(.9em / 2));
                }
                .@{prefix}-description {
                    height: 2.3em;
                    margin-top: .7em;
                    .@{prefix}-line {
                        height: .8em;
                        .border-radius(calc(.8em / 2));
                    }
                }
            }
            .@{prefix}-button {
                height: 2.75em;
            }
        }
    }
}