@charset "UTF-8";

@import "color-palette";
@import "variables";

.theme-dark { color: $color-text-light; background: $color-bg-dark;

  a { @include link-colors($color-accent-light, $color-accent-light-hover, $color-accent-light-active); }

  article a[href^="#"]:not([href="#"]):not(.btn) { border-color: $color-accent-light;
    &:hover { border-color: $color-accent-light-hover; }
    &:active { border-color: $color-accent-light-active; }
  } // D7

  article blockquote { color: $color-text-light-secondary; } // D7

  table { background: $color-bg-dark-card; border-color: #585858 !important; }
  tr { border-color: #585858; }
  tr.selected { background: lighten($color-bg-dark-card, 4); }
  tr:hover, tr.selected:hover { background: $color-bg-dark-hover; }
  th { color: $color-text-light-secondary; }
  .table-bordered { box-shadow: 0 0 0 1px #585858; }
  .table-striped { 
    tbody tr:nth-child(even) { background: lighten($color-bg-dark-card, 2); }
    tbody tr:nth-child(even):hover, tbody tr.selected:nth-child(even):hover { background: $color-bg-dark-hover; }
    tbody tr.selected:nth-child(even) { background: lighten($color-bg-dark-card, 4); }
  }
  .table-responsive td:before { color: $color-text-light-secondary; }

  :not(pre) > code, pre { background: $color-bg-dark-bar; }

  .rippleAnimate { background-color: rgba(#FFF, 0.1); }

  .text-secondary { color: $color-text-light-secondary; }
  .text-disabled { color: $color-text-light-disabled; }
  .text-primary, a.text-primary, a.text-primary:hover, a.text-primary:focus { color: $color-primary-light; }
  .text-accent, a.text-accent, a.text-accent:hover, a.text-accent:focus { color: $color-accent-light; }
  .material-icons.text-accent { color: $color-accent-light; }

  .divider-top { border-top-color: $color-light-divider; }
  .divider-bottom { border-bottom-color: $color-light-divider; }

  .highlight { background: $color-bg-dark-bar; }
  .info { background: color($color-primary-base, 900);
    &:before { color:color($color-primary-base, 400); }
  }

  #footer { background: $color-bg-dark-bar; }

  .btn, input[type="submit"] { color: $color-text-light;
    &:hover, &:focus { background: rgba(#CCC, .15); color: $color-text-light; }
    &:active { background: rgba(#CCC, .25); }
  }
  .btn-colored, .btn-colored:hover, .btn-colored:focus,
  .btn.btn-colored, .btn.btn-colored:hover, .btn.btn-colored:focus { color: $color-primary-light; }
  .btn-accent, .btn-accent:hover, .btn-accent:focus,
  .btn.btn-accent, .btn.btn-accent:hover, .btn.btn-accent:focus { color: $color-accent-light; }
  .btn-raised, .btn.btn-raised { background: rgba(#FFF, .05);
    &.btn-colored { background: $color-primary-light; color: contrast-color($color-primary-light); }
    &.btn-accent { background: $color-accent-light; color: contrast-color($color-accent-light); }
    &.btn-colored:hover, &.btn-colored:focus { background: $color-primary-light-hover; color: contrast-color($color-primary-light); }
    &.btn-colored:active { background: $color-primary-light-active; }
    &.btn-accent:hover, &.btn-accent:focus { background: $color-accent-light-hover; color: contrast-color($color-accent-light); }
    &.btn-accent:active { background: $color-accent-light-active; }
  }
  .btn-disabled { color: $color-text-light-disabled;
    &:hover, &:focus, &:active { background: none; color: $color-text-light-disabled; }
  }

  .fab { color: $color-text-light; 
    &:hover, &:focus { background: rgba(#CCC, .15); color: $color-text-light; }
    &:active { background: rgba(#CCC, .25); }

    &.fab-colored { background: $color-primary-light; color: contrast-color($color-primary-light);
      &:hover, &:focus { background: $color-primary-light-hover; color: contrast-color($color-primary-light); }
      &:active { background: $color-primary-light-active; }
    }

    &.fab-accent { background: $color-accent-light; color: contrast-color($color-accent-light);
      &:hover, &:focus { background: $color-accent-light-hover; color: contrast-color($color-accent-light); }
      &:active { background: $color-accent-light-active; }
    }
  }

  .tooltip:before { background: rgba(#FFF, 0.9); color: $color-text; }
  
  .form-item {
    label, .description { color: $color-text-light-secondary; }
    label.option, &.focused label.option { color: $color-text-light; }
    &.focused label { color: $color-accent-light }
    input, textarea, select { color: $color-text-light; }
    select option { color: $color-text; }
    input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], textarea, select { border-bottom-color: $color-light-divider;
      &:focus, &.error:focus { border-bottom-color: $color-accent-light }
      &::placeholder { color: $color-text-light-disabled; }
    }
    input[type="radio"], input[type="checkbox"] { color: $color-text-light-secondary; }
    input[type="checkbox"]:checked:before { color: $color-accent-light }
    input[type="radio"]:checked:before { color: $color-accent-light }
    &.form-type-select:after { color: $color-text-light-secondary; }
  }

  #drawer { background: $color-bg-dark; border-right-color: $color-bg-dark;
    .drawer-open & { border-right-color: $color-light-divider; }
    #drawer-menu-close a { color: $color-text-light; }
    #drawer-title { color: $color-text-light-secondary; }
    .menu { 
      li a { color: $color-text-light;
        &:hover { background: $color-bg-dark-hover; }
        &.icon-left:before, &.icon-right:after { color: $color-text-light-secondary; }
        &.services-icon-left:before, &.services-icon-right:after { background: $color-text-light-secondary; }
      }
      .active-trail a, .is-active { color: $color-primary-light;
        &.icon-left:before, &.icon-right:after { color: $color-primary-light; }
        &.services-icon-left:before, &.services-icon-right:after { background: $color-primary-light; }
      } // D7
    } 
  }

  .sidebar .menu { 
    li a {  color: $color-text-light;
      &:hover { background: $color-bg-dark-hover; }
    }
    li a.is-active { color: $color-primary-light; } // D7
    .collapsed > a:after, .expanded > a:after { color: $color-text-light-secondary; }
  }

  .block-search.search-persistent form {
    .form-item.focused input[type="text"], input[type="search"] { color: $color-text;
      &::placeholder { color: $color-text-disabled; }
    }
  }

  .tabs ul li a, ul.tabs li a { color: $color-text-light-secondary;
    &:hover { border-color: rgba($color-primary-light, .5); }
    &.is-active { border-color: $color-primary-light; color: $color-primary-light;
      &:hover { border-color: $color-primary-light; }
    } 
  }

  .card { background: $color-bg-dark-card; }
  .card-main { border-bottom-color: $color-light-divider; background: $color-bg-dark-card; }
  &.content-card .card-holder { background: $color-bg-dark-card; }
  .card-bg-primary { background: $color-primary; color: contrast-color($color-primary); }
  .card-bg-accent { background: $color-accent; color: contrast-color($color-accent); }

  .collapsible-toggle { 
    &:before { color: $color-text-light-secondary; }
    span { color: $color-accent-light; border-color: $color-accent-light;
      &:hover { color: $color-accent-light-hover; border-color: $color-accent-light-hover; }
      &:active { color: $color-accent-light-active; border-color: $color-accent-light-active; }
    } 

  }
  .collapsible-content { border-color: $color-light-divider; }

  .menu-dropdown { background: $color-bg-dark-card; 
    li a { color: $color-text-light;
      &:hover { background: $color-bg-dark-hover; color: $color-text-light; }
    } 
  }

  .pager {
    .pager-item.item-ellipsis, .pager-item.item-current {
      & > a, & > span {
        &:before { color: $color-text-light-disabled; }
      }
    }
    .pager-item.item-current {
      & > a, & > span { color: $color-primary-light; }
    }
    .pager-item.item-first, .pager-item.item-previous, .pager-item.item-next, .pager-item.item-last {
      & > span {
        &:before { color: $color-text-light-disabled; }
      }
    }
  }
  .card-actions .pager {
    .pager-item.item-previous, .pager-item.item-next {
      & > a:before { color: $color-text-light; }
    }
  }
  .card-actions .pager-summary {  color: $color-text-light-secondary; }

  .messages-status { background: color($green, 900);
    &:before { color: color($green, 400); }
    a { @include link-colors(color($green, 'a700'), lighten(color($green, 'a700'), 3), lighten(color($green, 'a700'), 6)); }
  }
  .messages-warning { background: color($yellow, 900);
    &:before { color: color($yellow, 400); }
    a { @include link-colors(color($yellow, 'a200'), lighten(color($yellow, 'a200'), 3), lighten(color($yellow, 'a200'), 6)); }
  }
  .messages-error { @extend .info; background: color($red, 900);
    &:before { color: color($red, 300); }
    a { @include link-colors(color($red, 'a100'), lighten(color($red, 'a100'), 3), lighten(color($red, 'a100'), 6)); }
  }
}
