/**
 * Styles the GitLab application with a specific color theme
 *
 * $color-light  -
 * $color        -
 * $color-darker -
 * $color-dark   -
 */
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
  .page-with-sidebar {
    .header-logo {
      background: $color-darker;

      a {
        color: $color-light;

        h3 {
          color: $color-light;
        }
      }

      &:hover {
        background-color: $color-dark;
        a {
          color: #fff;

          h3 {
            color: #fff;
          }
        }
      }
    }

    .collapse-nav a {
      color: #fff;
      background: $color;
    }

    .sidebar-wrapper {
      background: $color-darker;

      .sidebar-user {
        background: $color-darker;
        color: $color-light;

        &:hover {
          background-color: $color-dark;
          color: #fff;
          text-decoration: none;
        }
      }
    }

    .nav-sidebar li {
      a {
        color: $color-light;

        &:hover, &:focus, &:active {
          background: $color-dark;
        }

        i {
          color: $color-light;
        }

        .count {
          color: $color-light;
          background: $color-dark;
        }
      }

      &.separate-item {
        border-top: 1px solid $color;
      }

      &.active a {
        color: #fff;
        background: $color-dark;

        &.no-highlight {
          border: none;
        }

        i {
          color: #fff
        }
      }
    }
  }
}

$theme-blue: #2980b9;
$theme-charcoal: #3d454d;
$theme-graphite: #666;
$theme-gray: #373737;
$theme-green: #019875;
$theme-violet: #548;

body {
  &.ui_blue {
    @include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
  }

  &.ui_charcoal {
    @include gitlab-theme(#d6d7d9, #485157, $theme-charcoal, #353b41);
  }

  &.ui_graphite {
    @include gitlab-theme(#ccc, #777, $theme-graphite, #555);
  }

  &.ui_gray {
    @include gitlab-theme(#979797, $theme-gray, #272727, #222);
  }

  &.ui_green {
    @include gitlab-theme(#adc, $theme-green, #018865, #017855);
  }

  &.ui_violet {
    @include gitlab-theme(#98c, $theme-violet, #436, #325);
  }
}