// Main colors
@primary-color:             rgb(111, 135, 159);
@text-color:                rgb(63, 95, 127);
@background-color:          white;

// Default colors
@default-color:             @text-color;

// Text colors
@text-color-strong:         @text-color;
@text-color-normal:         fade(@text-color, 75%);
@text-color-weak:           fade(@text-color, 50%);

// Background colors
@background-color-shade:    shade(@background-color, 10% / 3);
@background-color-contrast: @background-color;

// Input colors
@input-color:               tint(@background-color, 15%);

// Prefix
@prefix: graphjs;

// reset.less
.@{prefix}-root {
    *, *[type] {
        &::selection {
            background-color: fade(@text-color-strong, 15%);
        }
        color: @text-color-normal;
    }
}

// elements.less
.@{prefix}-root {
    color: @text-color-normal;
    a {
        .text-color-states(@primary-color);
    }
    input, input[type], textarea {
        color: @text-color-normal;
        .placeholder-color(@text-color-weak);
    }
    button {
        .background-color-states(@primary-color);
    }
    form {
        .@{prefix}-option {
            a {
                color: @text-color-normal;
            }
        }
    }
}

// mixins.less
.icon-color-states(@color) {
    svg {
        path {
            fill: @color;
        }
    }
    &:hover {
        svg {
            path {
                fill: tint(@color, 10%);
            }
        }
    }
    &:active {
        svg {
            path {
                fill: shade(@color, 10%);
            }
        }
    }
}
.text-color-states(@color) {
    color: @color;
    &:hover {
        color: tint(@color, 10%);
    }
    &:active {
        color: shade(@color, 10%);
    }
}
.background-color-states(@color) {
    background-color: @color;
    &:hover {
        background-color: tint(@color, 10%);
    }
    &:active {
        background-color: shade(@color, 10%);
    }
}
.placeholder-color(@color) {
    &::-webkit-input-placeholder, &::placeholder {
        color: @color;
    }
    &::-moz-placeholder, &:-ms-input-placeholder, &:-moz-placeholder { //Temporary bug fix: Placeholders for other browsers had to be separated from webkit version
		    color: @color;
    }
}

// box.less
.@{prefix}-box.@{prefix}-root {
    border-color: fade(@default-color, 3%);
    background-color: @background-color-shade;
    .@{prefix}-header {
        background-color: @background-color-contrast;
    }
    input, input[type], textarea {
        background-color: @input-color;
    }
}
.@{prefix}-header {
    .@{prefix}-title {
        color: @primary-color;
    }
    .@{prefix}-option {
        .icon-color-states(@primary-color);
        svg {
            path {
                fill: @primary-color;
            }
        }
    }
}
.@{prefix}-warning {
    border-bottom-color: fade(@default-color, 15%);
}
.@{prefix}-checked {
    .@{prefix}-check {
        background-color: @background-color-shade;
    }
}

// card.less
.@{prefix}-card.@{prefix}-root {
    .@{prefix}-information {
        b {
            .text-color-states(@primary-color);
        }
    }
    button {
        .background-color-states(@primary-color);
    }
}

// credit.less
.@{prefix}-credit {
    span {
        color: @primary-color;
        b {
            color: @primary-color;
        }
        small, time {
            color: @text-color-weak;
        }
        a {
            color: @text-color-weak;
            &::before {
                color: @text-color-weak;
            }
        }
        .@{prefix}-separated {
            &::before {
                color: @text-color-weak;
            }
        }
    }
}

// wallet.less
.@{prefix}-wallet.@{prefix}-root {
    .@{prefix}-content {
        & > p {
            color: @text-color-weak;
        }
    }
}

// article.less
.@{prefix}-article {
    * {
        color: @text-color-normal;
    }
    h2 {
        color: @text-color-strong;
    }
    h3 {
        color: @text-color-strong;
    }
    h4 {
        color: @text-color-strong;
    }
    a {
        color: @primary-color;
        border-bottom-color: @text-color-weak;
    }
    b, strong {
        color: @text-color-strong;
    }
    s, strike, del {
        color: @text-color-weak;
    }
    pre {
        border-color: fade(@default-color, 25%);
        background-color: fade(@default-color, 10%);
    }
    blockquote {
        border-left-color: @primary-color;
        background-color: fade(@default-color, 10%);
        &::before{
            color: @primary-color;
        }
        span {
            color: @text-color-normal;
        }
    }
}

