/* 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);
    }
  }
}

#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;
    /* text-align: center; */

    &: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);
  }
}

@media screen and (max-width: 639px) {
  #ow-table {
    display: block;
    overflow-x: scroll;
    font-size: 14px;
  }
}

/* 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 */