/* General Table Styles */
.ow-table__wrapper:not(:last-child) {
  margin-bottom: var(--spacing-200, 16px);
}

#ow-table {
  --table-border--default: 1px solid var(--grey-500, #c6c6c6);

  tr {
    background: unset;
    padding: 0;
  }

  :is(th, td) {
    padding: var(--spacing-200, 16px);
    background: var(--white, #fff);

    &[data-title]::before {
      content: attr(data-title);
      display: block;
      position: unset;
    }

    &:first-child[data-title]::before {
      color: var(--brand-primary-500, #001080);
    }
  }
}

@media screen and (min-width: 640px) {
  #ow-table {
    display: table;
    border-collapse: separate;
    margin: 0;
    width: 100%;
    font-size: 16px;

    &.ow-table--small {
      font-size: 14px;
    }

    thead {
      position: static;
      top: auto;
      left: auto;
      border-bottom: none;
    }

    thead :is(th, td) {
      background: var(--grey-300, #f2f2f2);
    }

    tbody {
      display: table-row-group;
    }

    tr {
      display: table-row;
      margin: 0;
      padding: 0;
      border: unset;
    }

    :is(th, td) {
      --table-background--hover: var(--brand-primary-100, #e0e2f0);
      position: relative;
      display: table-cell;
      border-bottom: var(--table-border--default);
      word-wrap: break-word;

      &:first-child {
        border-left: var(--table-border--default);
      }

      &:last-child {
        border-right: var(--table-border--default);
      }

      thead tr:first-child & {
        border-top: var(--table-border--default);
      }

      .ow-table--striped tbody :nth-child(even) & {
        background: var(--grey-200);

        tbody tr:hover & {
          background: var(--table-background--hover);
        }
      }

      tbody tr:hover & {
        background: var(--table-background--hover);
      }

      &[data-title]::before {
        display: none;
      }
    }

    /* if the first cell, in the first thead row, of the table, is th OR td, add top-left border-radius */
    thead tr:first-of-type :is(th, td):first-child {
      border-top-left-radius: var(--spacing-50, 4px);
    }

    /* if the last cell, in the first thead row, of the table, is th OR td, add top-right border-radius */
    thead tr:first-of-type :is(th, td):last-child {
      border-top-right-radius: var(--spacing-50, 4px);
    }

    /* if the first cell, in the last row, of the table, is th OR td, add bottom-left border-radius */
    > *:last-child tr:last-child :is(th, td):first-child {
      border-bottom-left-radius: var(--spacing-50, 4px);
    }

    /* if the last cell, in the last row, of the table, is th OR td, add bottom-right border-radius */
    > *:last-child tr:last-child :is(th, td):last-child {
      border-bottom-right-radius: var(--spacing-50, 4px);
    }
  }
}

/* Wrap the below mess in :has([data-title])? perchance a bold new solution */
@media screen and (max-width: 639px) {
  #ow-table.responsive-design {
    tr {
      border: none;
    }

    :is(th, td) {
      border-left: var(--table-border--default);
      border-right: var(--table-border--default);

      &:first-child {
        background: var(--grey-300, #f2f2f2);
        border-top: var(--table-border--default);
        border-bottom: var(--table-border--default);
        border-top-left-radius: var(--spacing-50, 4px);
        border-top-right-radius: var(--spacing-50, 4px);
      }

      &:last-child {
        border-bottom: var(--table-border--default);
        border-bottom-left-radius: var(--spacing-50, 4px);
        border-bottom-right-radius: var(--spacing-50, 4px);
      }
    }
  }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
  #ow-table.responsive-design {
    tr {
      display: grid;
      grid-template-columns: 1fr 1fr;

      /* Make the first and last child (if its even) span two columns */
      > *:first-child,
      > *:last-child:nth-child(even) {
        grid-column: span 2;
      }

      /* remove border-left from all odd children, except for the first-child */
      > *:nth-child(odd):not(:first-child) {
        border-left: none;
      }

      /* remove border-right from all odd children, except for the last-child */
      > *:nth-child(even):not(:last-child) {
        border-right: none;
      }

      /* if the row has an odd amount of children use magic to look uniform */
      &:has(> *:last-child:nth-child(odd)) {
        /* second last child */
        & > *:nth-last-child(2) {
          border-bottom-left-radius: var(--spacing-50, 4px);
          border-bottom: var(--table-border--default);
        }

        /* last child */
        & > *:last-child {
          border-bottom-left-radius: 0;
        }
      }
    }
  }
}
/* END General Table Styles */