// pagination.less
.@{prefix}-pagination {
    .@{prefix}-controls {
        color: @text-color-strong;
        a {
            svg {
                path {
                    fill: @text-color-strong;
                }
            }
        }
        p {
            color: @text-color-normal;
        }
    }
}

// loading.less
.@{prefix}-loading {
    .@{prefix}-loader {
        .@{prefix}-dots {
            & > span {
                background-color: @primary-color;
            }
        }
    }
    .@{prefix}-blockage {
        color: @text-color-weak;
        border-color: @text-color-weak;
        background-color: @background-color-shade;
        &:hover {
            color: @text-color-normal;
            border-color: @text-color-normal;
            background-color: @background-color-contrast;
        }
    }
}

.@{prefix}-root {
    .@{prefix}-secondary-btn {
        color: @text-color-weak;
        border-color: @text-color-weak;
        background-color: @background-color-shade;
        &:hover {
            color: @text-color-normal;
            border-color: @text-color-normal;
            background-color: @background-color-contrast;
        }
    }
}

//mention-container.less
.@{prefix}-mention-container {
    ul {
        border-color: fade(@default-color, 3%);
        background-color: @background-color-contrast;
        li {
            &:first-child {
                border-top-color: @primary-color;
            }
            &.@{prefix}-highlighted {
                background-color: fade(@primary-color, 10%);
            }
            .@{prefix}-option {
                color: @text-color-normal;
                .@{prefix}-match {
                    color: @text-color-strong;
                }
            }
        }
    }
}

// alert.less
@{prefix}-alert.@{prefix}-root {
    & > button {
        border-top-color: fade(@default-color, 10%);
        .background-color-states(@background-color);
        &:not(.@{prefix}-danger) {
            .text-color-states(@primary-color);
        }
        &.@{prefix}-danger {
            .background-color-states(@background-color);
        }
        &.@{prefix}-half {
            &:first-of-type {
                border-right-color: fade(@default-color, 10%);
            }
            &:last-of-type {
                border-left-color: fade(@default-color, 10%);
            }
        }
    }
}

// auth.less
@{prefix}-auth.@{prefix}-root {
    color: @text-color-normal;
}

// auth-login.less
@{prefix}-auth-login.@{prefix}-root {
    color: @text-color-normal;
}

// auth-register.less
@{prefix}-auth-register.@{prefix}-root {
    color: @text-color-normal;
}

// auth-reset.less
@{prefix}-auth-reset.@{prefix}-root,
@{prefix}-auth-verify.@{prefix}-root
{
    color: @text-color-normal;
    .@{prefix}-content {
        form {
            b {
                color: @text-color-strong;
            }
            p {
                color: @text-color-normal;
            }
        }
    }
}

// auth-state.less
@{prefix}-auth-state.@{prefix}-root {
    &.@{prefix}-box {
        background-color: @background-color-contrast;
    }
    .@{prefix}-content {
        a {
            color: @primary-color;
            border-right-color: fade(@primary-color, 20%);
        }
        .@{prefix}-logged {
            .@{prefix}-details {
                span {
                    color: @primary-color;
                }
            }
            .@{prefix}-exit {
                svg {
                    path {
                        fill: fade(@primary-color, 50%);
                    }
                }
            }
        }
    }
}

// autocomplete.less
@{prefix}-autocomplete.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-input {
            background-color: @primary-color;
        }
    }
}

// blog.less
@{prefix}-blog.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-inline {
            .@{prefix}-content {
                .@{prefix}-comments {
                    background-color: @background-color-contrast;
                }
            }
        }
    }
}

// blog-composer.less
@{prefix}-blog-composer.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        & > p {
            color: @text-color-normal;
        }
        form {
            input, input[type] {
                color: @primary-color;
                border-bottom-color: @text-color-weak;
                &::placeholder {
                    color: @primary-color;
                }
            }
            .@{prefix}-information {
                color: @text-color-weak;
                & > * {
                    &::before {
                        color: @text-color-weak;
                    }
                    & > a {
                        color: @text-color-normal;
                        &::before {
                            color: @text-color-weak;
                        }
                    }
                }
                .@{prefix}-action {
                    & > * {
                        .text-color-states(@text-color-strong);
                        &::before {
                            color: @text-color-weak;
                        }
                    }
                }
            }
            .@{prefix}-toolbar {
                &:hover {
                    .@{prefix}-tool {
                        border-color: fade(@default-color, 25%);
                    }
                }
                .@{prefix}-tool {
                    color: @text-color-normal;
                    border-color: fade(@default-color, 15%);
                    &:hover {
                        background-color: fade(@default-color, 15%);
                    }
                    & > * {
                        color: @text-color-normal;
                        & > * {
                            color: @text-color-normal;
                        }
                    }
                    & > svg {
                        & > * {
                            fill: @text-color-normal;
                        }
                    }
                }
            }
            .@{prefix}-body {
                &:empty {
                    &::before {
                        color: @text-color-weak;
                    }
                }
            }
        }
    }
}

