/* more styles in brandification */
@mixin brandify($brand-color, $brand-color-brighter) {
  a {
    color: $brand-color;
  }
  @include ember-code-example($brand-color);

  .doc-page-nav-link-next,
  .doc-page-nav-link-prev {
    border: 1px solid $brand-color;
  }

  .main-page-headline {
    background: $brand-color
      linear-gradient($brand-color, $brand-color-brighter);
  }

  .get-started-button {
    border: 1px solid $brand-color;
  }

  .contribute-call-to-action a {
    background-color: $brand-color;
    border: 1px solid darken($brand-color, 12%);
    box-shadow: 0 2px darken($brand-color, 18%);
    &:hover {
      background-color: darken($brand-color, 5%);
    }
  }
  .main-header {
    background-color: $brand-color;
  }

  .logo-dropdown-button {
    background: $brand-color;
    &:hover {
      background-color: lighten($brand-color, 3%);
    }
  }
  .main-header-nav-link {
    color: inherit;
  }
  @media only screen and (min-width: $small-breakpoint) {
    .main-header-nav-link.active {
      color: $brand-color;
    }
  }
  .side-nav-link.active {
    border-left: 3px solid $brand-color;
    color: $brand-color;
  }
  .circular-loader {
    border-top: 1.1em solid rgba($brand-color, 0.25);
    border-right: 1.1em solid rgba($brand-color, 0.25);
    border-bottom: 1.1em solid rgba($brand-color, 0.25);
  }
}

.logo-dropdown-content-pantone-entry.brown {
  background-color: $brown-color;
}
.logo-dropdown-content-pantone-entry.orange {
  background-color: $orange-color;
}
.logo-dropdown-content-pantone-entry.blue {
  background-color: $blue-color;
}
.logo-dropdown-content-pantone-entry.purple {
  background-color: $purple-color;
}
.logo-dropdown-content-pantone-entry.line {
  background-color: $line-color;
}
.logo-dropdown-content-pantone-entry.pink {
  background-color: $pink-color;
}
.logo-dropdown-content-pantone-entry.red {
  background-color: $red-color;
}

@include brandify($brown-color, $brown-color-brighter);

.orange-brand {
  @include brandify($orange-color, $orange-color-brighter);
}
.blue-brand {
  @include brandify($blue-color, $blue-color-brighter);
}
.purple-brand {
  @include brandify($purple-color, $purple-color-brighter);
}
.line-brand {
  @include brandify($line-color, $line-color-brighter);
}
.pink-brand {
  @include brandify($pink-color, $pink-color-brighter);
}
.red-brand {
  @include brandify($red-color, $red-color-brighter);
}
.brown-brand {
  // @include brandify($brown-color, $brown-color-brighter);
}
