/*
 * Words chosen, commented on (comment-quote.js): the Comment callout over
 * them, the box under them, and the words still shown chosen. In the
 * platform's colours where a page has them (--cc-*), the site's otherwise.
 */
.aws-quote {
	--q-bg: var(--cc-bg, var(--wp--preset--color--background, #fff));
	--q-ink: var(--cc-text, var(--wp--preset--color--ink, #201f1d));
	--q-accent: var(--cc-accent, var(--wp--preset--color--accent, #c33));
	--q-accent-ink: var(--cc-accent-700, var(--q-accent));
	--q-faint: var(--cc-faint, rgb(0 0 0 / 6%));
	--q-muted: var(--cc-muted, #6b6b6b);
	--q-line: var(--cc-divider, rgb(0 0 0 / 15%));
	box-sizing: border-box;
	color: var(--q-ink);
	font-family: inherit;
	position: fixed;
	z-index: 2147483000;
}

.aws-quote *,
.aws-quote *::before,
.aws-quote *::after { box-sizing: inherit; }

/* The callout: over the words, its point on them. */
/* Its own look whatever a site's buttons look like. */
button.aws-quote.aws-quote__pick { align-items: center; flex-direction: row; inline-size: auto; letter-spacing: normal; margin: 0; min-block-size: 0; min-inline-size: 0; text-transform: none; background: var(--q-bg); block-size: 30px; border: 1px solid var(--q-accent); border-radius: 8px; box-shadow: 0 4px 12px rgb(0 0 0 / 18%); color: var(--q-accent-ink); cursor: pointer; display: inline-flex; font-size: 13px; font-weight: 600; gap: 6px; line-height: 1; padding: 0 10px; white-space: nowrap; }
.aws-quote__pick[hidden] { display: none !important; }
.aws-quote__pick svg { display: block; flex: none; margin: 0; }
.aws-quote__pick:hover { background: linear-gradient(var(--q-faint), var(--q-faint)), var(--q-bg); }
.aws-quote__pick::after,
.aws-quote__box::before { background: inherit; block-size: 9px; border: solid var(--q-accent); content: ""; inline-size: 9px; inset-inline-start: calc(var(--aws-quote-point, 50%) - 5px); position: absolute; transform: rotate(45deg); }
.aws-quote__pick::after { border-width: 0 1px 1px 0; inset-block-end: -5.5px; }
.aws-quote__pick.is-below::after { border-width: 1px 0 0 1px; inset-block: -5.5px auto; }

/* The box: under the words, pointing up at them. */
.aws-quote__box { background: var(--q-bg); border: 1px solid var(--q-accent); border-radius: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / 18%); display: grid; font-size: 15px; gap: 8px; inline-size: min(360px, calc(100vw - 16px)); padding: 8px; }
.aws-quote__box::before { border-width: 0 1px 1px 0; inset-block-end: -5.5px; }
.aws-quote__box.is-below::before { border-width: 1px 0 0 1px; inset-block: -5.5px auto; }
.aws-quote__quoted { border-inline-start: 3px solid var(--q-line); color: var(--q-muted); font-size: 13px; font-style: italic; margin: 0; max-block-size: 4.5em; overflow: hidden; padding-inline-start: 8px; }
.aws-quote__box textarea { background: var(--q-bg); border: 1px solid var(--q-line); border-radius: 6px; color: var(--q-ink); font: inherit; inline-size: 100%; padding: 6px 8px; resize: vertical; }
.aws-quote__box textarea:focus { border-color: var(--q-accent); outline: none; }
.aws-quote__said { color: var(--q-accent-ink); font-size: 12px; margin: 0; }
.aws-quote__said:empty { display: none; }
.aws-quote__does { display: flex; gap: 6px; justify-content: flex-end; }
.aws-quote .aws-quote__does button { inline-size: auto; letter-spacing: normal; margin: 0; min-inline-size: 0; text-transform: none; background: var(--q-bg); border: 1px solid var(--q-line); border-radius: 6px; color: var(--q-ink); cursor: pointer; font: inherit; font-size: 13px; padding: 5px 12px; }
.aws-quote__does button[type="submit"] { border-color: var(--q-accent); color: var(--q-accent-ink); }
.aws-quote__does button:hover:not(:disabled) { background: linear-gradient(var(--q-faint), var(--q-faint)), var(--q-bg); }
.aws-quote__does button:disabled { opacity: .6; }

/* The words it was opened from, still shown chosen. */
::highlight(aws-quote) { background-color: Highlight; color: HighlightText; }

/* At the top of a comment made from words chosen: the words, quoted. */
:is(.aws-support__msg-body, .aws-say__body) > blockquote:first-child { border-inline-start: 3px solid var(--cc-divider, rgb(0 0 0 / 15%)); color: var(--cc-muted, #6b6b6b); font-size: .9em; font-style: italic; margin: 0 0 .4em; padding-inline-start: 8px; }