// blog-list.less
@{prefix}-blog-list.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-list {
            .@{prefix}-item {
                color: @text-color-normal;
                &.@{prefix}-placeholder {
                    color: @text-color-weak;
                }
                .@{prefix}-title {
                    .text-color-states(@primary-color);
                    small {
                        b {
                            background-color: @primary-color;
                        }
                    }
                }
                .@{prefix}-information {
                    color: @text-color-weak;
                    & > * {
                        &::before {
                            color: @text-color-weak;
                        }
                    }
                }
                .@{prefix}-summary {
                    color: @text-color-normal;
                }
            }
        }
    }
}

// blog-post.less
@{prefix}-blog-post.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-content {
            .@{prefix}-comments {
                background-color: @background-color-contrast;
            }
        }
    }
    .@{prefix}-content {
        .@{prefix}-post {
            .@{prefix}-action {
                li {
                    a {
                        .text-color-states(@text-color-normal);
                    }
                }
            }
            .@{prefix}-title {
                color: @primary-color;
                .@{prefix}-back {
                    .icon-color-states(@text-color-weak);
                }
            }
            .@{prefix}-information {
                color: @text-color-weak;
                & > * {
                    &::before {
                        color: @text-color-weak;
                    }
                    & > a {
                        color: @text-color-normal;
                        &::before {
                            color: @text-color-weak;
                        }
                    }
                }
            }
        }
        .@{prefix}-comments {
            border-top-color: @primary-color;
            .@{prefix}-comment {
                .@{prefix}-synopsis {
                    & > b {
                        color: @text-color-normal;
                    }
                    & > a {
                        &.@{prefix}-icon {
                            svg {
                                path {
                                    fill: @primary-color;
                                }
                            }
                        }
                    }
                }
            }
            .@{prefix}-item {
                .@{prefix}-credit {
                    span {
                        color: @text-color-normal;
                    }
                }
                p {
                    color: @text-color-normal;
                    &.@{prefix}-editable {
                        color: @text-color-normal;
                        border-color: fade(@default-color, 15%);
                        background-color: @background-color-contrast;
                    }
                }
            }
        }
    }
}

// comments.less
@{prefix}-comments.@{prefix}-root {
    .@{prefix}-content {
        .@{prefix}-synopsis {
            color: @text-color-normal;
        }
        .@{prefix}-item {
            .@{prefix}-credit {
                span {
                    color: @text-color-normal;
                }
            }
            p {
                &.@{prefix}-editable {
                    border-color: fade(@default-color, 15%);
                    background-color: @background-color-contrast;
                }
            }
        }
    }
}

// feed.less
@{prefix}-feed.@{prefix}-root {
    color: @text-color-normal;
}

// feed-activity.less
@{prefix}-feed-activity.@{prefix}-root {
    color: @text-color-normal;
}

// feed-composer.less
@{prefix}-feed-composer.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-content {
            .@{prefix}-options {
                background-color: tint(@background-color-contrast, 5%);
            }
        }
    }
    .@{prefix}-content {
        .@{prefix}-entry {
            @{prefix}-input-text {
                background-color: @background-color-contrast;
            }
        }
        .@{prefix}-media {
            .@{prefix}-item {
                background-color: @background-color-contrast;
                &.@{prefix}-document {
                    div {
                        svg {
                            path {
                                fill: @primary-color;
                            }
                        }
                    }
                }
            }
        }
        .@{prefix}-options {
            a {
                .text-color-states(@text-color-strong);
                .icon-color-states(@text-color-strong);
            }
            button {
                .background-color-states(@primary-color);
            }
        }
    }
}

// feed-display.less
@{prefix}-feed-display.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-information {
            background-color: @background-color-contrast;
            .@{prefix}-credit {
                span {
                    color: @text-color-normal;
                }
            }
            a {
                svg {
                    path {
                        fill: @primary-color;
                    }
                }
            }
        }
        .@{prefix}-display {
            .@{prefix}-container {
                .@{prefix}-media {
                    & > * {
                        &.@{prefix}-multiple {
                            & > a {
                                .icon-color-states(@primary-color);
                            }
                        }
                    }
                }
            }
        }
    }
}

