@import '../../../style/variables.scss';

$table-border--primary: $cf-grey-25;
$table-border--secondary: $cf-grey-15;
$table-row-background: $cf-grey-15;

/*
  Table
  ------------------------------------------------------------------------------
*/

.cf-table {
  border-collapse: collapse;
}

.cf-table--cell {
  color: $cf-grey-75;
  transition: background-color $cf-transition-default,
    color $cf-transition-default;
  font-weight: $cf-font-weight--medium;
}

.cf-table--header-cell {
  color: $cf-grey-55;
  font-weight: $cf-font-weight--bold;
  @extend %type-uppercase;
}

.cf-table--row {
  transition: background-color $cf-transition-default;
}

/*
  Borders Styling
  ------------------------------------------------------------------------------
*/

.cf-table__borders-none {
  .cf-table--cell,
  .cf-table--header-cell {
    border: 0;
  }
}

.cf-table__borders-all {
  .cf-table--cell,
  .cf-table--header-cell {
    border: $cf-border solid $table-border--primary;
  }
}

.cf-table__borders-horizontal {
  .cf-table--cell,
  .cf-table--header-cell {
    border-top: $cf-border solid $table-border--secondary;
    border-bottom: $cf-border solid $table-border--secondary;
  }

  .cf-table--header:first-child
    .cf-table--row:first-child
    .cf-table--header-cell {
    border-top: 0;
  }

  .cf-table--footer:last-child .cf-table--row:last-child .cf-table--cell,
  .cf-table--body:last-child .cf-table--row:last-child .cf-table--cell {
    border-bottom: 0;
  }
}

.cf-table__borders-vertical {
  .cf-table--cell,
  .cf-table--header-cell {
    border-left: $cf-border solid $table-border--secondary;
    border-right: $cf-border solid $table-border--secondary;
  }

  .cf-table--header .cf-table--row .cf-table--header-cell:first-child,
  .cf-table--header .cf-table--row .cf-table--cell:first-child,
  .cf-table--body .cf-table--row .cf-table--header-cell:first-child,
  .cf-table--body .cf-table--row .cf-table--cell:first-child,
  .cf-table--footer .cf-table--row .cf-table--header-cell:first-child,
  .cf-table--footer .cf-table--row .cf-table--cell:first-child {
    border-left: 0;
  }

  .cf-table--header .cf-table--row .cf-table--header-cell:last-child,
  .cf-table--header .cf-table--row .cf-table--cell:last-child,
  .cf-table--body .cf-table--row .cf-table--header-cell:last-child,
  .cf-table--body .cf-table--row .cf-table--cell:last-child,
  .cf-table--footer .cf-table--row .cf-table--header-cell:last-child,
  .cf-table--footer .cf-table--row .cf-table--cell:last-child {
    border-right: 0;
  }
}

.cf-table__borders-both {
  .cf-table--cell,
  .cf-table--header-cell {
    border: $cf-border solid $table-border--secondary;
  }

  .cf-table--header:first-child
    .cf-table--row:first-child
    .cf-table--header-cell {
    border-top: 0;
  }

  .cf-table--footer:last-child .cf-table--row:last-child .cf-table--cell,
  .cf-table--body:last-child .cf-table--row:last-child .cf-table--cell {
    border-bottom: 0;
  }

  .cf-table--header .cf-table--row .cf-table--header-cell:first-child,
  .cf-table--header .cf-table--row .cf-table--cell:first-child,
  .cf-table--body .cf-table--row .cf-table--header-cell:first-child,
  .cf-table--body .cf-table--row .cf-table--cell:first-child,
  .cf-table--footer .cf-table--row .cf-table--header-cell:first-child,
  .cf-table--footer .cf-table--row .cf-table--cell:first-child {
    border-left: 0;
  }

  .cf-table--header .cf-table--row .cf-table--header-cell:last-child,
  .cf-table--header .cf-table--row .cf-table--cell:last-child,
  .cf-table--body .cf-table--row .cf-table--header-cell:last-child,
  .cf-table--body .cf-table--row .cf-table--cell:last-child,
  .cf-table--footer .cf-table--row .cf-table--header-cell:last-child,
  .cf-table--footer .cf-table--row .cf-table--cell:last-child {
    border-right: 0;
  }
}

