@import "../settings/variables";
@import "../tools/icons";
@import "../tools/typography";

.table {
  $th: "#{&}__th";
  $root: &;

  &--with-shelf {
    position: relative;
    height: 100%;
  }

  &__table {
    background-color: $table-background-color;
    border-collapse: collapse;
    border-radius: $table-border-radius;
    font-size: $table-font-size;
    line-height: $table-line-height;
    letter-spacing: $table-letter-spacing;
    width: 100%;

    &--fixed-layout {
      table-layout: fixed;
    }

    &--inline {
      border-top: 1px solid $core-gray-85;
      border-bottom: 1px solid $core-gray-85;
    }
  }

  &__head {
    background-color: $table-header-background-color;
    transition: background-color 0.2s ease-in-out;

    &:hover {
      #{$th} {
        .table__th__icon--sortable-asc,
        .table__th__icon--sortable-desc,
        &::after,
        &::before {
          opacity: 1;
        }
      }
    }
  }

  &__group-row {
    background-color: $table-group-row-background-color;
    border-top: $table-group-row-border-top;

    &__content {
      margin-left: spacing(lg);
      padding: spacing(lg) 0;
      display: flex;
      flex-direction: row;
    }

    &__header {
      display: flex;
      align-items: center;
    }

    &__title {
      font-weight: $table-header-font-weight;
      padding-left: 16px;
    }
  }

  &__carat {
    font-size: 16px;
    color: $core-gray-70;
    padding-right: spacing(xs);
    transition: all 0.2s ease-in-out;

    &--expanded {
      transform: rotate(90deg);
    }
  }

  &__carat + &__checkbox {
    margin: 0 spacing(xs);
  }

  td:first-child &__checkbox {
    padding-left: spacing(lg);
  }

  &__group-row &__carat + &__checkbox {
    margin-left: spacing(xs);
    padding-left: 0;
  }

  &__group-row + &__group-row {
    > td {
      padding-left: 1 * $table-group-header-row-indentation;
    }
  }

  &__group-row + &__group-row + &__group-row {
    > td {
      padding-left: 2 * $table-group-header-row-indentation;
    }
  }

  &__group-row + &__group-row + &__group-row + &__group-row {
    > td {
      padding-left: 3 * $table-group-header-row-indentation;
    }
  }

  &__group-row + &__group-row + &__group-row + &__group-row + &__group-row {
    > td {
      padding-left: 4 * $table-group-header-row-indentation;
    }
  }

  &__group-row ~ &__body-row &__checkbox {
    padding-left: 0;
    margin: 0 spacing(xs);
  }

  &__group-row ~ &__body-row {
    > td:first-child {
      padding-left: 1 * $table-group-header-row-indentation +
        $table-group-body-row-indentation;
    }
  }

  &__group-row + &__group-row ~ &__body-row {
    > td:first-child {
      padding-left: 2 * $table-group-header-row-indentation +
        $table-group-body-row-indentation;
    }
  }

  &__group-row + &__group-row + &__group-row ~ &__body-row {
    > td:first-child {
      padding-left: 3 * $table-group-header-row-indentation +
        $table-group-body-row-indentation;
    }
  }

  &__group-row + &__group-row + &__group-row + &__group-row ~ &__body-row {
    > td:first-child {
      padding-left: 4 * $table-group-header-row-indentation +
        $table-group-body-row-indentation;
    }
  }

  &__group-row
    + &__group-row
    + &__group-row
    + &__group-row
    + &__group-row
    ~ &__body-row {
    > td:first-child {
      padding-left: 5 * $table-group-header-row-indentation +
        $table-group-body-row-indentation;
    }
  }

  &__group-depth-0 {
    > td {
      padding-left: 0 * $table-group-header-row-indentation !important;
    }
  }

  &__group-depth-1 {
    > td {
      padding-left: 1 * $table-group-header-row-indentation !important;
    }
  }

  &__group-depth-2 {
    > td {
      padding-left: 2 * $table-group-header-row-indentation !important;
    }
  }

  &__group-depth-3 {
    > td {
      padding-left: 3 * $table-group-header-row-indentation !important;
    }
  }

  &__group-depth-4 {
    > td {
      padding-left: 4 * $table-group-header-row-indentation !important;
    }
  }

  &__group-depth-0 ~ &__body-row {
    > td:first-child {
      padding-left: 1 * $table-group-header-row-indentation +
        $table-group-body-row-indentation !important;
    }
  }

  &__group-depth-1 ~ &__body-row {
    > td:first-child {
      padding-left: 2 * $table-group-header-row-indentation +
        $table-group-body-row-indentation !important;
    }
  }

  &__group-depth-2 ~ &__body-row {
    > td:first-child {
      padding-left: 3 * $table-group-header-row-indentation +
        $table-group-body-row-indentation !important;
    }
  }

  &__group-depth-3 ~ &__body-row {
    > td:first-child {
      padding-left: 4 * $table-group-header-row-indentation +
        $table-group-body-row-indentation !important;
    }
  }

  &__group-depth-4 ~ &__body-row {
    > td:first-child {
      padding-left: 5 * $table-group-header-row-indentation +
        $table-group-body-row-indentation !important;
    }
  }

  &__th {
    $label: "#{&}__label";

    border-right: $table-header-border-right;
    color: $table-header-font-color;
    font-size: $table-header-font-size;
    font-weight: $table-header-font-weight;
    height: $table-header-height;
    letter-spacing: $table-header-letter-spacing;
    line-height: $table-header-line-height;
    padding: $table-header-padding;
    position: relative;
    text-align: left;
    transition: background-color 0.2s ease-in-out;

    &:last-child {
      border-right: 0;
    }

    &__container {
      display: flex;
      align-items: center;
    }

    &__container &__label {
      min-height: 14px;
    }

    &__label {
      display: inline-block;
      flex: 1 1 auto;
      position: relative;
    }

    &--sortable {
      cursor: pointer;
      padding: spacing(lg) 40px spacing(lg) spacing(lg);

      &::after,
      &::before {
        @include ci();
        color: $table-sort-font-color;
        font-size: 16px;
        opacity: 0;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.15s ease-in-out;
      }

      &::before {
        content: "\e91a";
      }

      &::after {
        content: "\e91b";
      }

      &:hover {
        background-color: $table-header-background-color--hover;

        &::before,
        .table__th__icon--sortable-asc {
          color: $table-sort-font-color--hover;
        }
      }
    }

    &--sortable-react {
      cursor: pointer;
      padding: spacing(lg);

      .table__th__icon--sortable-asc,
      .table__th__icon--sortable-desc {
        color: $table-sort-font-color;
        opacity: 0;
        transition: all 0.15s ease-in-out;
        position: absolute;
      }

      ::before,
      ::after {
        font-size: 16px;
      }

      &:hover {
        background-color: $table-header-background-color--hover;

        .table__th__icon--sortable-asc {
          color: $table-sort-font-color--hover;
        }
      }
    }

    &__icon {
      font-size: $table-line-height;
      height: $table-line-height;
      line-height: $table-line-height;
      padding: 0 spacing(lg) 0 spacing(sm);
      width: $table-line-height;
    }

    &--sortable-asc,
    &--sortable-desc {
      background-color: $table-header-background-color--active;
      color: $table-header-font-color--active;

      &::before,
      &::after,
      .table__th__icon--sortable-asc,
      .table__th__icon--sortable-desc {
        opacity: 1;
      }
    }

    &--sortable-asc {
      .table__th__icon--sortable-asc,
      &::before {
        color: $table-sort-font-color--active;
      }

      &:hover {
        .table__th__icon--sortable-asc,
        &::before {
          color: $table-sort-font-color--active;
        }
        .table__th__icon--sortable-desc,
        &::after {
          color: $table-sort-font-color--hover;
        }
      }
    }

    &--sortable-desc {
      .table__th__icon--sortable-desc,
      &::after {
        color: $table-sort-font-color--active;
      }
      &:hover {
        .table__th__icon--sortable-asc,
        &::before {
          color: $table-sort-font-color--hover;
        }
        .table__th__icon--sortable-desc,
        &::after {
          color: $table-sort-font-color--active;
        }
      }
    }

    &--snugfit {
      width: 0.1%;
    }
  }

  &__body-row {
    border-top: 1px solid $core-gray-85;

    &--overdue {
      .table__text-cell,
      .table__select-cell,
      .table__input-cell,
      .table__date-input-cell,
      .table__textarea-cell {
        color: $core-red-50;
      }
    }

    &:focus-within {
      .table__inline-edit__container {
        background-color: $table-cell-input-row-hover-background-color;

        &--disabled {
          background-color: transparent;
        }
      }

      .table__inline-edit__container--error {
        background-color: $table-cell-input-error-background-color;
      }
    }

    &:hover {
      // Deprecated table-cells body row hover styles
      .table-cell-input,
      .table-cell-textarea {
        background-color: $table-cell-input-row-hover-background-color;
        cursor: pointer;

        &:hover {
          background-color: $table-cell-input-hover-background-color;
          cursor: pointer;
        }

        &:focus {
          background-color: $table-cell-input-focus-background-color;
          border: $table-cell-input-focus-border;
          box-shadow: $input-focus-box-shadow;
          cursor: text;
          outline: none;
        }
        &--error {
          border: $table-cell-input-error-border;
          background-color: $table-cell-input-error-background-color;
        }
      }

      .table__inline-edit__container {
        background-color: $table-cell-input-row-hover-background-color;
        cursor: pointer;

        &:hover {
          background-color: $table-cell-input-hover-background-color;
        }

        &--disabled,
        &--disabled:hover {
          background-color: transparent;
          cursor: default;
        }
      }

      .table__inline-edit__container--error {
        background-color: $table-cell-input-error-background-color;

        &:hover {
          background-color: $table-cell-input-error-background-color;
        }

        .table__input-cell,
        .table__select-cell,
        .table__textarea-cell {
          border: $table-cell-input-error-border;
          border-bottom: none;

          &:hover {
            border-bottom: none;
          }

          &:focus {
            border: $table-cell-input-focus-border;
            border-bottom: none;
          }
        }
      }
    }
  }

  &__inline-edit__error-box {
    @include xs-regular-italic--white;
    background: $core-red-50;
    border-radius: 0 2px 2px 2px;
    box-shadow: shadow(20);
    padding: 6px spacing(md);
    position: absolute;
    max-width: 160px;
    z-index: 1;

    &--xs {
      min-width: 36px;
    }
    &--sm {
      min-width: 48px;
    }
    &--md {
      min-width: 80px;
    }
    &--lg {
      min-width: 112px;
    }
  }

  &__inline-edit__container {
    background-color: $table-background-color;
    margin: spacing(sm) spacing(xs);
    position: relative;

    &--error {
      position: static;
      background-color: $table-cell-input-error-background-color;

      .table__date-input-cell,
      .table__input-cell,
      .table__select-cell,
      .table__textarea-cell {
        border: $table-cell-input-error-border;
        border-radius: 4px 4px 0 0;
        border-bottom: none;

        &:hover {
          border-bottom: none;
        }

        &:focus {
          background-color: $table-cell-input-focus-background-color;
          border: $table-cell-input-focus-border;
          border-bottom: none;
        }
      }
    }

    &--xs {
      width: 36px;
    }
    &--sm {
      width: 48px;
    }
    &--md {
      width: 80px;
    }
    &--lg {
      width: 112px;
    }

    &--block {
      position: relative;

      .table__inline-edit__error-box {
        width: 100%;
        max-width: 100%;
      }
    }
  }

  &__loading__container {
    cursor: default;
    align-items: center;
    background: $core-gray-96;
    display: flex;
    height: 100%;
    justify-content: center;
    opacity: 0.9;
    position: absolute;
    width: 100%;
    z-index: 2;
  }

  &__grab-icon {
    color: $core-gray-45;
    cursor: move;
    cursor: -webkit-grab;
    font-size: 16px;
    left: 20px;
    position: absolute;
    top: 50%;
    margin-top: -8px;

    &:active,
    &--active {
      color: $core-gray-15;
      cursor: move;
      cursor: -webkit-grabbing;
    }

    &:focus,
    &--focus {
      border: 0;
      color: $core-gray-15;
      outline: none;
    }

    &:hover,
    &--hover {
      color: $core-gray-15;
    }
  }

  &__td {
    position: relative;
    vertical-align: middle;

    &--snugfit {
      white-space: nowrap;
      width: 0.1%;
    }
  }

  &__text-cell {
    margin: spacing(lg);
    display: flex;
    color: $table-cell-text-color;

    &--percent {
      justify-content: flex-end;
    }

    &--currency {
      justify-content: flex-end;
    }
  }

  &__icon-cell {
    display: flex;
    color: $table-cell-icon-color;
  }

  &__input-cell,
  &__select-cell,
  &__textarea-cell,
  &__input-cell.table__input-cell,
  &__select-cell.table__select-cell,
  &__textarea-cell.table__textarea-cell {
    // Define particular color, simply not to rely on browser's choice of transparent value
    // https://stackoverflow.com/questions/46309641/what-happens-in-safari-with-the-transparent-color
    background-color: rgba(255, 255, 255, 0);
    border: $table-cell-input-border;
    border-radius: $input-textarea-border-radius;
    width: 100%;

    &::placeholder {
      color: $table-cell-input-placeholder-color;
    }

    &::-ms-clear {
      display: none;
    }

    &:hover {
      border-color: transparent;
    }

    &:focus {
      /**
        focus background overrides everything, so it is the only cell-defined background style.
        the rest come from inline-edit__container
      */
      background-color: $core-white;
      border-style: solid;
      border-width: 1px;
      border-color: $core-blue-40;
      box-shadow: 0 0 0 1px $core-blue-40;
      outline: none;
    }

    &:disabled {
      border: $table-cell-input-border;
      color: $input-disabled-text-color;
    }
  }

  &__select-cell-ie11-flexbug {
    display: flex;
    flex-direction: column;
  }

  &__textarea-cell {
    // Increase specificity to override textarea's styling
    &#{$root}__textarea-cell {
      height: spacing(xxl);
      min-height: spacing(xxl);
      overflow: hidden;
      padding-top: spacing(xs);
      resize: none;
      width: 100%;

      &--resizable {
        &:focus {
          min-height: $input-textarea-height;
          overflow: auto;
          resize: vertical;
        }
      }
    }
  }
}