@charset "utf-8";

.row-menu-modal {
  .color-radio-container {
    label {
      &:nth-child(1) {
        background: var(--color-tier1);
      }

      &:nth-child(2) {
        background: var(--color-tier2);
      }

      &:nth-child(3) {
        background: var(--color-tier3);
      }

      &:nth-child(4) {
        background: var(--color-tier4);
      }

      &:nth-child(5) {
        background: var(--color-tier5);
      }

      &:nth-child(6) {
        background: var(--color-tier6);
      }

      &:nth-child(7) {
        background: var(--color-tier7);
      }

      &:nth-child(8) {
        background: var(--color-tier8);
      }

      &:nth-child(9) {
        background: var(--color-tier9);
      }

      &:nth-child(10) {
        background: var(--color-tier10);
      }

      &:nth-child(11) {
        background: var(--color-tier11);
      }

      &:nth-child(12) {
        background: var(--color-tier12);
      }

      &:nth-child(13) {
        background: var(--color-tier0);
      }
    }
  }
}

.tier-item {
  &[data-color-idx="0"] {
    .tier-label-container {
      background: var(--color-tier0);
    }
  }

  &[data-color-idx="1"] {
    .tier-label-container {
      background: var(--color-tier1);
    }
  }

  &[data-color-idx="2"] {
    .tier-label-container {
      background: var(--color-tier2);
    }
  }

  &[data-color-idx="3"] {
    .tier-label-container {
      background: var(--color-tier3);
    }
  }

  &[data-color-idx="4"] {
    .tier-label-container {
      background: var(--color-tier4);
    }
  }

  &[data-color-idx="5"] {
    .tier-label-container {
      background: var(--color-tier5);
    }
  }

  &[data-color-idx="6"] {
    .tier-label-container {
      background: var(--color-tier6);
    }
  }

  &[data-color-idx="7"] {
    .tier-label-container {
      background: var(--color-tier7);
    }
  }

  &[data-color-idx="8"] {
    .tier-label-container {
      background: var(--color-tier8);
    }
  }

  &[data-color-idx="9"] {
    .tier-label-container {
      background: var(--color-tier9);
    }
  }

  &[data-color-idx="10"] {
    .tier-label-container {
      background: var(--color-tier10);
    }
  }

  &[data-color-idx="11"] {
    .tier-label-container {
      background: var(--color-tier11);
    }
  }

  &[data-color-idx="12"] {
    .tier-label-container {
      background: var(--color-tier12);
    }
  }
}