@prefix: graphjs;

@{prefix}-feed-item.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    .@{prefix}-content {
        position: relative;
        overflow: hidden;
        width: 100%;
        .no-padding !important;
        .border-radius(@border-radius-large);
        border: 1px;
        border-style: solid;
        // ThemeOption: border-color: fade(@default-color, 3%);
        border-color: transparent; // ThemeFix
        // ThemeOption: background-color: @background-color-contrast;
        .box-shadow(
            e('0 0 15px 0 fade(black, 5%), 0 2px 1px 0px fade(black, 7.5%)')
        );
        &:hover,
        &:active,
        &:focus {
            .box-shadow(
                e('0 0 15px 0 fade(black, 5%), 0 2px 1px 0px fade(black, 7.5%)')
            );
        }
        & > .@{prefix}-credit {
            .credit-metrics(2.5em);
            margin: 1em;
            margin-bottom: 0;
        }
        .@{prefix}-entry {
            padding: 1em;
            & > * {
                width: 100%;
                margin-bottom: 0.5em;
            }
            .@{prefix}-title {
                // ThemeOption: color: @primary-color;
                font-size: 1.35em;
                margin-bottom: 0.65em;
            }

            .@{prefix}-embed-iframe {
                position: relative;
                padding-top: 2em;
                iframe {
                    width: 100%;
                    min-height: 360px;
                }
            }

            .@{prefix}-text * {
                white-space: pre-line;
                iframe {
                    display: block;
                }
            }
            .@{prefix}-media {
                &.@{prefix}-photo {
                    a {
                        text-align: center;
                        background-color: fade(black, 5%);
                        img {
                            width: 100%;
                            max-width: 100%;
                            height: auto;
                        }
                    }
                }
                &.@{prefix}-video {
                    a {
                        position: relative;
                        text-align: center;
                        background-color: fade(black, 5%);
                        svg {
                            position: absolute;
                            top: calc(50% - 4em);
                            left: calc(50% - 4em);
                            width: 8em;
                            height: 8em;
                            path {
                                fill: fade(white, 85%);
                                stroke: fade(black, 5%);
                                stroke-width: 1;
                            }
                        }
                        img {
                            width: 100%;
                            max-width: 100%;
                            height: auto;
                        }
                    }
                }
                &.@{prefix}-photoalbum {
                    margin-bottom: -2%;
                    .flex;
                    .justify-content(flex-start);
                    .flex-wrap(wrap);
                    a {
                        text-align: center;
                        margin-right: 2%;
                        margin-bottom: 2%;
                        width: 32%;
                        height: 32%;
                        &:nth-child(3n) {
                            margin-right: 0;
                        }
                        .@{prefix}-container {
                            width: 100%;
                            height: 100%;
                            padding-bottom: 100%;
                            background-color: fade(black, 2.5%);
                            background-position: center top;
                            background-repeat: no-repeat;
                            background-size: cover;
                        }
                    }
                }
                &.@{prefix}-document {
                    a {
                        position: relative;
                        width: 100%;
                        height: 3em;
                        margin-bottom: 0.5em;
                        padding: calc(0.5em - 1px);
                        padding-left: calc(3em - 1px);
                        .single-line-text;
                        text-align: left;
                        border-width: 1px;
                        border-style: solid;
                        // ThemeOption: border-color: fade(@primary-color, 20%);
                        .border-radius(@border-radius-medium);
                        // ThemeOption: background-color: fade(@primary-color, 10%);
                        .transition(all 0.35s ease);
                        &:hover {
                            // ThemeOption: border-color: fade(@primary-color, 50%);
                            // ThemeOption: background-color: fade(@primary-color, 25%);
                            svg {
                                path {
                                    // ThemeOption: fill: @primary-color;
                                }
                            }
                            b {
                                // ThemeOption: color: @primary-color;
                            }
                        }
                        &:last-child {
                            margin-bottom: 0;
                        }
                        svg {
                            position: absolute;
                            left: 0.5em;
                            height: 2em;
                            path {
                                // ThemeOption: fill: fade(@primary-color, 85%);
                                .transition(fill 0.35s ease);
                            }
                        }
                        b {
                            display: block;
                            // ThemeOption: color: fade(@primary-color, 85%);
                            font-size: 0.85em;
                            line-height: 1.25em;
                            .transition(color 0.35s ease);
                        }
                        span {
                            display: block;
                            font-size: 0.75em;
                        }
                    }
                }
                a {
                    display: block;
                }
            }
        }
        .@{prefix}-interaction {
            padding-top: 0;
            .@{prefix}-synopsis {
                padding-left: 0.5em;
                border-top: 1px solid fade(black, 5%);
                & > * {
                    display: inline-block;
                    width: auto;
                    height: 2.5em;
                    line-height: 2.5em;
                    & > span {
                        font-size: 0.85em;
                        vertical-align: top;
                    }
                    .@{prefix}-unauthorized {
                        cursor: not-allowed;
                        svg {
                            path {
                                // ThemeOption: fill: @text-color-normal !important;
                            }
                        }
                    }
                }
                .@{prefix}-rating-indicator {
                    .@{prefix}-icon {
                        display: block;
                        float: left;
                        position: relative;
                        width: 2.5em;
                        height: 2.5em;
                        text-align: center;
                        .border-radius(inherit);
                        &.@{prefix}-star {
                            svg {
                                path {
                                    fill: desaturate(orange, 70%);
                                }
                            }
                            &.@{prefix}-upvoted {
                                svg {
                                    path {
                                        fill: orange;
                                    }
                                }
                            }
                        }
                        &.@{prefix}-like {
                            svg {
                                path {
                                    fill: desaturate(dodgerblue, 70%);
                                }
                            }
                            &.@{prefix}-upvoted {
                                svg {
                                    path {
                                        fill: dodgerblue;
                                    }
                                }
                            }
                        }
                        &.@{prefix}-love {
                            svg {
                                padding-top: 3px;
                                padding-bottom: 1px;
                                path {
                                    fill: desaturate(crimson, 70%);
                                }
                            }
                            &.@{prefix}-upvoted {
                                svg {
                                    path {
                                        fill: crimson;
                                    }
                                }
                            }
                        }
                        &.@{prefix}-save {
                            svg {
                                padding-top: 3px;
                                padding-bottom: 1px;
                                path {
                                    fill: desaturate(lightseagreen, 70%);
                                }
                            }
                            &.@{prefix}-upvoted {
                                svg {
                                    path {
                                        fill: lightseagreen;
                                    }
                                }
                            }
                        }
                        svg {
                            display: inline-block;
                            position: relative;
                            width: 100%;
                            height: 50%;
                            margin: 25% 0;
                            path {
                                // ThemeOption: fill: desaturate(@text-color-weak, 65%);
                            }
                        }
                    }
                }
                .@{prefix}-comments-indicator {
                    .@{prefix}-icon {
                        display: block;
                        float: left;
                        position: relative;
                        width: 2.5em;
                        height: 2.5em;
                        text-align: center;
                        .border-radius(inherit);
                        svg {
                            display: inline-block;
                            position: relative;
                            width: 100%;
                            height: 50%;
                            margin: 25% 0;
                            padding-top: 3px;
                            path {
                                // ThemeOption: fill: desaturate(@text-color-normal, 65%);
                            }
                        }
                    }
                }
                .@{prefix}-share-indicator {
                    .@{prefix}-icon {
                        display: block;
                        float: left;
                        position: relative;
                        width: 2.5em;
                        height: 2.5em;
                        text-align: center;
                        .border-radius(inherit);
                        svg {
                            display: inline-block;
                            position: relative;
                            width: 100%;
                            height: 50%;
                            margin: 25% 0;
                            padding-top: 3px;
                            path {
                                // ThemeOption: fill: desaturate(@text-color-normal, 65%);
                            }
                        }
                    }
                }
            }
            .@{prefix}-comment {
                @{prefix}-input-text {
                    width: calc(100% - 2em);
                    margin: 1em;
                    margin-top: 0;
                    .@{prefix}-input {
                        background-color: fade(black, 5%);
                        .transition(all 0.25s ease);
                        &:focus {
                            .box-shadow(inset 0 0 0.5em 0 fade(black, 5%));
                        }
                    }
                }
            }
        }
        .@{prefix}-comments {
            border-top: 1px solid fade(black, 5%);
            background-color: fade(black, 5%);
            .@{prefix}-comment {
                margin-bottom: 0.25em;
                padding: 1em;
                padding-bottom: 0;
                &:last-child {
                    margin-bottom: 0;
                    padding-bottom: 1em;
                }
                &.@{prefix}-pseudo {
                    // ThemeOption: background-color: fade(@primary-color, 15%);
                }
                .@{prefix}-credit {
                    .credit-metrics(2.5em);
                    margin-bottom: 0.25em;
                    img {
                        cursor: pointer;
                    }
                    span {
                        // ThemeOption: color: @text-color-normal;
                        b {
                            cursor: pointer;
                        }
                    }
                }
                p {
                    margin-left: 3.6em;
                    .regular-font;
                    font-size: 0.95em;
                    line-height: 150%;
                    white-space: pre-wrap;
                    &.@{prefix}-editable {
                        padding: 0.75em 1em;
                        border-width: 1px;
                        border-style: dashed;
                        // ThemeOption: border-color: fade(@default-color, 15%);
                        border-color: transparent; // ThemeFix
                        // ThemeOption: background-color: @background-color-contrast;
                        outline: none;
                    }
                }
            }
        }
    }
}
