@charset "UTF-8";

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
  background-color: white;
  line-height: 1.2;
  font-size: 18px;

  th, td {
    height: 50px;
    padding: 6px 15px 6px 15px;
    border-bottom: 1px solid $color-white;
    border-right: 1px solid $color-white;
    vertical-align: middle;
    border-top: 1px solid $color-primary-light-03;
    border-top: 1px solid var(--theme-color-primary-dimmed-03, $color-primary-light-03);
    border-bottom: 1px solid $color-primary-light-03;
    border-bottom: 1px solid var(--theme-color-primary-dimmed-03, $color-primary-light-03);

    &:last-child {
      border-right: 0;
    }
    p, .text {
      margin: 5px 0;
    }
  }

  th {
    background-color: $color-secondary-light;
    background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
  }

  tr:nth-child(even) td {
    background-color: lighten($color-primary-light-04, 4);
    background-color: var(--theme-color-primary-dimmed-04, lighten($color-primary-light-04, 4));
  }
}

.responsive-table {
  @media(max-width: 567px) {
    margin: 1rem -20px;
    padding: 0 20px;
    overflow: auto;

    table {
      margin: 0;
      border-right: 20px solid white;
    }
  }
}