//          888             888                                    888
//          888             888                                    888
//          888             888                                    888
// .d8888b  888888  8888b.  888888 .d88b.          .d8888b .d88b.  888  .d88b.  888d888 .d8888b
// 88K      888        "88b 888   d8P  Y8b        d88P"   d88""88b 888 d88""88b 888P"   88K
// "Y8888b. 888    .d888888 888   88888888 888888 888     888  888 888 888  888 888     "Y8888b.
//      X88 Y88b.  888  888 Y88b. Y8b.            Y88b.   Y88..88P 888 Y88..88P 888          X88
//  88888P'  "Y888 "Y888888  "Y888 "Y8888          "Y8888P "Y88P"  888  "Y88P"  888      88888P'

// State Colors
//
// Include these Sass mixins to use standard state colors on an element and its children.
//
// Styleguide SassDirectives.StateColors
//
// Weight: 5

// Default State
//
// ^^^scss
// @include state-default();
// ^^^
//
// Markup:
// <div class="panel border state-default">
//   <h1>Default State</h1>
//   <p>This is an example of our <a href="#">default state</a> in action.</p>
// </div>
//
// Styleguide SassDirectives.StateColors.DefaultState
@mixin state-default {
  background-color: $color-theme-base-background;
  border-color: $color-theme-dark-background-alt;
  color: $color-theme-base-text;

  a {
    color: $color-theme-base-link;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-theme-base-hover-background;
      color: $color-theme-base-hover-text;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-theme-base-accent;
  }

  .panel-header,
  .panel-header:first-child {
    background-color: $color-theme-dark-background-alt;
    color: $color-theme-dark-text;
  }
}

// Error State
//
// ^^^scss
// @include state-error();
// ^^^
//
// Markup:
// <div class="panel border state-error">
//   <h1>Error State</h1>
//   <p>This is an example of our <a href="#">error state</a> in action.</p>
// </div>
//
// Styleguide SassDirectives.StateColors.ErrorState
@mixin state-error {
  background-color: $color-state-error-background;
  border-color: $color-state-error-border;
  color: $color-state-error-text;

  a {
    color: $color-state-error-link;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-state-error-hover-background;
      color: $color-state-error-hover-text;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-state-error-accent;
  }

  .panel-header,
  .panel-header:first-child {
    background-color: $color-state-error-border;
    color: $color-theme-dark-text;
  }
}

// Info State
//
// ^^^scss
// @include state-info();
// ^^^
//
// Markup:
// <div class="panel border state-info">
//   <h1>Info State</h1>
//   <p>This is an example of our <a href="#">info state</a> in action.</p>
// </div>
//
// Styleguide SassDirectives.StateColors.InfoState
@mixin state-info {
  background-color: $color-state-info-background;
  border-color: $color-state-info-border;
  color: $color-state-info-text;

  a {
    color: $color-state-info-link;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-state-info-hover-background;
      color: $color-state-info-hover-text;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-state-info-accent;
  }

  .panel-header,
  .panel-header:first-child {
    background-color: $color-state-info-border;
    color: $color-theme-dark-text;
  }
}

// Success State
//
// ^^^scss
// @include state-success();
// ^^^
//
// Markup:
// <div class="panel border state-success">
//   <h1>Success State</h1>
//   <p>This is an example of our <a href="#">success state</a> in action.</p>
// </div>
//
// Styleguide SassDirectives.StateColors.SuccessState
@mixin state-success {
  background-color: $color-state-success-background;
  border-color: $color-state-success-border;
  color: $color-state-success-text;

  a {
    color: $color-state-success-link;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-state-success-hover-background;
      color: $color-state-success-hover-text;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-state-success-accent;
  }

  .panel-header,
  .panel-header:first-child {
    background-color: $color-state-success-border;
    color: $color-theme-dark-text;
  }
}

// Warning State
//
// ^^^scss
// @include state-warning();
// ^^^
//
// Markup:
// <div class="panel border state-warning">
//   <h1>Warning State</h1>
//   <p>This is an example of our <a href="#">warning state</a> in action.</p>
// </div>
//
// Styleguide SassDirectives.StateColors.WarningState
@mixin state-warning {
  background-color: $color-state-warning-background;
  border-color: $color-state-warning-border;
  color: $color-state-warning-text;

  a {
    color: $color-state-warning-link;

    &:active,
    &:focus,
    &:hover {
      background-color: $color-state-warning-hover-background;
      color: $color-state-warning-hover-text;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-state-warning-accent;
  }

  .panel-header,
  .panel-header:first-child {
    background-color: $color-state-warning-border;
    color: $color-theme-dark-text;
  }
}