$base-url: '@/assets/images/home/';
$car-url: '@/assets/images/cars/';

.running-car {
  position: absolute;
  z-index: 4;
  cursor: pointer;

  .core {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition-property: all;
    transition-duration: .3s;
  }

  .nameplate {
    position: absolute;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    left: 50%;
    background: rgba(0, 56, 96, 1);
    transform: translateX(-50%);
  }

  &.type-0 {
    .core {
      background: url($car-url + 'car_01.png');
      background-size: cover;
    }
    &.selected {
      .core {
        background: url($car-url + 'car_select_01.png');
        background-size: cover;
      }
    }
    &.collected {
      .core {
        background: url($car-url + 'car_collect_01.png');
        background-size: cover;
      }
    }
    &.danger {
      .core {
        background: url($car-url + 'car_danger_01.png');
        background-size: cover;
      }
      &.selected {
        .core {
          background: url($car-url + 'car_collect_01.png');
          background-size: cover;
        }
      }
    }
  }
  &.type-1 {
    .core {
      background: url($car-url + 'car_02.png');
      background-size: cover;
    }
    &.selected {
      .core {
        background: url($car-url + 'car_select_02.png');
        background-size: cover;
      }
    }
    &.collected {
      .core {
        background: url($car-url + 'car_collect_02.png');
        background-size: cover;
      }
    }
    &.danger {
      .core {
        background: url($car-url + 'car_danger_02.png');
        background-size: cover;
      }
      &.selected {
        .core {
          background: url($car-url + 'car_collect_02.png');
          background-size: cover;
        }
      }
    }
  }
  &.type-2 {
    .core {
      background: url($car-url + 'car_03.png');
      background-size: cover;
    }
    &.selected {
      .core {
        background: url($car-url + 'car_select_03.png');
        background-size: cover;
      }
    }
    &.collected {
      .core {
        background: url($car-url + 'car_collect_03.png');
        background-size: cover;
      }
    }
    &.danger {
      .core {
        background: url($car-url + 'car_danger_03.png');
        background-size: cover;
      }
      &.selected {
        .core {
          background: url($car-url + 'car_collect_03.png');
          background-size: cover;
        }
      }
    }
  }
  &.type-3 {
    .core {
      background: url($car-url + 'car_04.png');
      background-size: cover;
    }
    &.selected {
      .core {
        background: url($car-url + 'car_select_04.png');
        background-size: cover;
      }
    }
    &.collected {
      .core {
        background: url($car-url + 'car_collect_04.png');
        background-size: cover;
      }
    }
    &.danger {
      .core {
        background: url($car-url + 'car_danger_04.png');
        background-size: cover;
      }
      &.selected {
        .core {
          background: url($car-url + 'car_collect_04.png');
          background-size: cover;
        }
      }
    }
  }
  &.type-4 {
    .core {
      background: url($car-url + 'car_05.png');
      background-size: cover;
    }
    &.selected {
      .core {
        background: url($car-url + 'car_select_05.png');
        background-size: cover;
      }
    }
    &.collected {
      .core {
        background: url($car-url + 'car_collect_05.png');
        background-size: cover;
      }
    }
    &.danger {
      .core {
        // background: url($car-url + 'car_danger_05.png');
        background-size: cover;
      }
      &.selected {
        .core {
          // background: url($car-url + 'car_collect_05.png');
          background-size: cover;
        }
      }
    }
  }
}