// $_color-blue: #3070b3;

$_color-bluegray-base: #bec7cf;
$_color-blue: rgba(darken(saturate($_color-bluegray-base, 15%), 22.5%), 1);
$_color-blue: #1aa0d8;

$_color-darkgreen-base: #107e64;
// desaturate($_color-darkgreen-base, 50%);

$_color-bluegray-base: lighten(desaturate($_color-darkgreen-base, 50%), 55%);


// $_color-orange: #e37222;
// $_color-orange: #d1a147;
$_color-orange: #fc591f;

// $_color-green: #a2ad00;
$_color-green: #80ac6e;
$_color-green: #00a751;

// $_color-red: #E34A22;
$_color-red: #c85166;

$_color-pink: #FEF2F0;

$_color-gray-x-light: #f1f1f1;
$_color-gray-light: #e6e6e6;
$_color-gray-base: #b3b3b3;
$_color-gray-warm: #8f8f8f;
$_color-gray-text: #8a8a8a;
$_color-gray-dark: #737373;
$_color-gray-x-dark: #4d4d4d;

/* Slightly modified style from Bootstrap.
This must be included because library users may have incompatible version of Bootstrap
or no Bootstrap at all.
*/

.iw-table-dropdown-toggle {
  cursor: pointer;

  // Prevent the focus on the dropdown toggle when closing dropdowns
  &:focus {
    outline: 0;
  }

  &:hover {
    text-decoration: none;
  }
}

.iw-table-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 1rem;
  color: #4d4d4d;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  overflow: hidden;
}

.iw-table-dropdown-item {
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.5;
  color: #4d4d4d;
  text-align: inherit;
  white-space: nowrap;
  background: none;
  border: 0;
}

.iw-table-dropdown-item:hover {
  color: #404040;
  text-decoration: none;
  background-color: #f5f5f5;
}

// .iw-table-dropdown-item.active {
//   color: #fff;
//   text-decoration: none;
//   background-color: #1aa0d8;
//   outline: 0;
// }

.iw-table-dropdown-item.disabled, .iw-table-dropdown-item.disabled:focus, .iw-table-dropdown-item.disabled:hover {
  color: #b3b3b3;
  cursor: not-allowed;
}

.iw-table-dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}

  // Open state for the iw-table-dropdown
.open {
  // Show the menu
  > .iw-table-dropdown-menu {
    display: block;
  }

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
}

// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.iw-table-dropdown-menu-right {
  right: 0;
  left: auto; // Reset the default from `.dropdown-menu`
}

.iw-table-dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}


$app-colors: (
  blue: (
    light: lighten($_color-blue, 12.5%),
    base: $_color-blue,
    dark: darken($_color-blue, 10%)
  ),
  bluegray: (
    light: lighten(desaturate($_color-bluegray-base, 20%), 7.5%),
    base: lighten(desaturate($_color-bluegray-base, 15%), 2%),
    medium: lighten(desaturate($_color-darkgreen-base, 60%), 30%),
    dark: lighten(desaturate($_color-darkgreen-base, 60%), 20%) //#78848e
  ),
  bluegreen: (
    light: lighten($_color-darkgreen-base, 12.5%),
    base: $_color-darkgreen-base,
    dark: darken($_color-darkgreen-base, 10%)
  ),
  orange: (
    light: lighten($_color-orange, 12.5%),
    base: $_color-orange,
    dark: darken($_color-orange, 10%)
  ),
  green: (
    light: lighten($_color-green, 7.5%),
    base: $_color-green,
    dark: darken($_color-green, 10%)
  ),
  red: (
    light: lighten($_color-red, 12.5%),
    base: $_color-red,
    dark: darken($_color-red, 10%)
  ),
  pink: (
    light: lighten($_color-pink, 12.5%),
    base: $_color-pink,
    dark: darken($_color-pink, 10%)
  ),
  gray: (
    x-light: $_color-gray-x-light,
    light: $_color-gray-light,
    base: $_color-gray-base,
    warm: $_color-gray-warm,
    text: $_color-gray-text,
    dark: $_color-gray-dark,
    x-dark: $_color-gray-x-dark
  ),
  black: (
    base: #333
  )
);


$cell-padd-horz: 0.5rem;

$result-table-border-color-inner: #f0f0f0;
$result-table-border-color-inner-dark: #d3d3d3;
$result-table-border-color-outer: app-color(bluegray);


// see: http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
@function app-color($color, $tone: 'base') {
  @return map-get(map-get($app-colors, $color), $tone);
}


