@import "../../styles/settings/settings.colors";
@import "../../styles/tools/tools.all";

mat-table.mat-table {
  $icon-background-size: 1.875rem;
  $icon-hover-color: $north;
  $table-background-color: $white;
  $table-border-width: 0.063rem;
  $table-bottom-padding: 0;
  $table-hover-color: $distance;
  $table-left-right-padding: 0;
  $table-row-height: 2.5rem;
  $table-top-padding: 0;
  $table-border-bottom: $vertical-spacing-default;

  display: table;
  width: 100%;
  margin-bottom: $table-border-bottom;
  border-collapse: collapse;
  white-space: nowrap;

  .mat-header-row,
  .mat-row,
  .mat-footer-row {
    display: table-row;
    width: 100%;
    height: $table-row-height;
    min-height: auto;
    box-sizing: content-box;
    border-right: $table-left-right-padding solid $table-background-color !important;
    border-bottom: none;
    border-left: $table-left-right-padding solid $table-background-color !important;
  }

  .mat-header-row {
    border-color: $empress;
    border-top: $table-top-padding solid $table-background-color;
  }

  .mat-row {
    border-color: $light-gray;

    .mat-cell,
    .mat-footer-cell {
      @include font-table-body;
    }

    &:hover,
    &:focus,
    &:active {
      background-color: $table-hover-color;

      .download,
      .close,
      .menu {
        opacity: 1;
      }
    }
  }

  .mat-footer-row {
    border-bottom: $table-bottom-padding solid $table-background-color;
  }

  .mat-header-cell,
  .mat-footer-cell,
  .mat-cell {
    display: table-cell !important;
    height: $table-row-height;
    padding: 0 0.5rem;
    vertical-align: middle;

    &.right {
      text-align: right;
    }

    &.center {
      text-align: center;
    }

    a {
      color: $cerulean;
      text-decoration: none;

      &:hover,
      &:focus,
      &:active {
        text-decoration: underline;
      }
    }
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  .mat-header-cell {
    border-bottom: $table-border-width solid $pebble;
  }

  .mat-cell {
    border-bottom: $table-border-width solid $light-gray;
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  .mat-header-cell {
    @include font-table-header;
  }

  .download,
  .close,
  .menu {
    display: inline-block;
    width: $icon-background-size;
    height: $icon-background-size;
    flex: none;
    border-radius: 50%;
    cursor: pointer;
    line-height: $icon-background-size;
    text-align: center;
    transform: translateX(0.625rem);
    white-space: nowrap;

    &:hover,
    &:focus,
    &:active {
      background-color: $north;
    }
  }

  .download,
  .close {
    opacity: 0;
  }

  .menu {
    opacity: 1;
  }

  .qd-icon[icon="overflowMenuHorizontal"] {
    display: block !important;
    transform: translate(-(rem(4)), -(rem(5)));
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  .menu {
    color: $empress;
    font-size: 1.625rem;
    vertical-align: inherit;
  }

  &:last-child::after {
    display: table-row;
    height: $table-bottom-padding;
    content: "";
  }

  .main-column {
    max-width: 12.5rem;
    text-overflow: ellipsis;
  }

  .icon-column {
    width: 2.8125rem;
  }

  .qd-container-type-panel & {
    margin-bottom: 0;

    mat-row.mat-row {
      background: $smoke;

      &:hover,
      &:active,
      &:focus {
        background-color: $distance;
      }

      mat-cell.mat-cell {
        font-size: 0.9375rem;
      }

      &:last-child {
        .mat-cell {
          border-bottom: none;
        }
      }
    }
  }

  /* hide buttons when parent-container has class .qd-container-editDisabled */
  .qd-container-editDisabled & {
    button[qd-icon-button] {
      display: none;
    }

    .mat-row {
      background-color: $gainsboro !important;
    }

    .mat-cell {
      color: $empress !important;
    }
  }

  .mat-menu-trigger {
    cursor: pointer;
  }

  &.mat-table-readonly .mat-row {
    &:hover,
    &:focus,
    &:active {
      background-color: inherit;
      cursor: initial;
    }
  }
}

mat-row.mat-row::before,
mat-header-row.mat-header-row::before {
  position: relative;
  z-index: 100;
  display: table-cell;
  width: 0;
  border: none;
  content: "";
}

.mat-row.clickable-row {
  cursor: pointer;
  outline: none;
}
