table.scss

@import "./new-settings";
@import "./mixins";

/*!
.fd-table(--compact, --condensed, --no-horizontal-borders, --no-vertical-borders)
    thead(.fd-table__header(--no-horizontal-borders, --no-vertical-borders))
    tbody(.fd-table__body(--no-horizontal-borders, --no-vertical-borders))
    tfoot(.fd-table__footer)
        tr(.fd-table__row)([aria-selected])
          td(.fd-table__cell(--status-indicator, --checkbox, --fit-content)) + semantic
*/
$block: #{$fd-namespace}-table;

.#{$block} {
  @mixin fd-table-active() {
    background-color: var(--sapList_Active_Background);
    color: var(--sapList_Active_TextColor);
    text-shadow: none;

    .#{$block}__cell {
      border-bottom-color: var(--sapList_SelectionBorderColor);
      text-shadow: none;

      @include fd-hover() {
        background-color: var(--sapList_Active_Background);
      }
    }

    .#{$block}__icon {
      @include fd-icon-selector() {
        color: var(--sapContent_ContrastIconColor);
      }
    }

    .#{$fd-namespace}-link,
    .#{$fd-namespace}-form-label,
    .#{$fd-namespace}-object-status {
      color: inherit;
    }
  }

  @mixin fd-trigger-element() {
    cursor: pointer;

    @include fd-active() {
      @include fd-table-active();

      &--focusable {
        @include fd-fiori-focus() {
          outline-color: var(--sapContent_ContrastFocusColor);
        }
      }
    }
  }

  @mixin fd-table-reset-spacing() {
    padding: 0;
    margin: 0;
  }

  // LOCAL VARS
  $fd-table-cell-padding: 0.5rem;
  $fd-table-first-cell-padding: 1rem;
  $fd-table-cozy-cell-height: 2.75rem;
  $fd-table-compact-cell-height: 2rem;
  $fd-table-navigation-icon-width: 2rem;
  $fd-table-condensed-cell-height: 1.5rem;

  // Thanks to table-cell specification, if the width is set to small value, the cell will have content width
  $fd-table-cell-fit-content-width: 0.5rem;

  $fd-table-basic-background: var(--sapList_Background);
  $fd-table-border: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
  $fd-table-fixed-cell-border: 0.125rem var(--sapList_TableFixedBorderColor) solid;

  // BLOCK BASE *******************************************
  // set all BLOCK reset and baseline styles
  &,
  &__cell,
  &__row,
  &__header,
  &__body,
  &__footer,
  &__text {
    @include fd-reset();
  }

  width: 100%;
  max-width: 100%;
  border-collapse: collapse;

  // Elements
  &__icon {
    @include fd-icon-element-base() {
      @include fd-flex-center();

      color: var(--sapContent_NonInteractiveIconColor);
      font-size: var(--sapFontSmallSize);
    }

    &--navigation {
      @include fd-icon-selector() {
        font-size: var(--sapFontSmallSize);
        width: $fd-table-navigation-icon-width;
        min-width: $fd-table-navigation-icon-width;
        height: 100%;
      }
    }
  }

  &__header {
    border-top: $fd-table-border;
    border-left: $fd-table-border;
    border-right: $fd-table-border;

    .#{$block}__row {
      border-bottom: $fd-table-border;
    }

    .#{$block}__cell {
      height: $fd-table-cozy-cell-height;
      background-color: var(--sapList_HeaderBackground);
      color: var(--sapList_HeaderTextColor);
    }
  }

  &__text {
    @include fd-ellipsis();

    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

    &--no-wrap {
      white-space: nowrap;
    }
  }

  &__cell {
    text-align: left;
    text-shadow: var(--sapContent_TextShadow);
    height: $fd-table-cozy-cell-height;
    padding: 0 $fd-table-cell-padding;
    color: inherit;
    border-right: $fd-table-border;

    &--valid {
      color: var(--sapSuccessColor);
    }

    &--warning {
      color: var(--sapWarningColor);
    }

    &--error {
      color: var(--sapErrorColor);
    }

    &--information {
      color: var(--sapInformationColor);
    }

    &--no-data {
      text-align: center;
    }

    &--checkbox {
      width: $fd-table-cell-fit-content-width;
      vertical-align: baseline;

      @include fd-table-reset-spacing();
    }

    &--fit-content {
      width: $fd-table-cell-fit-content-width;
      word-break: keep-all;
      white-space: nowrap;
    }

    &--no-padding {
      @include fd-table-reset-spacing();
    }

    &--status-indicator {
      width: 0.375rem;
      padding: 0;

      &--valid {
        background-color: var(--sapSuccessBorderColor);
      }

      &--warning {
        background-color: var(--sapWarningBorderColor);
      }

      &--error {
        background-color: var(--sapErrorBorderColor);
      }

      &--information {
        background-color: var(--sapInformationBorderColor);
      }
    }

    &--fixed {
      left: 0;
      position: absolute;
      background-color: $fd-table-basic-background;
      border-bottom: $fd-table-border;

      @include fd-flex-vertical-center();

      @include fd-hover() {
        background-color: var(--sapList_Hover_Background);
      }

      &:last-of-type {
        border-right: $fd-table-fixed-cell-border;
      }

      @include fd-rtl() {
        left: auto;
        right: 0;

        &:last-of-type {
          border-right: none;
          border-left: $fd-table-fixed-cell-border;
        }
      }
    }

    @include fd-first-child() {
      padding-left: $fd-table-first-cell-padding;

      &.#{$block}__cell--checkbox,
      &.#{$block}__cell--status-indicator {
        padding: 0;
      }

      @include fd-rtl() {
        padding-left: $fd-table-cell-padding;
        padding-right: $fd-table-first-cell-padding;

        &.#{$block}__cell--checkbox,
        &.#{$block}__cell--status-indicator {
          padding: 0;
        }
      }
    }

    &--navigated {
      box-shadow: inset -0.1875rem 0 var(--sapSelectedColor);

      @include fd-rtl() {
        box-shadow: inset 0.1875rem 0 var(--sapSelectedColor);
      }
    }
  }

  &__body {
    border-left: $fd-table-border;
    border-right: $fd-table-border;
    border-bottom: $fd-table-border;

    .#{$block}__cell {
      border-bottom: $fd-table-border;

      &--no-vertical-border {
        border-bottom-color: transparent;
      }

      &--no-horizontal-border {
        border-right-color: transparent;
      }
    }

    .#{$block}__row {
      border-left: none;
      border-right: none;
      background-color: $fd-table-basic-background;

      @include fd-selected() {
        background-color: var(--sapList_SelectionBackgroundColor);

        .#{$block}__cell {
          border-bottom-color: var(--sapList_SelectionBorderColor);
        }

        @include fd-hover() {
          background-color: var(--sapList_Hover_SelectionBackground);
        }
      }

      &--activable {
        @include fd-selected() {
          @include fd-active() {
            background-color: var(--sapList_Active_Background);
          }
        }
      }
    }
  }

  &__cell,
  &__row {
    &--hoverable {
      @include fd-selected() {
        .#{$block}__cell {
          @include fd-hover() {
            background-color: var(--sapList_Hover_SelectionBackground);
          }
        }
      }
      &,
      .#{$block}__cell {
        @include fd-hover() {
          background-color: var(--sapList_Hover_Background);
          color: var(--fdTable_Hover_Down_Color);
        }
      }
    }

    &--activable {
      @include fd-active() {
        * {
          color: var(--sapList_Active_TextColor) !important;
        }
      }

      @include fd-trigger-element();

      @include fd-selected() {
        @include fd-trigger-element();
      }
    }

    &--focusable {
      @include fd-fiori-focus();
    }
  }

  &__footer {
    background-color: var(--sapList_FooterBackground);
    .#{$block}__row {
      border-top: 0.125rem solid var(--sapList_TableFooterBorder);
      vertical-align: middle;
    }

    .#{$block}__cell {
      font-weight: bold;
      border-right: none;
    }
  }

  &__inner {
    @include fd-reset();

    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  &__caption {
    @include fd-screen-reader-only();
  }

  &__popover.#{$fd-namespace}-popover {
    height: 100%;
    display: block;
    color: inherit;

    .#{$fd-namespace}-popover__control {
      width: 100%;
      height: 100%;
      color: inherit;

      @include fd-flex-vertical-center();
    }
  }

  // Modifiers
  &--fixed {
    overflow-x: scroll;
  }

  &--pop-in {
    .#{$block}__text {
      color: inherit;
      margin-bottom: 0.5rem;

      &--title {
        font-weight: bold;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .#{$block}__cell {
      &--checkbox {
        + .#{$block}__cell {
          padding-left: 0;

          @include fd-rtl() {
            padding-right: 0;
            padding-left: $fd-table-cell-padding;
          }
        }
      }
    }

    .#{$block}__body {
      .#{$block}__cell {
        height: auto;
      }
    }

    .#{$block}__row {
      .#{$block}__cell {
        @include fd-last-child() {
          border-right: $fd-table-border;

          @include fd-rtl() {
            border-left: $fd-table-border;
            border-right: none;
          }
        }
      }
    }

    .#{$block}__row--main {
      border: none;

      .#{$block}__cell {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
      }

      &.#{$block}__row--hoverable {
        @include fd-hover() {
          + .#{$block}__row--secondary {
            background-color: var(--sapList_Hover_Background);
          }
        }
      }

      &.#{$block}__row--activable:not(:hover) {
        @include fd-active() {
          + .#{$block}__row--secondary {
            @include fd-table-active();
          }
        }
      }

      @include fd-selected() {
        @include fd-hover() {
          + .#{$block}__row--secondary {
            background-color: var(--sapList_Hover_SelectionBackground);
          }
        }
      }
    }

    .#{$block}__row--secondary {
      background-color: $fd-table-basic-background;
      border-bottom: $fd-table-border;

      @include fd-hover() {
        background-color: $fd-table-basic-background;
      }

      .#{$block}__cell {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }

      @include fd-selected() {
        .#{$block}__cell {
          border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
        }

        @include fd-hover() {
          background-color: var(--sapList_SelectionBackgroundColor);
        }
      }
    }
  }

  &,
  &__body,
  &__header {
    &--no-vertical-borders {
      .#{$block}__row {
        .#{$block}__cell {
          border-bottom: none;
        }
      }
    }

    &--no-horizontal-borders {
      .#{$block}__row {
        .#{$block}__cell {
          border-right: none;
        }
      }
    }
  }

  &--responsive {
    .#{$block}__body,
    .#{$block}__header {
      border: none;
    }

    .#{$block}__row {
      @include fd-last-child() {
        .#{$block}__cell {
          border-bottom: none;
        }
      }
    }
  }

  &--compact {
    .#{$block}__cell {
      height: $fd-table-compact-cell-height;
    }
  }

  &--condensed {
    .#{$block}__cell {
      height: $fd-table-condensed-cell-height;

      .fd-checkbox {
        @include fd-focus() {
          + .fd-checkbox__label:empty {
            &::after {
              top: 0.125rem;
              bottom: 0.125rem;
            }
          }
        }
      }

      .fd-checkbox + .fd-checkbox__label:empty {
        padding-bottom: 0.25rem;
        padding-top: 0.25rem;
      }
    }

    .#{$block}__header {
      .#{$block}__cell {
        height: $fd-table-compact-cell-height;
      }
    }
  }

  @include fd-rtl() {
    .#{$block}__cell {
      text-align: right;
    }
  }
}