/**
 * @file
 * Rate This Page block styles.
 *
 * Implements the "Rate this page" V2.0 Figma layout: a 298px wide card docked
 * to the bottom right corner of the viewport, sitting flush on top of the fixed
 * typo message bar, with square bottom corners and 4px top corners.
 */

.rate-page-block {
  --rate-page-bg: #fff;
  --rate-page-border: #e4e4e4;
  --rate-page-text: #000;
  --rate-page-divider: rgba(0, 0, 0, 0.2);
  --rate-page-field-border: #c4c4c4;
  --rate-page-placeholder: #a3a3a3;
  --rate-page-star-empty: #d9d9d9;
  --rate-page-star-filled: #ffd700;
  --rate-page-accent: #0074fc;
  --rate-page-accent-hover: #005fd0;
  --rate-page-disabled: #a6a6a6;

  position: absolute;
  right: 100px;
  bottom: 100%;
  z-index: 3;
  display: flex;
  width: 298px;
  max-width: calc(100vw - 32px);
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--rate-page-border);
  border-radius: 4px 4px 0 0;
  background: var(--rate-page-bg);
  color: var(--rate-page-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  transition: padding 0.2s ease;
}

.rate-page-block,
.rate-page-block *,
.rate-page-block *::before,
.rate-page-block *::after {
  box-sizing: border-box;
}

.rate-page-block._open {
  padding: 16px;
}

/* Header, doubles as the expand/collapse trigger. */
.rate-page-block__header {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.rate-page-block__title {
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

.rate-page-block__toggle {
  display: flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.rate-page-block._open .rate-page-block__toggle {
  transform: rotate(180deg);
}

/* Panel. */
.rate-page-panel {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--rate-page-divider);
}

.rate-page-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* Questions. */
.rate-page-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.rate-page-question-item {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.rate-page-question-label {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 1.2;
}

.rate-page-stars {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.rate-page-star {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rate-page-star-empty);
  cursor: pointer;
  transition: color 0.15s ease;
}

.rate-page-star svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.rate-page-star._active {
  color: var(--rate-page-star-filled);
}

.rate-page-star:focus-visible {
  outline: 2px solid var(--rate-page-accent);
  outline-offset: 1px;
}

/* Comment. */
.rate-page-form .form-item-comment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rate-page-divider);
}

.rate-page-form .form-item-comment > label {
  display: block;
  margin: 0;
  color: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.rate-page-form .form-textarea-wrapper {
  display: block;
  margin: 0;
}

.rate-page-comment {
  display: block;
  width: 100%;
  height: 72px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--rate-page-field-border);
  border-radius: 4px;
  background: var(--rate-page-bg);
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  resize: none;
}

.rate-page-comment::placeholder {
  color: var(--rate-page-placeholder);
  opacity: 1;
}

.rate-page-comment:focus {
  border-color: var(--rate-page-accent);
  outline: none;
}

/* Submit. */
.rate-page-form .form-actions {
  position: relative;
  display: block;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rate-page-divider);
}

.rate-page-submit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 16px;
  border: 0;
  border-radius: 54px;
  background: var(--rate-page-accent);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background 0.2s ease;
}

.rate-page-submit:hover {
  background: var(--rate-page-accent-hover);
}

.rate-page-submit:disabled,
.rate-page-submit[disabled] {
  background: var(--rate-page-disabled);
  cursor: default;
}

/*
 * While submitting the button keeps its enabled colour and hides its label so
 * the throbber reads as the button's own state. The button is an <input>, so
 * the throbber has to be a sibling overlaid on top of it.
 */
.rate-page-submit._loading,
.rate-page-submit._loading:disabled {
  background: var(--rate-page-accent);
  color: transparent;
  cursor: progress;
}

.rate-page-throbber {
  position: absolute;
  top: 12px;
  left: 0;
  display: block;
  width: 100%;
  height: 37px;
  pointer-events: none;
}

.rate-page-throbber::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rate-page-spin 0.7s linear infinite;
  content: '';
}

@keyframes rate-page-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rate-page-throbber::before {
    animation-duration: 2s;
  }
}

/* Hidden helper fields rendered by the Form API. */
.rate-page-form .form-item-overall-rating,
.rate-page-form .form-item-page-url,
.rate-page-form .form-item-page-title {
  display: none;
}

/* Thank you. */
.rate-page-panel__thank-you {
  padding: 12px 0;
  text-align: center;
}

.rate-page-panel__thank-you p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.2;
}

/* Dark theme. */
body._theme-dark .rate-page-block {
  --rate-page-bg: var(--color-bg);
  --rate-page-border: var(--color-border);
  --rate-page-text: var(--color-header);
  --rate-page-divider: rgba(255, 255, 255, 0.2);
  --rate-page-field-border: var(--controls-tertiary-border-inputs);
  --rate-page-star-empty: #4a4a4a;
}

/*
 * Below the "md" breakpoint the typo message bar is not fixed, so the card
 * flows with the bar instead of being docked to the viewport.
 */
@media (max-width: 991px) {
  .rate-page-block {
    position: static;
    width: 100%;
    max-width: 298px;
    margin-left: auto;
    border-radius: 4px;
  }
}