@import "settings";

$selected-bg: $primary-op-max;

// *******************************************************************************
// HTML TABLE


table {
  width: 100%;
  background: transparent;
  border-collapse: collapse;

  * {
    text-align: center;
  }

  tr {
    background-color: $table-odd-color;

    th, td {
      padding: $padding-small 10px;
      border: $table-border-width solid $bg;
    }

    th {
      color: $accent;
      font-weight: bold;
    }

  }

  tr:nth-of-type(even) {
    background-color: $table-even-color;
  }

}

// *******************************************************************************
// FLEXTABLE

// BY COLUMN
.flextable {
  max-height: 100%;
  overflow: auto;
  padding-right: 4px;
  position: relative;
  width: 100%;

  &.striped {
    .row:nth-of-type(even) > div, .column > div:nth-of-type(even) {
      background-color: $table-even-color;
    }
  }

  &.left {
    .cell {
      text-align: left;
    }
    .mat-sort-header-container {
      justify-content: start;
    }
  }

  &.right {
    .cell {
      text-align: right;
    }
    .mat-sort-header-container {
      justify-content: end;
    }
    .mat-sort-header-arrow {
      left: -7px;
      right: auto;
    }
  }

  // common class to extend for header cells
  .cell-header-base {
    background-color: $bg;
    border-bottom-color: $table-even-color !important;
    color: $accent;
    font-weight: bold;
    overflow: initial;
    text-transform: lowercase;
    word-break: break-word;
  }

  // BY COLUMN
  &.by-column {
    display: flex;
    flex-flow: nowrap;
    height: 100%;

    .column {
      background-color: $bg;
      flex-grow: 1;
      height: fit-content;
      position: relative;

      &.now {
        border-color: $accent-op-max;
        border-style: solid;
        border-width: 0 2px;
      }

      // full column as header (usually first column in the table)
      &.header .cell {
        border-right-width: $table-border-width * 4;
        color: $accent;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: lowercase;
        white-space: nowrap;

        .mat-sort-header-content {
          display: block !important;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

      }

      .cell {
        min-width: initial;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;

        // header cell for in data columns (for same look as a table by row)
        &.column-header {
          @extend .cell-header-base;
        }
      }

      &.selected > div {
        background-color: $selected-bg !important;
      }

    }

  }

  // BY ROW
  &.by-row {
    height: 100%;

    .row {
      display: flex;
      width: 100% !important; // to make sure it is not overridden by generic row > div settings

      &.header .cell {
        @extend .cell-header-base;
      }

      &.selected > div {
        background-color: $selected-bg !important;
      }

    }

  }

  // CELLS
  .cell {
    background-color: $table-odd-color;
    border-color: $bg;
    border-radius: $border-radius;
    border-style: solid;
    border-width: $table-border-width;
    flex-grow: 1;
    min-height: 36px;
    min-width: 114px;
    overflow: hidden;
    padding: $padding-small;
    position: relative;
    text-align: center;
    width: 1%;
    word-break: break-word;

    // some classes for size forcing
    &.tiny {
      flex-grow: 0;
      min-width: 54px;
      width: 54px;
    }
    &.small {
      flex-grow: 0;
      min-width: 74px;
      width: 74px;
    }
    &.medium {
      width: 94px;
    }
    &.large {
      width: 114px;
    }
    &.xlarge {
      width: 144px;
    }

    // keep selected class on the cell as well, for free selection
    &.selected, .selected {
      background-color: $selected-bg !important;
      color: $color;
    }

    input {
      padding: 0;
    }

    .mat-icon {
      font-size: 18px !important;
      height: 18px !important;
      line-height: 18px !important;
      transform: rotate(0.03deg); // to fix icons being capped at smaller sizes
      width: 18px !important;
    }

    $col-resizer-height: 14px;
    .col-resizer {
      border-left: 1px solid $disabled;
      border-right: 1px solid $disabled;
      cursor: ew-resize;
      height: $col-resizer-height;
      right: 0;
      width: 4px;
      top: calc(50% - #{$col-resizer-height} / 2);
      position: absolute;
      transition: height .4s;
      z-index: 5;
    }

    .col-filter-icon, .col-sort-icon {
      background-color: $bg !important;
      border-radius: 50%;
      color: set-alpha('color', .2);
      display: flex;
      position: absolute;
      right: 4px;
    }

    .col-filter-icon {
      top: 2px;
    }

    .col-sort-icon {
      bottom: 2px;
    }

  }

  // TO TOP POP-UP
  &__to-top {
    background-color: $accent;
    color: $bg;
    bottom: 4px;
    padding: 2px;
    right: $padding-small;
    position: absolute;
  }

}

// MAKE SURE FIRST-H AND FIRST-Q IS ALSO AVAILABLE OUTSIDE FLEXTABLE
$first-margin: 5px;
$first-borderwidth: 2px;
.first-q {
  margin-left: $first-margin;
}

.first-h {
  margin-left: $first-margin * 2 !important;
  position: relative;

  &:before {
    background-color: $bg !important;
    color: $accent;
    content: attr(date) !important;
    font-family: $font-accent-family;
    font-size: 14px;
    height: fit-content !important;
    left: -$first-margin * 2 !important;
    padding: 0 $first-margin $first-margin $first-margin;
    position: absolute;
    text-align: right;
    text-orientation: sideways;
    top: 0;
    transform: rotate(180deg);
    white-space: nowrap;
    width: $first-margin * 2 !important;
    writing-mode: vertical-lr;
  }

  &:after {
    background-color: $table-even-color;
    content: '';
    height: 100%;
    left: -$first-margin - $first-borderwidth * 0.5 !important;
    position: absolute;
    top: 0;
    width: $first-borderwidth;
    z-index: -1;
  }

}