@use "../../wc";

:host {
  --symbol-color: rgb(var(--zn-border-color));
  --symbol-color-active: var(--zn-color-amber-400);
  --symbol-size: 1.2rem;
  --symbol-spacing: var(--zn-spacing-x-small);
  --preview-color: rgb(var(--zn-text));
  --preview-size: 0.875rem;

  display: block;
}

.rating {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--zn-border-radius);
  vertical-align: middle;

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: rgb(var(--zn-primary));
    outline-offset: 2px;
  }

  &__symbols {
    display: inline-flex;
    position: relative;
    gap: var(--symbol-spacing);
    font-size: var(--symbol-size);
    line-height: 0;
    color: var(--symbol-color);
    white-space: nowrap;
    cursor: pointer;
  }

  &__symbol--active,
  &__partial--filled {
    color: var(--symbol-color-active);
  }

  &__partial-symbol-container {
    position: relative;
  }

  &__partial--filled {
    position: absolute;
    top: 0;
    left: 0;
  }

  &__symbol {
    transition: var(--zn-transition-fast) scale;
    pointer-events: none;

    &--hover {
      scale: 1.2;
    }
  }

  &__preview {
    margin-left: var(--symbol-spacing);
    font-size: var(--preview-size);
    font-weight: var(--zn-font-weight-semibold);
    line-height: 1;
    color: var(--preview-color);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;

    &--hover {
      color: var(--symbol-color-active);
    }
  }

  &--disabled &__symbols,
  &--readonly &__symbols {
    cursor: default;
  }

  &--disabled &__symbol--hover,
  &--readonly &__symbol--hover {
    scale: none;
  }

  &--disabled &__preview--hover,
  &--readonly &__preview--hover {
    color: var(--preview-color);
  }

  &--disabled {
    opacity: 0.5;
  }

  &--disabled .rating__symbols {
    cursor: not-allowed;
  }

  &--small {
    --symbol-size: 1rem;
    --symbol-spacing: var(--zn-spacing-2x-small);
  }

  &--medium {
    --symbol-size: 1.2rem;
  }

  &--large {
    --symbol-size: 1.5rem;
    --symbol-spacing: 12px;
  }
}