// feed-item.less
@{prefix}-feed-item.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        border-color: fade(@default-color, 3%);
        background-color: @background-color-contrast;
        .@{prefix}-entry {
            .@{prefix}-title {
                color: @primary-color;
            }
            .@{prefix}-media {
                &.@{prefix}-document {
                    a {
                        border-color: fade(@primary-color, 20%);
                        background-color: fade(@primary-color, 10%);
                        &:hover {
                            border-color: fade(@primary-color, 50%);
                            background-color: fade(@primary-color, 25%);
                            svg {
                                path {
                                    fill: @primary-color;
                                }
                            }
                            b {
                                color: @primary-color;
                            }
                        }
                        svg {
                            path {
                                fill: fade(@primary-color, 85%);
                            }
                        }
                        b {
                            color: fade(@primary-color, 85%);
                        }
                    }
                }
            }
        }
        .@{prefix}-interaction {
            .@{prefix}-synopsis {
                & > * {
                    .@{prefix}-unauthorized {
                        svg {
                            path {
                                fill: @text-color-normal !important;
                            }
                        }
                    }
                }
                .@{prefix}-rating-indicator {
                    .@{prefix}-icon {
                        svg {
                            path {
                                fill: desaturate(@text-color-weak, 65%);
                            }
                        }
                    }
                }
                .@{prefix}-comments-indicator {
                    .@{prefix}-icon {
                        svg {
                            path {
                                fill: desaturate(@text-color-weak, 65%);
                            }
                        }
                    }
                }
                .@{prefix}-share-indicator {
                    .@{prefix}-icon {
                        svg {
                            path {
                                fill: desaturate(@text-color-weak, 65%);
                            }
                        }
                    }
                }
            }
        }
        .@{prefix}-comments {
            .@{prefix}-comment {
                &.@{prefix}-pseudo {
                    background-color: fade(@primary-color, 15%);
                }
                .@{prefix}-credit {
                    span {
                        color: @text-color-normal;
                    }
                }
                p {
                    &.@{prefix}-editable {
                        border-color: fade(@default-color, 15%);
                        background-color: @background-color-contrast;
                    }
                }
            }
        }
    }
}

// feedback.less
@{prefix}-feedback.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-item {
            .@{prefix}-memo {
                border-color: fade(@default-color, 3%);
                background-color: @background-color-contrast;
                &::before {
                    color: @background-color-contrast;
                }
                a {
                    .text-color-states(@text-color-normal);
                }
                p {
                    color: @text-color-normal;
                }
            }
        }
    }
}

// forum.less
@{prefix}-forum.@{prefix}-root {
    color: @text-color-normal;
}

// forum-composer.less
@{prefix}-forum-composer.@{prefix}-root {
    color: @text-color-normal;
}

// forum-list.less
@{prefix}-forum-list.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-bar {
            .@{prefix}-search {
                background-color: desaturate(tint(@primary-color, 20%), 5%);
            }
            button {
                .background-color-states(@primary-color);
            }
        }
        .@{prefix}-list {
            .@{prefix}-item {
                color: @text-color-normal;
                &.@{prefix}-placeholder {
                    color: @text-color-weak;
                }
                .@{prefix}-title {
                    color: @text-color-strong;
                }
                /*
                .@{prefix}-views {
                    svg {
                        path {
                            fill: @text-color-normal;
                        }
                    }
                }
                */
                time {
                    color: @text-color-normal;
                }
                .@{prefix}-contributors {
                    img {
                        border-color: @background-color-contrast;
                    }
                }
            }
        }
    }
}

// forum-thread.less
@{prefix}-forum-thread.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
      .@{prefix}-content {
          .@{prefix}-reply {
              background-color: @background-color-contrast;
          }
      }
    }
    .@{prefix}-content {
        .@{prefix}-thread {
            .@{prefix}-title {
                h1 {
                    color: @text-color-strong;
                }
            }
            .@{prefix}-replies {
                .@{prefix}-item {
                    .@{prefix}-credit {
                        span {
                            color: @text-color-normal;
                        }
                    }
                    p {
                        color: @text-color-normal;
                        &.@{prefix}-editable {
                            color: @text-color-normal;
                            border-color: fade(@default-color, 15%);
                            background-color: @background-color-contrast;
                        }
                    }
                }
            }
        }
        .@{prefix}-reply {
            border-top-color: @primary-color;
            .@{prefix}-synopsis {
                & > b {
                    color: @text-color-normal;
                }
                & > a {
                    &.@{prefix}-icon {
                        svg {
                            path {
                                fill: @primary-color;
                            }
                        }
                    }
                }
            }
        }
    }
}

