$clear-icon-size: 1em !default;

.b-form-rating {
  text-align: center;
  min-width: 0;

  &:not(.b-form-rating-inline) {
    width: 100%;
  }

  &.b-form-rating-inline {
    width: auto;
  }

  &.no-border {
    border: none;
  }

  &.is-disabled {
    color: var(--bs-secondary);
    background-color: var(--bs-secondary-bg);
  }

  .clear-icon {
    width: $clear-icon-size;
    height: $clear-icon-size;
    transition: transform var(--bs-transition-duration) ease;
    color: var(--bs-body-color);
    fill: currentColor;
  }

  &:not(.is-readonly):not(.is-disabled) .clear-icon:hover {
    transform: scale(1.5);
  }
}

.rating-item {
  align-items: center;
  display: flex;
  justify-content: center;
  user-select: none;
  padding: 0 0.25em;
}

.b-form-rating:not(.is-readonly):not(.is-disabled) .rating-item {
  cursor: pointer;
}

.is-readonly .rating-item,
.is-disabled .rating-item {
  cursor: default;
}

.rating-clear-button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  padding: 0 0.25em;
}

.rating-value-text {
  flex-shrink: 0;
  color: var(--bs-body-color);
  margin: 0;
  padding: 0 0.25em;
}

.b-form-rating-item {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.b-form-rating:not(.is-readonly):not(.is-disabled) .rating-item:hover .b-form-rating-item {
  transform: scale(1.5);
}