@import '../../scss/styles.scss';

@layer payload-default {
  .table {
    margin-bottom: $baseline;
    overflow: auto;
    max-width: 100%;
    isolation: isolate;

    table {
      min-width: 100%;
    }

    thead {
      color: var(--theme-elevation-400);

      th {
        font-weight: normal;
        text-align: left;
        vertical-align: middle;
        [dir='rtl'] & {
          text-align: right;
        }
      }
    }

    th,
    td {
      vertical-align: top;
      padding: calc(var(--base) * 0.6);
      min-width: 150px;
      position: relative;
      z-index: 1;

      &:first-child {
        padding-inline-start: base(0.8);
      }

      &:last-child {
        padding-inline-end: base(0.8);
      }

      &.cell-_select,
      &.cell-_dragHandle {
        width: var(--base);
      }
    }

    tbody {
      tr {
        position: relative;
        &:nth-child(odd) {
          background: var(--theme-elevation-50);
          border-radius: var(--style-radius-s);
          td:first-child {
            border-top-left-radius: inherit;
            border-bottom-left-radius: inherit;
          }
          td:last-child {
            border-top-right-radius: inherit;
            border-bottom-right-radius: inherit;
          }
        }
      }
    }

    a:focus-visible {
      outline: var(--accessibility-outline);
      outline-offset: var(--accessibility-outline-offset);
    }

    &--appearance-condensed {
      border-radius: var(--style-radius-s);
      table {
        border-collapse: collapse;
      }
      thead {
        th:first-child {
          border-top-left-radius: var(--style-radius-s);
        }

        th:last-child {
          border-top-right-radius: var(--style-radius-s);
        }

        background: var(--theme-elevation-50);
      }

      tbody {
        tr {
          &:nth-child(odd) {
            &:after {
              display: none;
            }
          }

          &:last-child {
            td:first-child {
              border-bottom-left-radius: var(--style-radius-s);
            }

            td:last-child {
              border-bottom-right-radius: var(--style-radius-s);
            }
          }
        }
      }

      th,
      td {
        padding: base(0.3) base(0.3);

        &:first-child {
          padding-inline-start: base(0.6);
        }

        &:last-child {
          padding-inline-end: base(0.6);
        }
      }

      th {
        padding: base(0.3);
      }

      tr td,
      th {
        border: 0.5px solid var(--theme-elevation-100);
      }
    }

    &--drag-preview {
      cursor: grabbing;
      z-index: var(--z-popup);
    }

    @include mid-break {
      th,
      td {
        max-width: 70vw;
      }
    }
  }
}