@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.radio-demo-option {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
}

/* The radio centers on the label's first line, not the top of the block. */
.radio-demo-option > .radio-group-item {
  margin-top: calc((var(--text-label) * var(--leading-snug) - var(--check-size)) / 2);
}

.radio-demo-option .hint {
  margin: var(--space-1) 0 0;
}

.radio-demo-form {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-3);
}

.radio-demo-row {
  display: flex;
  gap:     var(--space-2);
}

.radio-demo-wide {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  width:          100%;
  max-width:      28rem;
}

.radio-demo-groups {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-6);
}

/* Rating: each star is a label holding an invisible radio stacked over a
   star icon. Stars up to the rating fill. */
.radio-demo-rating {
  display: flex;
  gap:     var(--space-1);
}

.radio-demo-star {
  display:       inline-grid;
  border-radius: var(--radius-control);
  color:         var(--rule-strong);
  cursor:        pointer;
}

.radio-demo-star > * {
  grid-area: 1 / 1;
}

.radio-demo-star .radio-group-item {
  width:   100%;
  height:  100%;
  opacity: 0;
}

.radio-demo-star .icon {
  width:          var(--icon-size-lg);
  height:         var(--icon-size-lg);
  pointer-events: none;
  transition:     color var(--duration-fast) var(--ease-out),
                  fill var(--duration-fast) var(--ease-out);
}

.radio-demo-star:has([data-filled]) {
  color: var(--accent);
}

.radio-demo-star:has([data-filled]) .icon {
  fill: currentColor;
}

.radio-demo-star:has(:focus-visible) {
  box-shadow: var(--focus-ring);
}

.demo-stage.is-column > .radio-demo-log {
  text-align: center;
}