@prefix: graphjs;

@{prefix}-profile-activity.@{prefix}-root {
    display: block;
    .@{prefix}-content {
        min-height: 21em;
        & > p {
            width: 100%;
            text-align: center;
        }
        ul {
            margin: 0;
            padding: 0;
            margin-left: 3.5em;
            li {
                position: relative;
                list-style: none;
                width: 100%;
                min-height: 3.5em;
                padding-left: 1em;
                padding-bottom: .5em;
                line-height: 1.35em;
                border-left-width: 2px;
                border-left-style: dotted;
                // ThemeOption: border-left-color: fade(@text-color-normal, 35%);
                &:last-of-type {
                    border-color: transparent;
                }
                &::before {
                    content: "";
                    display: block;
                    position: absolute;
                    left: calc(-.35em - 1px);
                    width: .7em;
                    height: .7em;
                    border-radius: 50%;
                    // ThemeOption: background-color: @primary-color;
                }
                div {
                    position: relative;
                    top: -.25em;
                    // ThemeOption: color: @text-color-normal;
                    vertical-align: top;
                    b {
                        // ThemeOption: color: @text-color-normal;
                    }
                    svg {
                        width: 2em;
                        height: 1.5em;
                        position: absolute;
                        top: -.125em;
                        left: -4.5em;
                        path {
                            // ThemeOption: fill: @primary-color;
                        }
                    }
                    time {
                        display: block;
                        position: relative;
                        top: -.125em;
                        width: 100%;
                        // ThemeOption: color: @text-color-weak;
                        .bold-font;
                        font-size: .75em;
                        text-transform: uppercase;
                    }
                }
            }
        }
        .@{prefix}-placeholder {
            display: block;
            padding: 2.5em;
            .@{prefix}-list {
                display: block;
                .clearfix;
                .@{prefix}-item {
                    display: block;
                    height: 3em;
                    .clearfix;
                    & > * {
                        float: left;
                    }
                    .@{prefix}-icon {
                        position: relative;
                        top: -.4em;
                        width: 1.5em;
                        height: 1.5em;
                        margin-left: .35em;
                    }
                    .@{prefix}-bullet {
                        position: relative;
                        left: calc(-.35em + 1px);
                        width: .7em;
                        height: .7em;
                        margin-left: 1.65em;
                    }
                    .@{prefix}-paragraph {
                        width: calc(100% - 5.5em);
                        height: 3em;
                        margin-left: .5em;
                        .@{prefix}-line {
                            height: .6em;
                            margin-bottom: .8em;
                            .border-radius(calc(.6em / 2));
                            &:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}