////
/// @group table
////

/// Default color for table background.
/// @type Color
$table-background: $white  !default;

/// Default scale for darkening the striped table rows and the table border.
/// @type Number
$table-color-scale: 5% !default;

/// Default style for table border.
/// @type List
$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;

/// Default padding for table.
/// @type Number
$table-padding: rem-calc(8 10 10) !default;

/// Default scale for darkening the table rows on hover.
/// @type Number
$table-hover-scale: 2% !default;

/// Default color of standard rows on hover.
/// @type List
$table-row-hover: darken($table-background, $table-hover-scale) !default;

/// Default color of striped rows on hover.
/// @type List
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;

/// Default background color for striped rows.
/// @type Color
$table-striped-background: smart-scale($table-background, $table-color-scale) !default;

/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
/// @type Keyword
$table-stripe: even !default;

/// Default color for header background.
/// @type Color
$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;

/// Default color of header rows on hover.
/// @type List
$table-head-row-hover: $white;//darken($table-head-background, $table-hover-scale) !default;

/// Default color for footer background.
/// @type Color
$table-foot-background: smart-scale($table-background, $table-color-scale) !default;

/// Default color of footer rows on hover.
/// @type List
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;

/// Default font color for header.
/// @type Color
$table-head-font-color: $body-font-color !default;

/// Default font color for footer.
/// @type Color
$table-foot-font-color: $body-font-color !default;

/// Default value for showing the header when using stacked tables.
/// @type Boolean
$show-header-for-stacked: false !default;

@mixin -zf-table-children-styles($stripe: $table-stripe) {
  .thead,
  .tbody,
  .tfoot {
    border: $table-border;
    background-color: $table-background;
  }

  // Caption
  .caption {
    font-weight: $global-weight-bold;
    padding: $table-padding;
  }
  
  // Table head
  .thead {
    background: $table-head-background;
    color: $table-head-font-color;
  }

  // Table foot
  .tfoot {
    background: $table-foot-background;
    color: $table-foot-font-color;
  }

  // Table head and foot
  .thead,
  .tfoot {
    // Rows within head and foot
    .tr {
      background: transparent;
    }

    // Cells within head and foot
    .th,
    .td {
      padding: $table-padding;
      font-weight: $global-weight-bold;
      text-align: #{$global-left};
    }
  }

  // Table rows
  &:not(.unstriped) {
  	.tbody {
  		.tr {
  			// If stripe is set to even, darken the even rows.
	      @if $stripe == even {
	        &:nth-child(even) {
	          background-color: $table-striped-background;
	        }
	      }

	      // If stripe is set to odd, darken the odd rows.
	      @else if $stripe == odd {
	        &:nth-child(odd) {
	          background-color: $table-striped-background;
	        }
	      }
  		}
  	}
  }
  .tbody {
  	.tr {
  		border: $global-border-secondary;
  	}
    .th,
    .td {
      padding: $table-padding;
    }
  }
}

@mixin table(
  $stripe: $table-stripe,
  $nest: false
) {
  width: 100%;
  margin-bottom: $global-margin;
  border-radius: $global-radius;

  @if $nest {
    @include -zf-table-children-styles($stripe);
  }
  @else {
    @at-root {
      @include -zf-table-children-styles($stripe);
    }
  }
}

/// Adds styles for a stacked table. Useful for small-screen layouts.
/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.
@mixin table-stack($header: $show-header-for-stacked) {
  @if $header {
    .thead {
      .th:first-child {
        display: block;
      }

      .th {
        display: none;
      }
    }
  }
  @else {
    .thead {
      display: none;
    }
  }

  .tfoot {
    // display: none;
  }

  .tr,
  .th,
  .td {
    display: flex;
    justify-content: space-between;
    flex: 0 0 auto;
    flex-wrap: wrap;
  }

  .td {
    border-top: 0;
  }
}

/// Slightly darkens the table rows on hover.
@mixin table-hover {
  .thead .tr {
    //Darkens the table header rows on hover.
    &:hover {
      background-color: $table-head-row-hover;
    }
  }

  .tfoot .tr {
    //Darkens the table footer rows on hover.
    &:hover {
      background-color: $table-foot-row-hover;
    }
  }

  .tbody .tr {
    //Darkens the non-striped table rows on hover.
    &:hover {
      background-color: $table-row-hover;
      color: $body-font-color;
    }

    //Darkens the even striped table rows.
    &:not(.unstriped) {
	    @if($table-stripe == even) {
	      &:nth-of-type(even):hover {
	        background-color: $table-row-stripe-hover;
	      }
	    }

	    //Darkens the odd striped table rows.
	    @elseif($table-stripe == odd) {
	      &:nth-of-type(odd):hover {
	        background-color: $table-row-stripe-hover;
	      }
	    }
	}
  }
}

@mixin sulo-table() {
	.table {
		display: table;
		border-collapse: collapse;
	}
	.thead {
		display: table-header-group;
	}
	.tbody {
		display: table-row-group;
	}
	.tfoot {
		display: table-footer-group;
	}
	.tr {
		display: table-row;
    transition: background .25s ease-in-out;
	}
	.td, .th {
		display: table-cell;
		vertical-align: middle;
		// &span {
			// @include wrap-text;
		// }
	}
	.table {
		@include table($nest: false);
	}

	.table.stack {
		@include breakpoint(medium down) {
			@include table-stack;
		}
	}

	.table.scroll {
		@include table-scroll;
	}

	.table.hover {
		@include table-hover;
	}

	.table-scroll {
		overflow-x: auto;

		.table {
			width: auto;
		}
	}
}

// .table {
// 	width: 100%;
// 	border-collapse: collapse;
// 	display: table;
// 	$font-color: map-get($foundation-palette, action);
// 	.tr {
// 		border: $global-border-secondary;
// 		display: flex;
// 		flex: 1;
// 		flex-wrap: wrap;
// 		justify-content: space-between;
// 		background: $table-background;
// 		border-left: none;
// 		border-right: none;

// 		@include breakpoint(medium) {
// 			display: table-row;
// 		}
// 		.th, .td {
// 			padding: $table-padding;
// 			@include breakpoint(medium) {
// 				display: table-cell;
// 			}
// 		}

// 	}
// 	.thead {
// 		display: none;
// 		font-weight: $global-weight-bold;
// 		font-size: 90%;
// 		color: $table-head-font-color;
// 		.tr {		
// 			background: $table-head-background;
// 			border-top: $global-border;
// 		}
// 		@include breakpoint(medium) {
// 			display: table-header-group;
// 		}
// 	}
// 	.tbody {
// 		display: table-row-group;
// 		border-top: $global-border;
// 		// .tr {
// 		// 	&:hover {
// 		// 		background: $table-row-hover;
// 		// 	}
// 		// 	&:nth-child(odd) {
// 		// 		background: $table-striped-background;
// 		// 		&:hover {
// 		// 			background: $table-row-stripe-hover;
// 		// 		}
// 		// 	}
// 		// }
// 		.td {
// 			vertical-align: middle;
// 			.photo-container {
// 				min-width: 1rem;
// 			}
// 		}
// 	}
// 	.tfoot {
// 		display: table-footer-group;
// 		.tr {
// 			background: $table-foot-background;
// 		}
// 	}
// }