// // Alert modules require a darker color tint
// @mixin AlertColorCalc($custom) {
//   // custom background color tint
//   background-color: setcolor($custom,xlight);
//   // border color = background * 0.65
//   border: 1px solid setcolor($custom,light);
//   // custom foreground color
//   color: setcolor($custom,dark);
// }

// Used in Mindsets
@mixin ThemeMorph($name,$color) {
  // find output path by dynamic class name
  svg#morph path#output.#{$name} {
    // set associated color for this class
    stroke: $color;
  }
}

// Used in Patterns
@mixin ThemeArtformHeader($name) {

  .block.header.title-artform.tag-#{$name} {
    background-color: setcolor($name);

    .list.login-list {
      border: 1px solid setcolor($name);
    }

    .item.login-item {
      background-color: lighten(setcolor($name),48%);
      color: darken(setcolor($name),10%);

      &:hover {
        background-color: lighten(setcolor($name),43%);
      }

      + .login-item {
        border-top: 1px solid lighten(setcolor($name),28%);
      }
    }
  }
}

// Used in Patterns

@mixin ThemeHeader($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {

    .block.header {
      background-color: setcolor($color);
    }

    .list.login-list {
      border: 1px solid setcolor($color,light);
    }

    .item.login-item {
      background-color: setcolor($color,xlight);
      color: setcolor($color,dark);
  
      &:hover {
        background-color: darken(setcolor($color,xlight),10%);
      }
  
      + .login-item {
        border-top: 1px solid setcolor($color,light);
      }
    }
  }
}

// Used in Patterns
@mixin ThemeCheckbox($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    .checkbox-input:checked + label {
      background-color: setcolor($color,xlight);
      border: 1px solid setcolor($color,light);
      color: setcolor($color,dark);
    }
  }
}

// Used in Patterns
@mixin ThemeTextArea($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    label.textarea {
      color: setcolor($color,dark);
    }
    textarea {
      background-color: setcolor($color,xlight);
      border: 1px solid setcolor($color,light);
      color: setcolor($color,dark);
    }
  }
}

// Used in Patterns
@mixin ThemeSelect($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    select {
      background: setcolor($color,xlight);
      border: 1px solid setcolor($color,light);
      color: setcolor($color,dark);
    }
  }
}

// Used in Patterns
@mixin ThemeList($name,$col) {
  .area.title-#{$name} {

    label.select {
      color: $col;
    }

    select {
      @include bg($col);
    }

    .jcf-list-box {
      @include borderCol($col);
      @include bg($col);
      color: $col;
    }

    .jcf-list .jcf-option.jcf-selected {
      background: rgba($col,10%);
    }
  }
}

// Used in Patterns
@mixin ThemeText($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    label {
      color: setcolor($color,dark);
    }
    input[type="text"] {
      border: 1px solid setcolor($color,light) !important;
      background-color: setcolor($color,xlight);
      color: setcolor($color,dark);
    }
  }
}

// Used in Patterns
@mixin ThemePassword($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    .block.password-strength {
      background-color: setcolor($color);
    }
    .block.password-bg {
      background-color: setcolor($color,xlight);
    }
  }
}

// Used in Patterns
@mixin ThemeMessage($name,$col) {
  .area.title-#{$name} {
    .block.message {
      color: $col;
    }
  }
}

// Used in Patterns
@mixin ThemeCallout($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    .block.title {
      background-color: setcolor($color,xlight);
      color: setcolor($color,dark);
    }
  }
}

// Used in Patterns
@mixin ThemeAlert($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    .block.form-alert {
      background-color: setcolor($color,xlight);
      border: 1px solid setcolor($color,light);
      color: setcolor($color,dark);
    }
  }
}

// Used in Patterns
@mixin ThemeButton($chapter,$title,$color) {
  .wrap.chapter-#{$chapter}.title-#{$title} {
    .button-wrap {
      background: setcolor($color);

      &:hover {
        background: darken(setcolor($color),5%);
      }
    }
  }
}

