ui-add-review {
  position: relative;
}

ui-add-review:has([ui-add-review-content][data-state="open"])::before {
      content: "";
      inset: 0;
      cursor: auto;
      z-index: 9998;
      position: fixed;
      background-color: var(--color-overlay);
    }

/* Trigger */

ui-add-review [ui-add-review-trigger] {
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
  }

/* Content */

ui-add-review [ui-add-review-content] {
    z-index: 9999;
    position: fixed;
    translate: -50% -50%;
    left: 50%;
    inset-block-start: 50%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-background);
    width: 500px;
    padding: var(--spacing-12);
    transition: var(--transition-expressive-slow-spatial);
  }

:is(ui-add-review [ui-add-review-content]) .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-12);
      border-radius: var(--radius-md);
      background-color: var(--color-surface-container-low);
    }

:is(:is(ui-add-review [ui-add-review-content]) .head) .title {
        font: var(--font-body-lg);
      }

:is(ui-add-review [ui-add-review-content]) .core {
      display: grid;
      gap: var(--spacing-12);
      grid-template-columns: repeat(2, 1fr);
      padding: var(--spacing-24) calc(var(--spacing-24) - var(--spacing-2));
      padding-block-end: var(--spacing-12);
    }

:is(:is(ui-add-review [ui-add-review-content]) .core) .field {
        display: grid;
        gap: var(--spacing-8);
      }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) label {
          text-align: start;
        }

:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) label):has( + input:required, + textarea:required)::after {
              content: " *";
              color: var(--color-error);
            }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) > input,:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) > textarea {
          width: 100%;
          outline: none;
          border-radius: var(--radius-xs);
          padding: var(--spacing-12) var(--spacing-16);
          color: var(--color-on-background);
          background-color: var(--color-surface-container);
          border: 1px solid var(--color-surface-container-highest);
          transition: border-color var(--transition-standard-default-effects);
        }

:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) > input,:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) > textarea)::placeholder {
            color: color-mix(in srgb, currentColor 50%, transparent);
          }

:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) > input,:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) > textarea):focus {
            border-color: var(--color-on-background);
          }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .field) > textarea {
          min-height: 43px;
          resize: vertical;
        }

:is(:is(ui-add-review [ui-add-review-content]) .core) > *:not(:nth-child(2),:nth-child(3)) {
        grid-column: 1 / 3;
      }

:is(:is(ui-add-review [ui-add-review-content]) .core) .actions {
        display: grid;
        gap: var(--spacing-12);
        grid-template-columns: repeat(2, 1fr);
      }

:is(:is(ui-add-review [ui-add-review-content]) .core) .rating {
        margin-block-end: var(--spacing-8);
      }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .stars {
          display: flex;
          gap: var(--spacing-8);
          justify-content: center;
          margin-block: var(--spacing-8);
        }

:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .stars) .star {
            width: 60px;
          }

[aria-checked="true"]:is(:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .stars) .star) {
              color: var(--color-background);
              background-color: var(--color-on-background);
            }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .preview {
          display: grid;
          gap: var(--spacing-4);
          grid-template-columns: repeat(25, 1fr);
          margin-inline: 52px;
          position: relative;
          background: linear-gradient(90deg, var(--color-error) 0%, var(--color-star) 50%, var(--color-success) 100%);
        }

:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .preview):dir(rtl) {
            background: linear-gradient(-90deg, var(--color-error) 0%, var(--color-star) 50%, var(--color-success) 100%);
          }

:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .preview) > span {
            height: 25px;
            z-index: 3;
            position: relative;
            background-color: var(--color-background);
          }

:is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .preview)::before {
            content: "";
            inset-inline-end: 0;
            inset-block-start: 0;
            height: 100%;
            position: absolute;
            background-color: var(--color-surface-container-highest);
          }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating):not(:has(.star[aria-checked="true"])) .preview::before {
            width: 100%;
          }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating):has(.star:nth-child(1)[aria-checked="true"]) .preview::before {
            width: 80%;
          }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating):has(.star:nth-child(2)[aria-checked="true"]) .preview::before {
            width: 58%;
          }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating):has(.star:nth-child(3)[aria-checked="true"]) .preview::before {
            width: 38%;
          }

:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating):has(.star:nth-child(4)[aria-checked="true"]) .preview::before {
            width: 18%;
          }

[data-state="closed"]:is(ui-add-review [ui-add-review-content]) {
      opacity: 0;
      visibility: hidden;
      inset-block-start: 55%;
    }

/* Responsive */
@media (max-width: 769px) {
    ui-add-review [ui-add-review-content] {
      width: calc(100% - var(--spacing-24));
    }
            :is(:is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .stars) .star {
              width: 100%;
            }

          :is(:is(:is(ui-add-review [ui-add-review-content]) .core) .rating) .preview {
            margin-inline: var(--spacing-0);
          }
}

@media (max-width: 769px) and (min-height: 750px) {
        :is(:is(ui-add-review [ui-add-review-content]) .core) .field {
          grid-column: 1 / 3;
        }
}