// phasepedselect
.PhasePedSelect {
  width: 100%;
  height: auto;
  // margin-top: 10PX;
  // border: 1PX solid red;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .item {
    width: 100%;
    height: 50%;
    // border: 1PX solid green;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .name {
      width: 100%;
      height: 20%;
      // border: 1PX solid green;
      display: flex;
      align-items: center;
      font-size: 14PX;
      color: $--color-text-secondary;
      padding: 10PX 0;
      font-weight: 700;
    }
    .content {
      width: 100%;
      height: 80%;
      // border: 1PX solid green;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 10PX;
      cursor: pointer;
      .card {
        width: 70PX;
        height: 80PX;
        // border: 1PX solid red;
        position: relative;
        // background-color: #243d59;
        background-color: $--card-background-base;
        border-radius: 5PX;
        .num {
          color: $--color-text-primary;
          position: absolute;
          left: 5PX;
          bottom: 5PX;
        }
      }
      .card-selected {
        width: 70PX;
        height: 80PX;
        // border: 1PX solid red;
        position: relative;
        // background-color: #0082ac;
        background-color: $--card-background-selected;
        border-radius: 5PX;
        .num {
          color: $--color-text-primary;
          position: absolute;
          left: 5PX;
          bottom: 5PX;
        }
      }
    }
  }
}