/**
 * 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 {
    .toggle-nav-collapse,
    .pin-nav-btn {
      color: $color-light;

      &:hover {
        color: $white-light;
      }
    }

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

    .sidebar-action-buttons {
      color: $color-light;
      background-color: lighten($color-darker, 5%);
    }

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

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

          i {
            color: $color-light;
          }

          path,
          polygon {
            fill: $color-light;
          }

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

          svg {
            position: relative;
            top: 3px;
          }
        }

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

        &.active a {
          color: $white-light;
          background: $color-dark;

          &.no-highlight {
            border: none;
          }

          i {
            color: $white-light;
          }

          path,
          polygon {
            fill: $white-light;
          }
        }
      }

    }
  }
}

$theme-charcoal: #3d454d;
$theme-charcoal-light: #485157;
$theme-charcoal-dark: #383f45;
$theme-charcoal-text: #b9bbbe;

$theme-blue-light: #becde9;
$theme-blue: #2980b9;
$theme-blue-dark: #1970a9;
$theme-blue-darker: #096099;

$theme-graphite-lighter: #ccc;
$theme-graphite-light: #777;
$theme-graphite: #666;
$theme-graphite-dark: #555;

$theme-gray-light: #979797;
$theme-gray: #373737;
$theme-gray-dark: #272727;
$theme-gray-darker: #222;

$theme-green-light: #adc;
$theme-green: #019875;
$theme-green-dark: #018865;
$theme-green-darker: #017855;

$theme-violet-light: #98c;
$theme-violet: #548;
$theme-violet-dark: #436;
$theme-violet-darker: #325;

body {
  &.ui_blue {
    @include gitlab-theme($theme-blue-light, $theme-blue, $theme-blue-dark, $theme-blue-darker);
  }

  &.ui_charcoal {
    @include gitlab-theme($theme-charcoal-text, $theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark);
  }

  &.ui_graphite {
    @include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark);
  }

  &.ui_gray {
    @include gitlab-theme($theme-gray-light, $theme-gray, $theme-gray-dark, $theme-gray-darker);
  }

  &.ui_green {
    @include gitlab-theme($theme-green-light, $theme-green, $theme-green-dark, $theme-green-darker);
  }

  &.ui_violet {
    @include gitlab-theme($theme-violet-light, $theme-violet, $theme-violet-dark, $theme-violet-darker);
  }
}