:root {
  --aunt-rate-color: var(--aunt-gray-3);
  --aunt-rate-color-active: var(--aunt-red);
  --aunt-rate-padding: var(--aunt-padding-base);
}
.aunt-rate {
  display: inline-flex;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
}
.aunt-rate__item {
  position: relative;
}
.aunt-rate--readonly .aunt-rate__icon,
.aunt-rate--disabled .aunt-rate__icon {
  cursor: not-allowed;
}
.aunt-rate--disabled .aunt-rate__icon--active {
  color: var(--aunt-gray-4);
}
.aunt-rate__icon {
  padding: var(--aunt-rate-padding);
  color: var(--aunt-rate-color);
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  transition: color var(--aunt-animation-duration-base);
}
.aunt-rate__icon--half {
  padding-right: 0;
  width: 50%;
  position: absolute;
  left: 0;
  top: 0;
}
.aunt-rate__icon--active {
  color: var(--aunt-rate-color-active);
}