@prefix: graphjs;

@primary-color: transparent;

.@{prefix}-custom-color {
    a {
        .text-color-states(@primary-color);
    }
    button {
        .background-color-states(@primary-color);
    }
    .@{prefix}-box {
        .@{prefix}-header {
            .@{prefix}-title {
                color: @primary-color;
            }
            .@{prefix}-option {
                .icon-color-states(@primary-color);
                svg {
                    path {
                        fill: @primary-color;
                    }
                }
            }
        }
    }
    .@{prefix}-card {
        .@{prefix}-information {
            a {
                .text-color-states(@primary-color);
            }
        }
        button {
            .background-color-states(@primary-color);
        }
        &.@{prefix}-color {
            background-color: @primary-color;
            button {
                color: @primary-color;
            }
        }
    }
    .@{prefix}-credit {
        span {
            color: @primary-color;
            b {
                color: @primary-color;
            }
        }
    }
    .@{prefix}-loading {
        .@{prefix}-loader {
            &.@{prefix}-inline {
                .@{prefix}-dots {
                    & > span {
                        background-color: @primary-color;
                    }
                }
            }
        }
    }
    @{prefix}-alert.@{prefix}-root {
        & > button {
            &:not(.@{prefix}-danger) {
                color: @primary-color;
            }
        }
    }
    @{prefix}-auth-state.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-logged {
                a {
                    color: @primary-color;
                }
            }
        }
        &.color {
            background-color: @primary-color;
        }
    }
    @{prefix}-forum-list.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-bar {
                .@{prefix}-search {
                    background-color: desaturate(tint(@primary-color, 20%), 5%);
                }
                button {
                    .background-color-states(@primary-color);
                }
            }
            .@{prefix}-list {
                .@{prefix}-item {
                    &:hover {
                        background-color: fade(@primary-color, 5%);
                    }
                }
            }
        }
    }
    @{prefix}-forum-thread.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-reply {
                border-top: 2px solid @primary-color;
                .@{prefix}-synopsis {
                    & > a {
                        &.@{prefix}-icon {
                            svg {
                                path {
                                    fill: @primary-color;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @{prefix}-group-card.@{prefix}-root {
        .@{prefix}-information {
            a {
                color: @primary-color;
                .text-color-states(@primary-color);
            }
        }
    }
    @{prefix}-group-header.@{prefix}-root {
        .@{prefix}-information {
            a {
                color: @primary-color;
                .text-color-states(@primary-color);
            }
            .@{prefix}-members {
                span {
                    background-color: @primary-color;
                }
            }
        }
        ul {
            li {
                a {
                    .text-color-states(@primary-color);
                    svg {
                        path {
                            fill: @primary-color;
                        }
                    }
                }
            }
        }
    }
    @{prefix}-group-settings.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-cover {
                &:hover {
                    &::before {
                        background-color: fade(@primary-color, 90%);
                    }
                }
                &::before {
                    background-color: fade(@primary-color, 60%);
                }
            }
        }
    }
    @{prefix}-messages.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-sidebar {
                input, input[type] {
                    background-color: @primary-color;
                }
                .@{prefix}-list {
                    .@{prefix}-item {
                        &.@{prefix}-unread {
                            background-color: fade(@primary-color, 15%);
                            div {
                                b {
                                    color: @primary-color !important;
                                }
                                color: tint(desaturate(@primary-color, 40%), 20%);
                            }
                        }
                    }
                }
            }
            .@{prefix}-main {
                .@{prefix}-conversation {
                    .@{prefix}-item {
                        &.@{prefix}-outbound {
                            p {
                                background-color: @primary-color;
                            }
                        }
                    }
                }
            }
        }
    }
    @{prefix}-profile-activity.@{prefix}-root {
        .@{prefix}-content {
            ul {
                li {
                    &::before {
                        background-color: @primary-color;
                    }
                    div {
                        svg {
                            path {
                                fill: @primary-color;
                            }
                        }
                    }
                }
            }
        }
    }
    @{prefix}-profile-card.@{prefix}-root {
        .@{prefix}-option {
            .icon-color-states(@primary-color);
            svg {
                path {
                    fill: @primary-color;
                }
            }
        }
        .@{prefix}-information {
            a {
                color: @primary-color;
                .text-color-states(@primary-color);
            }
        }
    }
    @{prefix}-profile-header.@{prefix}-root {
        .@{prefix}-option {
            .icon-color-states(@primary-color);
            svg {
                path {
                    fill: @primary-color;
                }
            }
        }
        .@{prefix}-information {
            a {
                .text-color-states(@primary-color);
            }
        }
        ul {
            li {
                a {
                    .text-color-states(@primary-color);
                    svg {
                        path {
                            fill: @primary-color;
                        }
                    }
                }
            }
        }
    }
    @{prefix}-profile-settings.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-avatar {
                &:hover {
                    &::before {
                        background-color: fade(@primary-color, 90%);
                    }
                }
                &::before {
                    background-color: fade(@primary-color, 60%);
                }
            }
        }
    }
    @{prefix}-star-list.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-bar {
                .@{prefix}-search {
                    background-color: desaturate(tint(@primary-color, 20%), 5%);
                }
            }
            .@{prefix}-list {
                .@{prefix}-item {
                    &:hover {
                        background-color: fade(@primary-color, 5%);
                    }
                }
            }
        }
    }
}