.skills.matrix {
  .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-x: scroll;
  }

  h1 {
    margin: 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;

    th,
    td {
      padding: 10px;
      text-align: left;
      white-space: nowrap;
      background-color: #222;
    }

    tr {
      border-bottom: 1px solid #444;
    }

    .proficiency {
      text-align: center;

      &[data-proficiency="1"] {
        background-color: var(--color-emerald-900);
      }

      &[data-proficiency="2"] {
        background-color: var(--color-emerald-700);
      }

      &[data-proficiency="3"] {
        background-color: var(--color-emerald-500);
      }

      &[data-proficiency="4"] {
        background-color: var(--color-emerald-300);
      }
    }

    .fixed {
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;
      border-right: 1px solid #444;

      &:first-child {
        z-index: 2;
      }
    }
  }
}