.iw-table {
  margin: 0;
  border-collapse: separate;
  border-width: 1px 0 0 1px;
  background: #fff;
  border-top-color: $result-table-border-color-inner-dark;
  border-left-color: $result-table-border-color-outer;
  box-shadow: none;

  thead {
    background: rgba(app-color(orange), 0.55);
  }

  thead th {
    padding: 0.5rem $cell-padd-horz;
    border-bottom-width: 1px;
    border-color: $result-table-border-color-inner-dark;
    vertical-align: top;
    background: #f4f4f4;
    box-shadow: inset 0 1px 0 rgba(#fff, 0.75), inset 1px 0 0 rgba(#fff, 0.5);

    &:last-child {
      border-right-color: $result-table-border-color-outer;
    }

    &:hover {

      .col-menu {
        opacity: 1;
      }
    }
  }

  .combo-th {
    width: 1%;
    padding-right: 8px;
    padding-left: 8px;
  }

  // UI sortable is not used anymore
  // .drag-column.ui-sortable-helper {
  //   opacity: 0.9;
  //   border-color: transparent;
  //   transform: translateY(-15px) rotate(1deg);
  //   box-shadow: inset 0 0 0 1px rgba(darken(app-color(bluegray), 20%), 1), 0 2px 3px rgba(black, 0.75);
  //   background: app-color(bluegray, light);

  //   .col-label {
  //     color: rgba(black, 0.95);
  //     text-shadow: none;
  //   }

  //   .btn-group {
  //     display: none;
  //   }
  // }

  // .ui-sortable-placeholder {
  //   visibility: visible !important;
  //   background: rgba(app-color(orange), 0.85) !important;
  //   box-shadow: inset 0 3px 10px rgba(black, 0.5);
  // }

  td,
  th {
    position: relative;
    padding-left: $cell-padd-horz;
    padding-right: $cell-padd-horz;
    border-color: $result-table-border-color-inner;
    border-width: 0 1px 1px 0;
    font-weight: normal;
  }

  tbody {
    tr {
      cursor: default;

      &:hover {
        background: #eee;
      }
    }

    td {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      border-width: 0 0 1px 0;
      font-size: 12px;
      line-height: 1.25;
    }

    .combo-td  {
      border-left-width: 1px;
      background-color: rgba(app-color(green, dark), 0.05);
    }

    td:last-child  {
      border-right: 1px solid $result-table-border-color-outer;
    }

    tr:last-child {

      td {
        border-bottom-color: $result-table-border-color-inner-dark;
      }

      td:last-child {
        border-color-right: $result-table-border-color-outer;
        border-color-bottom: $result-table-border-color-inner-dark;
      }
    }
  }


  td.is-sorted {
    background-color: rgba(app-color(bluegray), 0.2);
  }

  th.is-sorted {
    position: relative;
    border-color: rgba(darken(app-color(bluegray), 10%), 0.75);
    background-color: lighten(app-color(bluegray, dark), 42%);
    background-image: none;

    &:before {
      content: '';
      position: absolute;
      top: -1px;
      right: -1px;
      left: -1px;
      height: 1px;
      background: rgba(darken(app-color(bluegray), 10%), 0.4);
    }

    &:after {
      content: '';
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: -1px;
      width: 1px;
      background: rgba(darken(app-color(bluegray), 10%), 0.75);
    }
  }

  .col-label {
  position: relative;
  display: inline-block;
  padding: 5px 0px 5px 0;
  width: 100%;
  font-size: 10px;
  line-height: 18px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(white, 0.66);
  color: rgba(black, 0.5); // NOTE: might need to make this a solid color
  cursor: pointer;
  transition: color 0.2s;

  .is-sorted & {
    color: rgba(black, 0.66);
  }
}

// double class to give higher priority without using !important
.is-not-sortable.is-not-sortable {
  cursor: default;
}

.col-menu {
  position: absolute;
  text-align: right;
  right: 7px;
  top: 9px;
  opacity: 0;
  transition: opacity 0.2s;
  height: 1.5rem;
  width: 1.5rem;
}

.ico-col-sort {
  position: relative;
  display: inline-block;
  opacity: 0.45;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,0.66);
  transition: opacity 0.2s;

  i {
    display: inline-block;
    font-family: Verdana, sans-serif;
    font-size: 8px;
    line-height: 9px;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;

    &:nth-child(1) {
      position: absolute;
      top: 0;
      left: 0;
    }

    &:nth-child(2) {
      position: absolute;
      bottom: -1px;
      left: 0;
    }

    &:nth-child(3) {
      display: block;
      font-size: 12px;
      line-height: 18px;
      padding-left: 0.5em;
    }
  }
}


.tbl-msg {
  padding: 24px;
  font-size: 18px;
  text-align: center;
  color: #8a8a8a;

  p {
    margin: 0;
  }
}

.cell-list {
  margin-top: -0.35rem;
  margin-bottom: -0.3rem;
  font-size: 13px;

  small {
    font-size: 90%;
  }
}

// use ems for padding so that this becomes '0' when the element is scaled
.cell-list-item {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.cell-list-item--extended {
  border-top: 1px dotted rgba(black, 0.1);
  font-size: 0;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: font-size 0.3s, opacity 0.3s, transform 0.3s;

  .cell-list-items.show-all & {
    font-size: 13px;
    opacity: 1;
    transform: scaleY(1);
  }
}

.cell-list-expand-toggle {
  cursor: pointer;
}

.ico-col-sort {
  position: relative;
  display: inline-block;
  opacity: 0;
  color: rgba(black, 0.5);
  text-shadow: 0 1px 0 rgba(white, 0.66);
  transition: opacity 0.2s, color 0.2s;

  i {
    font-style: normal;
    font-size: 8px;
    font-weight: normal;
    font-family: Verdana, sans-serif;
  }

  i:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
  }

  i:nth-child(2) {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  i:nth-child(3) {
    font-size: 12px;
    padding-left: 0.5em;
  }
}

.is-sorted--asc .ico-col-sort--asc,
.is-sorted--desc .ico-col-sort--desc {
    opacity: 0.9;
  }
}