@use '../variables';
@use "../theme/shadows.tokens";
@use "../theme/spacing.tokens";
@use "../theme/tables.tokens";
@use "../theme/transitions.tokens";
@use "../theme/typography.tokens";

.pa-table-grid {
  display: grid;

  &.with-border {
    border: 1px solid tables.$color-border-table;
    border-radius: spacing.$border-radius-default;

    .pa-table-grid--head {
      pa-table-cell:first-of-type .pa-table-grid--header {
        border-top-left-radius: spacing.$border-radius-default;
      }
      pa-table-cell:last-of-type .pa-table-grid--header {
        border-top-right-radius: spacing.$border-radius-default;
      }
    }
    pa-table-row:first-of-type {
      pa-table-cell:first-of-type .pa-table-grid--cell {
        border-top-left-radius: spacing.$border-radius-default;
      }
      pa-table-cell:last-of-type .pa-table-grid--cell {
        border-top-right-radius: spacing.$border-radius-default;
      }
    }
  }
}

.pa-table-grid--head {
  display: contents;

  .pa-table-grid--header {
    background: tables.$color-background-table-header;
    border-bottom: 1px tables.$color-border-table-header solid;
    color: tables.$color-text-table-header;
    font-size: typography.font-size(xs);
    font-weight: tables.$font-weight-text-table-header;
    line-height: typography.line-height(s);
    min-height: tables.$min-height-table-header;
    padding: tables.$padding-table-header;
    position: sticky;
    text-transform: tables.$text-transform-table-header;
    top: 0;
  }

  .no-background .pa-table-grid--header {
    background: tables.$color-background-table-row;
  }

  .pa-table-grid--row > :first-child {
    z-index: 2;
  }
}

.pa-table-grid--body {
  display: contents;

  .pa-table-grid--header {
    background: tables.$color-background-table-row;
    box-shadow: inset 0px -1px 0px tables.$color-border-table-row;
  }

  .pa-table-grid--header,
  .pa-table-grid--row {
    transition: background transitions.$transition-hint;
  }

  .pa-table-grid--row:hover .pa-table-grid--header,
  .pa-table-grid--row.pa-clickable:hover .pa-table-grid--cell,
  .pa-table-grid--row.pa-hoverable:hover .pa-table-grid--cell {
    background: tables.$color-background-table-row-hover;
  }

  .pa-selected .pa-table-grid--row .pa-table-grid--header,
  .pa-selected .pa-table-grid--row .pa-table-grid--cell,
  .pa-selected .pa-table-grid--row:hover .pa-table-grid--header,
  .pa-selected .pa-table-grid--row:hover .pa-table-grid--cell {
    background: tables.$color-background-table-row-selected;
  }

  /*
   * FIXME: when table-grid-cell contains a button and you click on it, currently the whole line has the active state.
   * We need to find a way of preventing that.
   */
  .pa-table-grid--row:active .pa-table-grid--header,
  .pa-table-grid--row.pa-clickable:active .pa-table-grid--cell {
    background: tables.$color-background-table-row-active;
  }
}

pa-table-row:not(:last-of-type) .pa-table-grid--row {
  .pa-table-grid--cell {
    box-shadow: inset 0px -1px 0px tables.$color-border-table-row;
  }
}
pa-table-row:last-of-type .pa-table-grid--row {
  pa-table-cell:first-of-type .pa-table-grid--cell,
  pa-table-cell-menu:first-of-type .pa-table-grid--menu-cell {
    border-bottom-left-radius: spacing.$border-radius-default;
  }

  pa-table-cell:last-of-type .pa-table-grid--cell,
  pa-table-cell-menu:last-of-type .pa-table-grid--menu-cell {
    border-bottom-right-radius: spacing.$border-radius-default;
  }
}

.pa-table-grid--row {
  display: contents;
  font-size: typography.font-size(s);
  font-weight: tables.$font-weight-table-row;
  line-height: typography.line-height(m);

  .pa-table-grid--row-header {
    background: tables.$color-background-table-header-row;
    border-top: 1px solid tables.$color-border-table-header-row;
    color: tables.$color-text-table-header-row;
    font-size: typography.font-size(xs);
    font-weight: tables.$font-weight-text-table-header-row;
    grid-column: 1 / -1;
    margin-top: -1px;
    padding: tables.$padding-table-row-header;
    position: sticky;
    top: tables.$min-height-table-header;
    z-index: 3;
  }

  &.pa-disabled .pa-table-grid--cell {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
  }

  &.pa-clickable .pa-table-grid--cell {
    cursor: pointer;
  }
}

pa-table-row-header:last-child {
  .pa-table-grid--row-header {
    border-bottom-left-radius: spacing.$border-radius-default;
    border-bottom-right-radius: spacing.$border-radius-default;
  }
}

.pa-table-grid--header {
  align-items: center;
  display: flex;
  padding: 0 spacing.rhythm(1);

  &.pa-center {
    justify-content: center;
  }
}

.pa-table-grid--cell {
  align-items: center;
  background: tables.$color-background-table-row;
  color: tables.$color-text-table-row;
  display: flex;
  min-height: tables.$min-height-table-cell;
  padding: tables.$padding-table-cell-small;

  &.pa-disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
  }

  &.pa-keyboard-focus {
    box-shadow: inset shadows.$shadow-focus !important;
  }

  &.pa-center {
    justify-content: center;
  }
}

.pa-table-grid--header,
.pa-table-grid--cell {
  &.pa-no-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pa-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.pa-border-right {
    border-right: 1px solid tables.$color-border-table;
  }
}

.pa-table-grid--menu-cell {
  justify-content: center;

  &.pa-table-grid--header .pa-button {
    display: flex;
    height: spacing.rhythm(3);
    padding: 0;
  }
}

$lead-image-dimension: spacing.rhythm(6);
.pa-lead-image {
  height: $lead-image-dimension;
  width: $lead-image-dimension;

  pa-icon svg {
    height: $lead-image-dimension !important;
    width: $lead-image-dimension !important;
  }
}

// ignore Angular components
pa-table-row,
pa-table-row-header,
pa-table-header,
pa-table-cell,
pa-table-cell-menu,
pa-table-sortable-header-cell {
  display: contents;
}

@media (min-width: spacing.$size-viewport-medium-min) {
  .pa-table-grid--row {
    font-size: typography.font-size(m);
    line-height: typography.line-height(l);
  }

  .pa-table-grid--cell {
    padding: tables.$padding-table-cell-medium;
  }
}

@media (min-width: spacing.$size-viewport-large-min) {
  .pa-table-grid--header,
  .pa-table-grid--cell {
    cursor: default;
  }
  .pa-table-grid--header.pa-clickable,
  .pa-table-grid--cell.pa-clickable {
    cursor: pointer;
  }
}