.tile-choose {
  @extend .card;
  @extend .card-body;
  @extend .card--border;
  text-align: center;
  color: $mo-gray;
  height: 170px;
  width: 170px;
  cursor: pointer;
  &--selected,
  &:hover {
    color: $mo-green;
    border-color: $mo-green;
  }
}

//velke ikony jsou psaný kapitálkama kvůli ID v reactu
.HOUSE {
  background: url('../images/pl-icon/bydleni.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: 40%;
  display: inline-block;
  &:hover {
    background: url('../images/pl-icon/bydleni-active.svg');
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 40%;
  }
}
.HOUSE.tile-choose--selected {
  background: url('../images/pl-icon/bydleni-active.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: 40%;
}

.ELECTRONICS {
  background: url('../images/pl-icon/elektronika.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  display: inline-block;
  background-size: 40%;
  &:hover {
    background: url('../images/pl-icon/elektronika-active.svg');
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 40%;
  }
}
.ELECTRONICS.tile-choose--selected {
  background: url('../images/pl-icon/elektronika-active.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: 40%;
}
.PET {
  background: url('../images/pl-icon/mazlicci.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  display: inline-block;
  background-size: 40%;
  &:hover {
    background: url('../images/pl-icon/mazlicci-active.svg');
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 40%;
  }
}
.PET.tile-choose--selected {
  background: url('../images/pl-icon/mazlicci-active.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: 40%;
}
.RESTAURANT {
  background: url('../images/pl-icon/restaurace.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  display: inline-block;
  background-size: 40%;
  &:hover {
    background: url('../images/pl-icon/restaurace-active.svg');
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 40%;
  }
}
.RESTAURANT.tile-choose--selected {
  background: url('../images/pl-icon/restaurace-active.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: 40%;
}
.SPORT {
  background: url('../images/pl-icon/sport.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  display: inline-block;
  background-size: 40%;
  &:hover {
    background: url('../images/pl-icon/sport-active.svg');
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 40%;
  }
}
.SPORT.tile-choose--selected {
  background: url('../images/pl-icon/sport-active.svg');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: 40%;
}