// group-card.less
@{prefix}-group-card.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-information {
            background-color: @background-color-contrast;
        }
    }
    .@{prefix}-information {
        b {
            .text-color-states(@primary-color);
        }
        p {
            color: @text-color-normal;
        }
    }
}

// group-header.less
@{prefix}-group-header.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-information {
            background-color: @background-color-contrast;
        }
    }
    .@{prefix}-information {
        a {
            .text-color-states(@primary-color);
        }
        p {
            color: @text-color-normal;
        }
        .@{prefix}-members {
            span {
                background-color: @primary-color;
            }
        }
    }
    ul {
        li {
            &:hover {
                a {
                    color: @text-color-normal;
                }
            }
            &.@{prefix}-active {
                a {
                    color: @text-color-normal;
                }
            }
            a {
                color: @text-color-normal;
                span {
                    color: @text-color-normal;
                }
                svg {
                    path {
                        fill: @primary-color;
                    }
                }
            }
        }
    }
}
/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-group-header.@{prefix}-root {
        &.@{prefix}-box {
            ul {
                li {
                    &.@{prefix}-active {
                        background-color: @background-color-contrast;
                    }
                }
            }
        }
        .@{prefix}-information {
            .@{prefix}-members {
                img, span {
                    border-color: @background-color-contrast;
                }
            }
        }
        ul {
            li {
                a {
                    &.@{prefix}-count, &.@{prefix}-label {
                        &::after {
                            color: @text-color-weak;
                        }
                    }
                }
            }
        }
    }
}
/* 480 ≤ Window Width < 768 */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    @{prefix}-group-header.@{prefix}-root {
        &.@{prefix}-box {
            ul {
                li {
                    &.@{prefix}-active {
                        background-color: @background-color-contrast;
                    }
                }
            }
        }
        .@{prefix}-information {
            .@{prefix}-members {
                img, span {
                    border-color: @background-color-contrast;
                }
            }
        }
        ul {
            li {
                a {
                    &.@{prefix}-count, &.@{prefix}-label {
                        &::after {
                            color: @text-color-weak;
                        }
                    }
                }

            }
        }
    }
}

// group-settings.less
@{prefix}-group-settings.@{prefix}-root {
    .@{prefix}-content {
        h2 {
            color: @primary-color;
        }
        .@{prefix}-cover {
            &:hover {
                &::before {
                    background-color: fade(@primary-color, 90%);
                }
            }
            &::before {
                background-color: fade(@primary-color, 60%);
            }
        }
    }
}

@{prefix}-input-text.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-input {
        background-color: @input-color;
    }
}

// messages.less
@{prefix}-messages.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-sidebar {
            input, input[type] {
                background-color: @primary-color;
            }
            .@{prefix}-suggestions {
                a {
                    b {
                        color: @text-color-normal;
                    }
                }
            }
            .@{prefix}-list {
                .@{prefix}-item {
                    &.@{prefix}-unread {
                        background-color: fade(@primary-color, 15%);
                        &:hover {
                            background-color: fade(@primary-color, 20%);
                        }
                        div {
                            color: @text-color-weak;
                            b {
                                color: @primary-color;
                            }
                        }
                    }
                    div {
                        color: @text-color-normal;
                        b {
                            color: @text-color-strong;
                        }
                    }
                }
            }
        }
        .@{prefix}-main {
            .@{prefix}-conversation {
                .@{prefix}-item {
                    &.@{prefix}-inbound {
                        p {
                            color: @text-color-normal;
                        }
                    }
                    &.@{prefix}-outbound {
                        p {
                            background-color: @primary-color;
                        }
                    }
                    time {
                        color: @text-color-weak;
                    }
                }
            }
        }
    }
}
/* Window Width < 480 */
@media only screen and (max-width: 479px) {
    @{prefix}-messages.@{prefix}-root {
        .@{prefix}-content {
            .@{prefix}-sidebar {
                .@{prefix}-suggestions {
                    a {
                        background-color: @background-color-shade;
                    }
                }
            }
        }
    }
}

