@import '../../ui/colors.scss';
@import '../../ui/typography.scss';

$grayRowBackground: rgba($D70, 0.42);

.description {
  margin-bottom: calc(54px - 16px);

  :global .markdown-body p {
    @include font();
    @include fontWeight(medium);
    font-size: 16px;
    line-height: 24px;
    color: $D20;
  }

  :global .markdown-body li,
  :global .markdown-body ol {
    @include font();
    @include fontWeight(medium);
    font-size: 16px;
    line-height: 24px;
    color: $D20;
  }
}

.descriptionSmall {
  margin-bottom: 8px;
}

.table {
  border-collapse: collapse;
  width: 100%;
}

// Table margins
.table {
  margin: 30px 0;

  &.transparentHeader {
    margin: 6px 0 12px 0;
  }
}

// Header colors
.table {
  .thead {
    tr {
      background-color: $D70;
    }
    .th {
      color: $D10;
    }
  }

  &.transparentHeader {
    .thead {
      tr {
        background-color: $D80;
      }
      .th {
        color: $D40;
      }
    }
  }
}

// Row background
.table {
  .tr {
    &:nth-child(even) {
      background-color: $grayRowBackground;
    }
    &:nth-child(odd) {
      background-color: $D80;
    }
  }

  &.transparentHeader {
    .tr {
      &:nth-child(even) {
        background-color: $D80;
      }
      &:nth-child(odd) {
        background-color: $grayRowBackground;
      }
    }
  }
}

.td,
.th {
  padding-left: 0;
  padding-right: 24px;

  &:first-child {
    padding-left: 30px;
  }
  &:last-child {
    padding-right: 30px;
  }
}

.th {
  @include font(bold);
  font-weight: 500;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 12px;
  text-align: start;
  height: 42px;
}

.td {
  padding-top: 18px;
  padding-bottom: 18px;

  a {
    @include font(light);
    font-size: 16px;
    line-height: 1.88em;
    color: rgb(56, 153, 236);
    text-decoration: none;

    &:hover {
      color: rgb(78, 183, 245);
    }
  }
}

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 30px;
}

.table-markdown {
  @include font(light);
  font-size: 16px;
  line-height: 1.88em;

  p {
    margin: 0;
  }
}