@rate-disabled-color: var(--color-text-disabled);
@rate-error-color: var(--color-danger);
@rate-action-padding: 4px;
@rate-primary-color: var(--color-primary);

:root {
  --rate-disabled-color: @rate-disabled-color;
  --rate-error-color: @rate-error-color;
  --rate-action-padding: @rate-action-padding;
  --rate-primary-color: @rate-primary-color;
}

.var-rate {
  display: flex;
  transform: translateX(calc(-1 * var(--rate-action-padding)));

  &__content {
    padding: var(--rate-action-padding);
    box-sizing: unset;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  &--disabled {
    color: var(--rate-disabled-color) !important;
  }

  &--error {
    color: var(--rate-error-color) !important;
  }

  &--primary {
    color: var(--rate-primary-color);
  }
}