.cf-table .cf-table__borders-none th.cf-table--header-cell,
.cf-table th.cf-table--header-cell {
  border-bottom: $cf-border solid $table-border--primary;
}

/*
  Padding Modifiers
  ------------------------------------------------------------------------------
*/

@mixin tablePaddingModifier($padding) {
  .cf-table--cell,
  .cf-table--header-cell {
    padding: $padding;
  }
}

.cf-table__padding-xs {
  @include tablePaddingModifier($cf-space-2xs);
}
.cf-table__padding-sm {
  @include tablePaddingModifier($cf-space-xs);
}
.cf-table__padding-md {
  @include tablePaddingModifier($cf-space-s);
}
.cf-table__padding-lg {
  @include tablePaddingModifier($cf-space-m);
}

/*
  Font Size Modifiers
  ------------------------------------------------------------------------------
*/

@mixin tableFontModifier($fontSize) {
  .cf-table--cell,
  .cf-table--header-cell {
    font-size: $fontSize;
  }
}

.cf-table__font-xs {
  @include tableFontModifier($cf-text-base--1);
}
.cf-table__font-sm {
  @include tableFontModifier($cf-text-base-0);
}
.cf-table__font-md {
  @include tableFontModifier($cf-text-base-1);
}
.cf-table__font-lg {
  @include tableFontModifier($cf-text-base-2);
}

/*
  Striped Styling
  ------------------------------------------------------------------------------
*/

.cf-table__striped .cf-table--body .cf-table--row:nth-child(odd) {
  background-color: rgba($table-row-background, 0.7);
}

/*
  Highlight Styling
  ------------------------------------------------------------------------------
*/

.cf-table__highlight .cf-table--body .cf-table--row:hover {
  background-color: $table-row-background;
}

.cf-table__highlight .cf-table--body .cf-table--row:hover .cf-table--cell {
  color: $g17-whisper;
}

/*
  Row Color Modifiers
  ------------------------------------------------------------------------------
*/

@mixin tableColorModifier(
  $background,
  $backgroundAlt,
  $backgroundHover,
  $border,
  $text
) {
  .cf-table .cf-table--body & .cf-table--cell,
  .cf-table .cf-table--body & .cf-table--header-cell,
  .cf-table .cf-table--header & .cf-table--cell,
  .cf-table .cf-table--header & .cf-table--header-cell,
  .cf-table .cf-table--footer & .cf-table--cell,
  .cf-table .cf-table--footer & .cf-table--header-cell {
    background-color: $background;
    border-color: $border;
    color: rgba($text, 0.8);
  }

  .cf-table__striped .cf-table--body &:nth-child(odd) .cf-table--cell,
  .cf-table__striped .cf-table--body &:nth-child(odd) .cf-table--header-cell {
    background-color: $backgroundAlt;
  }

  .cf-table__highlight .cf-table--body &:hover .cf-table--cell,
  .cf-table__highlight .cf-table--body &:hover .cf-table--header-cell {
    background-color: $backgroundHover;
    color: $text;
  }
}

.cf-table--row__primary {
  @include tableColorModifier(
    $c-sapphire,
    mix($c-ocean, $c-sapphire, 50%),
    $c-ocean,
    $c-pool,
    $g20-white
  );
}
.cf-table--row__secondary {
  @include tableColorModifier(
    $c-void,
    mix($c-amethyst, $c-void, 50%),
    $c-amethyst,
    $c-star,
    $g20-white
  );
}
.cf-table--row__success {
  @include tableColorModifier(
    $c-emerald,
    mix($c-viridian, $c-emerald, 50%),
    $c-viridian,
    $c-rainforest,
    $g20-white
  );
}
.cf-table--row__warning {
  @include tableColorModifier(
    $c-tiger,
    mix($c-pineapple, $c-tiger, 50%),
    $c-pineapple,
    $c-thunder,
    $g3-castle
  );
}
.cf-table--row__danger {
  @include tableColorModifier(
    $c-ruby,
    mix($c-fire, $c-ruby, 50%),
    $c-fire,
    $c-dreamsicle,
    $g20-white
  );
}