.caja {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  h4 {
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 5px;
  }
  span {
    width: 100px;
    height: 50px;
    place-content: center;
    text-align: center;
    font-size: 20px;
    &:nth-child(8),
    &:nth-child(9),
    &:nth-child(10),
    &:nth-child(11),
    &:nth-child(12) {
      /* color: white; */
    }
    &:nth-child(7) {
      display: flex;
      flex-direction: column;
      align-items: center;
      .hexa {
        font-size: 12px;
      }
    }
  }
  &.brand {
    span{
      &:nth-child(2) {
        background-color: var(--brand50);
      }
      &:nth-child(3) {
        background-color: var(--brand100);
      }
      &:nth-child(4) {
        background-color: var(--brand200);
      }
      &:nth-child(5) {
        background-color: var(--brand300);
      }
      &:nth-child(6) {
        background-color: var(--brand400);
      }
      &:nth-child(7) {
        background-color: var(--brand500);
      }
      &:nth-child(8) {
        background-color: var(--brand600);
      }
      &:nth-child(9) {
        background-color: var(--brand700);
      }
      &:nth-child(10) {
        background-color: var(--brand800);
      }
      &:nth-child(11) {
        background-color: var(--brand900);
      }
      &:nth-child(12) {
        background-color: var(--brand950);
      }
    }
  }
  &.interactive {
    span{
      &:nth-child(2) {
        background-color: var(--interactive50);
      }
      &:nth-child(3) {
        background-color: var(--interactive100);
      }
      &:nth-child(4) {
        background-color: var(--interactive200);
      }
      &:nth-child(5) {
        background-color: var(--interactive300);
      }
      &:nth-child(6) {
        background-color: var(--interactive400);
      }
      &:nth-child(7) {
        background-color: var(--interactive500);

        .hexa {
          width: 60px;
          height: 60px;
          background-color: var(--interactivehex);
        }
      }
      &:nth-child(8) {
        background-color: var(--interactive600);
      }
      &:nth-child(9) {
        background-color: var(--interactive700);
      }
      &:nth-child(10) {
        background-color: var(--interactive800);
      }
      &:nth-child(11) {
        background-color: var(--interactive900);
      }
      &:nth-child(12) {
        background-color: var(--interactive950);
      }
    }
  }
  &.accent {
    span{
      &:nth-child(2) {
        background-color: var(--accent50);
      }
      &:nth-child(3) {
        background-color: var(--accent100);
      }
      &:nth-child(4) {
        background-color: var(--accent200);
      }
      &:nth-child(5) {
        background-color: var(--accent300);
      }
      &:nth-child(6) {
        background-color: var(--accent400);
      }
      &:nth-child(7) {
        background-color: var(--accent500);
      }
      &:nth-child(8) {
        background-color: var(--accent600);
      }
      &:nth-child(9) {
        background-color: var(--accent700);
      }
      &:nth-child(10) {
        background-color: var(--accent800);
      }
      &:nth-child(11) {
        background-color: var(--accent900);
      }
      &:nth-child(12) {
        background-color: var(--accent950);
      }
    }
  }
  &.info {
    span{
      &:nth-child(2) {
        background-color: var(--info50);
      }
      &:nth-child(3) {
        background-color: var(--info100);
      }
      &:nth-child(4) {
        background-color: var(--info200);
      }
      &:nth-child(5) {
        background-color: var(--info300);
      }
      &:nth-child(6) {
        background-color: var(--info400);
      }
      &:nth-child(7) {
        background-color: var(--info500);
      }
      &:nth-child(8) {
        background-color: var(--info600);
      }
      &:nth-child(9) {
        background-color: var(--info700);
      }
      &:nth-child(10) {
        background-color: var(--info800);
      }
      &:nth-child(11) {
        background-color: var(--info900);
      }
      &:nth-child(12) {
        background-color: var(--info950);
      }
    }
  }
  &.success {
    span{
      &:nth-child(2) {
        background-color: var(--success50);
      }
      &:nth-child(3) {
        background-color: var(--success100);
      }
      &:nth-child(4) {
        background-color: var(--success200);
      }
      &:nth-child(5) {
        background-color: var(--success300);
      }
      &:nth-child(6) {
        background-color: var(--success400);
      }
      &:nth-child(7) {
        background-color: var(--success500);
      }
      &:nth-child(8) {
        background-color: var(--success600);
      }
      &:nth-child(9) {
        background-color: var(--success700);
      }
      &:nth-child(10) {
        background-color: var(--success800);
      }
      &:nth-child(11) {
        background-color: var(--success900);
      }
      &:nth-child(12) {
        background-color: var(--success950);
      }
    }
  }
  &.warning {
    span{
      &:nth-child(2) {
        background-color: var(--warning50);
      }
      &:nth-child(3) {
        background-color: var(--warning100);
      }
      &:nth-child(4) {
        background-color: var(--warning200);
      }
      &:nth-child(5) {
        background-color: var(--warning300);
      }
      &:nth-child(6) {
        background-color: var(--warning400);
      }
      &:nth-child(7) {
        background-color: var(--warning500);
      }
      &:nth-child(8) {
        background-color: var(--warning600);
      }
      &:nth-child(9) {
        background-color: var(--warning700);
      }
      &:nth-child(10) {
        background-color: var(--warning800);
      }
      &:nth-child(11) {
        background-color: var(--warning900);
      }
      &:nth-child(12) {
        background-color: var(--warning950);
      }
    }
  }
  &.danger {
    span{
      &:nth-child(2) {
        background-color: var(--danger50);
      }
      &:nth-child(3) {
        background-color: var(--danger100);
      }
      &:nth-child(4) {
        background-color: var(--danger200);
      }
      &:nth-child(5) {
        background-color: var(--danger300);
      }
      &:nth-child(6) {
        background-color: var(--danger400);
      }
      &:nth-child(7) {
        background-color: var(--danger500);
      }
      &:nth-child(8) {
        background-color: var(--danger600);
      }
      &:nth-child(9) {
        background-color: var(--danger700);
      }
      &:nth-child(10) {
        background-color: var(--danger800);
      }
      &:nth-child(11) {
        background-color: var(--danger900);
      }
      &:nth-child(12) {
        background-color: var(--danger950);
      }
    }
  }
  &.gray {
    span{
      &:nth-child(2) {
        background-color: var(--gray50);
      }
      &:nth-child(3) {
        background-color: var(--gray100);
      }
      &:nth-child(4) {
        background-color: var(--gray200);
      }
      &:nth-child(5) {
        background-color: var(--gray300);
      }
      &:nth-child(6) {
        background-color: var(--gray400);
      }
      &:nth-child(7) {
        background-color: var(--gray500);
      }
      &:nth-child(8) {
        background-color: var(--gray600);
      }
      &:nth-child(9) {
        background-color: var(--gray700);
      }
      &:nth-child(10) {
        background-color: var(--gray800);
      }
      &:nth-child(11) {
        background-color: var(--gray900);
      }
      &:nth-child(12) {
        background-color: var(--gray950);
      }
    }
  }
}