// Used globally
@mixin ThemeHome($name,$color){
  // inherit theme color for the book cover
  .link.book.#{$name} {
    background-color: $color;
  }
}

// Used globally
@mixin ThemeTopbar($name,$color) {
  // inherit theme color for the topbar link
  .link.navigation.#{$name} {
    color: $color;
  }
  // add theme color tint to background on hover
  .link.navigation.#{$name}:hover {
    background-color: rgba($color,10%);
  }  
}

// Used globally
@mixin ThemeCover($name,$color,$left:false,$chapter:false) {

  @if $chapter {

    // Chapter Covers

    .wrap.page-wrap.type-chapter.chapter-#{$name} {
      background-color: $color;

      @if $left {
        .title.type-chapter {
          left: #{$left}px;
        }
      }
    }
  } @else {

    // Chapter Covers

    .area.type-chapter.book-#{$name} {
      background-color: $color;
    }
  }
}

// Used globally
@mixin PageInfo($col,$right) {

  .title.page-weight {
    color: $col;
  }

  .title.page-chapter {
    color: $col;
    @if $right {
      right: #{$right}px;
    }
  }
}

// Used in Mindsets
@mixin ThemeRollerInput($name,$col) {
  background-color: rgba($col,10%);
  color: $col;
}

// Used in Mindsets
@mixin ThemeRollerOutput($name,$col) {
  background-color: rgba($col,10%);
  border-color: rgba($col,20%);
  color: $col;
}

// Used in Mindsets
@mixin ThemeRoller($name,$col,$chapter:false) {

  @if $chapter {

    .list.roller.chapter-#{$name} {

      .item.roller.input {
        @include ThemeRollerInput($name,$col);

        &.active {
          background-color: $col;
          color: white;
        }
      }

      .item.roller.output {
        @include ThemeRollerOutput($name,$col);
      }
    }

  } @else {

    .item.roller.input.title-#{$name} {
      @include ThemeRollerInput($name,$col);

      &.active {
        background-color: $col;
        color: white;
      }
    }

    .item.roller.output.title-#{$name} {
      @include ThemeRollerOutput($name,$col);
    }
  }
}

// Used in Mindsets
@mixin ThemeChart($col) {
  .block.chart-pcent-title {
    color: $col;
  }

  .block.chart-bar-bg {
    background-color: $col;
  }
}

// Used in Mindsets
@mixin ThemePages($name,$col,$right:false,$chapter:false) {

  @if $chapter {

    .wrap.type-page.chapter-#{$name} {
      fill: $col;

      @include PageInfo($col,$right);

      @include ThemeChart($col);

      .block.number-container {
        color: $col;
      }

      .lnk.stats {
        color: $col;
      }

      .list.pies {
        color: $col;
      }
    }

  } @else {

    .wrap.type-page.book-#{$name} {
      stroke: $col;
      fill: $col;

      @include PageInfo($col,$right);

      @include ThemeChart($col);

      .block.number-container {
        color: $col;
      }

      .lnk.stats {
        color: $col;
      }

      .list.pies {
        color: $col;
      }
    }
  }
}

// Used in Mindsets
@mixin ThemeSnap($name,$color) {
  svg.snap {
    path.#{$name} {
      fill: #{$color};
    }
  }
}

// Used everywhere
@mixin ThemeSearch($name,$col,$chapter:false) {

  @if $chapter {
 
    // Search Results

    .block.results-entry.chapter-#{$name} {
      color: $col;

      &:hover {
        background-color: rgba($col,10%);
      }

      .block.results-dot {
        background-color: $col;
      }
    }

  } @else {

    // Search Results

    .block.results-entry.book-#{$name} {
      color: $col;

      &:hover {
        background-color: rgba($col,10%);
      }

      .block.results-dot {
        background-color: $col;
      }
    }
  }
}

@mixin ThemeBook($name,$color) {

  @include ThemeHome($name,$color);

  @include ThemeTopbar($name,$color);

}