.csvtotable {
  &__table {
    width: 100%;
  }

  // --------------------------------------------------
  // Stacked table common styles
  // --------------------------------------------------
  // All cells are set to block model below medium breakpoint
  &__table.is-stacked &__head-cell,
  &__table.is-stacked &__body-cell {
    @media (max-width: @device-width-medium) {
      display: block;
    }
  }

  // Hide thead header row when below medium breakpoint
  &__table.is-stacked &__head-row {
    @media (max-width: @device-width-medium) {
      .u-display-none;
    }
  }

  // Hide tbody header row when above medium breakpoint
  &__table.is-stacked &__body-row.is-header {
    @media (min-width: @device-width-medium) {
      .u-display-none;
    }
  }

  // Add margin between stacked data sets
  // &__table.is-stacked &__body-row:not(.is-header) &__body-cell:last-child {
  //   margin-bottom: @item-margin;
  // }
  // --------------------------------------------------

  // --------------------------------------------------
  // Stacked table one column styles
  // --------------------------------------------------
  // Always hide span header text
  &__table.is-one-column &__body-cell-span {
    .u-display-none;
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Stacked table two column styles
  // --------------------------------------------------
  // Always hide tbody header row
  &__table.is-two-columns &__body-row.is-header {
    .u-display-none;
  }

  // Styling for two column table cells below medium breakpoint
  &__table.is-two-columns &__body-cell {
    @media (max-width: @device-width-medium) {
      position: relative;
      min-width: 100%;
      width: 100%;
      max-width: 100%;
      display: block;
      padding-left: 12.5rem;
      text-align: left;

      .dir-rtl & {
        text-align: right;
      }
    }
  }

  // Hide span header text above medium breakpoint
  &__table.is-two-columns &__body-cell-span {
    @media (min-width: @device-width-medium) {
      .u-display-none;
    }
  }

  // Styling for span header text below medium breakpoint
  &__table.is-two-columns &__body-cell-span {
    @media (max-width: @device-width-medium) {
      position: absolute;
      top: @item-padding / 2;
      left: @item-padding / 2;
      display: block;
      width: 11rem;
      white-space: nowrap;
      overflow: hidden;

      .dir-rtl & {
        left: auto;
        right: @item-padding / 2;
      }
    }
  }
  // --------------------------------------------------

  // --------------------------------------------------
  // Table cell alignment above medium breakpoint
  // use 'align-table-left' at component level to change all cell alignment
  // use 'align-left' in csv json to change individual cell alignment
  // --------------------------------------------------
  @media (min-width: @device-width-medium) {
    .component.align-table-left &__table,
    &__table .align-left {
      text-align: left;

      .dir-rtl & {
        text-align: right;
      }
    }

    .component.align-table-center &__table,
    &__table .align-center {
      text-align: center;
    }

    .component.align-table-right &__table,
    &__table .align-right {
      text-align: right;

      .dir-rtl & {
        text-align: left;
      }
    }
  }
  // --------------------------------------------------
}

// --------------------------------------------------
// Loop mixin
// --------------------------------------------------
.grid-loop(@columns, @total: @columns) when (@columns > 0) {
  // loop output
  .csvtotable__table[data-col-count="@{columns}"].retain-desktop-view .csvtotable__head-cell,
  .csvtotable__table[data-col-count="@{columns}"].retain-desktop-view .csvtotable__body-cell {
      width: 100% / @columns;
  }

  .csvtotable__table[data-col-count="@{columns}"].is-stacked .csvtotable__head-cell,
  .csvtotable__table[data-col-count="@{columns}"].is-stacked .csvtotable__body-cell {
    @media (min-width: @device-width-medium) {
      width: 100% / @columns;
    }
  }

  // recursive call
  .grid-loop(@columns - 1, @total);
}

// apply the mixin, for 10 columns
.grid-loop(10);
// --------------------------------------------------

// --------------------------------------------------
// --------------------------------------------------
// THEME
// --------------------------------------------------
// --------------------------------------------------
.csvtotable {
  &__table {
    position: relative;

    @media (max-width: @device-width-medium) {
      text-align: left;

      .dir-rtl & {
        text-align: right;
      }
    }
  }

  // --------------------------------------------------
  // tbody zebra strips
  // --------------------------------------------------
  &__table:not(.retain-desktop-view) &__body-row:nth-child(4n-6) &__body-cell:not(.is-th) {
    background-color: darken(@white, 5%);
  }

  &__table:not(.retain-desktop-view) &__body-row:nth-child(4n-4) &__body-cell:not(.is-th) {
    background-color: darken(@white, 10%);
  }

  &__table.retain-desktop-view &__body-row:nth-child(odd) &__body-cell {
    background-color: darken(@white, 5%);
  }

  &__table.retain-desktop-view &__body-row:nth-child(even) &__body-cell {
    background-color: darken(@white, 10%);
  }
  // --------------------------------------------------

  // Cell padding
  &__head-cell,
  &__body-cell {
    padding: @item-padding / 2;
  }

  // thead and tbody header row cell theme
  &__head-row &__head-cell.is-th,
  &__body-row.is-header &__body-cell.is-th {
    background-color: @item-color-hover;
    color: @item-color-inverted-hover;
  }

  // tbody body row header cell theme
  &__body-row.is-body &__body-cell.is-th {
    @media (min-width: @device-width-medium) {
      background-color: @item-color;
      color: @item-color-inverted;
    }
  }

  //

  // --------------------------------------------------
  // Stacked table two column styles
  // --------------------------------------------------
  // Two column table cells theme below medium breakpoint
  &__table.is-two-columns &__body-cell {
    @media (max-width: @device-width-medium) {
      box-shadow: inset 12rem 0 0 0 @item-color;
    }
  }

  // Two column header span text theme below medium breakpoint
  &__table.is-two-columns &__body-cell-span {
    @media (max-width: @device-width-medium) {
      color: @item-color-inverted;
    }
  }
}