// messages-composer.less
@{prefix}-messages-composer.@{prefix}-root {
    &.@{prefix}-box {
        .@{prefix}-content {
            form {
                background-color: @background-color-contrast;
            }
        }
    }
    .@{prefix}-content {
        .@{prefix}-recipient {
            color: @text-color-strong;
            &::before {
                color: @text-color-normal;
            }
        }
        input, input[type] {
            color: @text-color-strong;
        }
    }
}

// notifications.less
@{prefix}-notifications.@{prefix}-root {
    color: @text-color-normal;
}

// notifications-button.less
@{prefix}-notifications-button.@{prefix}-root {
    &.@{prefix}-box {
        background-color: @background-color-contrast;
    }
    .@{prefix}-content {
        a {
            .@{prefix}-icon {
                path {
                    fill: @primary-color;
                }
            }
            .@{prefix}-count {
                color: @primary-color;
            }
        }
    }
}

// notifications-list.less
@{prefix}-notifications-list.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-list {
            & > a {
                .text-color-states(@primary-color);
            }
        }
    }
}

// overlay.less
@{prefix}-overlay.@{prefix}-root {
    color: @text-color-normal;
}

// private-content.less
@{prefix}-private-content.@{prefix}-root {
    .@{prefix}-content {
        &.@{prefix}-blocked {
            border-color: @text-color-weak;
        }
    }
}

// profile-activity.less
@{prefix}-profile-activity.@{prefix}-root {
    .@{prefix}-content {
        ul {
            li {
                border-left-color: fade(@text-color-normal, 35%);
                &::before {
                    background-color: @primary-color;
                }
                div {
                    color: @text-color-normal;
                    b {
                        color: @text-color-normal;
                    }
                    svg {
                        path {
                            fill: @primary-color;
                        }
                    }
                    time {
                        color: @text-color-weak;
                    }
                }
            }
        }
    }
}

// profile-card.less
@{prefix}-profile-card.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-information {
            background-color: @background-color-contrast;
        }
    }
    .@{prefix}-option {
        .icon-color-states(@primary-color);
    }
    .@{prefix}-information {
        img {
            border-color: fade(@default-color, 15%);
        }
        b {
            .text-color-states(@primary-color);
        }
        p {
            color: @text-color-normal;
        }
    }
}

// profile-header.less
@{prefix}-profile-header.@{prefix}-root {
    color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-information {
            background-color: @background-color-contrast;
        }
    }
    .@{prefix}-option {
        .icon-color-states(@primary-color);
        svg {
            path {
                fill: @primary-color;
            }
        }
    }
    .@{prefix}-information {
        img {
            border-color: fade(@default-color, 15%);
        }
        a {
            .text-color-states(@primary-color);
        }
        p {
            color: @text-color-normal;
        }
    }
    ul {
        li {
            &:hover {
                a {
                    color: @text-color-normal;
                }
            }
            &.@{prefix}-active {
                a {
                    color: @text-color-normal;
                }
            }
            a {
                color: @text-color-normal;
                &.@{prefix}-count {
                    &::after {
                        color: @text-color-weak;
                    }
                }
                span {
                    color: @text-color-normal;
                }
                svg {
                    path {
                        fill: @primary-color;
                    }
                }
            }
        }
    }
}
/* 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 {
                        background-color: @background-color-contrast;
                    }
                }
            }
        }
    }
}
/* 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 {
                        background-color: @background-color-contrast;
                    }
                }
            }
        }
    }
}

// profile-settings.less
@{prefix}-profile-settings.@{prefix}-root {
    .@{prefix}-content {
        h2 {
            color: @primary-color;
        }
        .@{prefix}-avatar {
            &:hover {
                &::before {
                    background-color: fade(@primary-color, 90%);
                }
            }
            &::before {
                background-color: fade(@primary-color, 60%);
            }
        }
    }
}

// star-list.less
@{prefix}-star-list.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        .@{prefix}-bar {
            .@{prefix}-search {
                background-color: desaturate(tint(@primary-color, 20%), 5%);
            }
        }
        .@{prefix}-list {
            .@{prefix}-item {
                color: @text-color-normal;
                &.@{prefix}-placeholder {
                    color: @text-color-weak;
                }
                .@{prefix}-title {
                    color: @text-color-strong;
                }
            }
        }
    }
}

// star-button.less
@{prefix}-star-button.@{prefix}-root {
    color: @text-color-normal;
    .@{prefix}-content {
        a {
            .@{prefix}-text {
                color: @text-color-normal;
            }
        }
    }
}