.hy-table-container {
  @include font-size(14px, 18px);
  position: relative;
  overflow: auto;
  white-space: nowrap;

  @include breakpoint($narrow) {
    @include font-size(16px, 20px);
  }

  table {
    border-collapse: unset;
    border-spacing: unset;
    border: 1px solid var(--grayscale-dark);
    text-indent: initial;
    width: 100%;
  }

  thead {
    th {
      @include font-size(14px, 20px);

      background-color: var(--grayscale-light);
      text-transform: uppercase;

      @include breakpoint($narrow) {
        @include font-size(16px, 20px);
      }
    }
  }

  td,
  th {
    box-shadow: -0.5px -0.5px 0 var(--grayscale-dark);
    color: var(--grayscale-dark);
    font-family: var(--main-font-family);
    letter-spacing: -0.5px;
    padding: 0.7em 0.9em;
    text-align: left;
    vertical-align: top;

    a {
      text-decoration: none;

      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }

    p {
      font-size: inherit;
    }

    &:not(th):first-child {
      @include font-weight($bold);

      background-color: var(--grayscale-white);
      box-shadow: 0.5px -0.5px 0.5px var(--grayscale-dark);
      left: 0;
      max-width: 200px;
      min-width: 200px;
      position: sticky;
      white-space: normal;
      width: 200px;
      z-index: 2;

      @include breakpoint($narrow) {
        max-width: 220px;
        min-width: 220px;
        width: 220px;
      }

      @include breakpoint($medium) {
        max-width: 300px;
        min-width: 300px;
        width: 300px;
      }

      @include breakpoint($wide) {
        max-width: 40%;
        min-width: 40%;
        width: 40%;
      }
    }
  }

  td {
    background-color: var(--grayscale-white);
  }
}