/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *
 *= require trix
*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

.trix-content pre {
  background-color: var(--color-ink) !important;
}

trix-editor {
  min-width: min(24rem, 100%);
  max-width: none;
  border-style: none !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
  color: var(--color-ink-light);
  font-size: 1rem;
  line-height: 1.75;
}

trix-editor:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: none;
}

trix-editor :where(p, ol, ul, blockquote, pre, table, figure) {
  margin-block: 1.25em;
}

trix-editor :where(h1, h2, h3, h4) {
  margin-block-start: 1.5em;
  margin-block-end: 0.5em;
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.25;
}

trix-editor :where(h1) {
  margin-block-start: 0;
  font-size: 2.25em;
  line-height: 1.1;
}

trix-editor :where(h2) {
  font-size: 1.5em;
}

trix-editor :where(h3) {
  font-size: 1.25em;
}

trix-editor :where(a) {
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: underline;
}

trix-editor :where(strong) {
  color: var(--color-ink);
  font-weight: 600;
}

trix-editor :where(ol, ul) {
  padding-inline-start: 1.625em;
}

trix-editor :where(ol) {
  list-style-type: decimal;
}

trix-editor :where(ul) {
  list-style-type: disc;
}

trix-editor :where(ol[type="A"]) { list-style-type: upper-alpha; }
trix-editor :where(ol[type="a"]) { list-style-type: lower-alpha; }
trix-editor :where(ol[type="I"]) { list-style-type: upper-roman; }
trix-editor :where(ol[type="i"]) { list-style-type: lower-roman; }

trix-editor :where(li) {
  margin-block: 0.5em;
  padding-inline-start: 0.375em;
}

trix-editor :where(blockquote) {
  border-inline-start: 0.25rem solid var(--color-border);
  padding-inline-start: 1em;
  color: var(--color-ink);
  font-style: italic;
  font-weight: 500;
}

trix-editor :where(code) {
  color: var(--color-ink);
  font-size: 0.875em;
  font-weight: 600;
}

trix-editor :where(pre) {
  overflow-x: auto;
  border-radius: var(--radius-md);
  background-color: var(--color-ink);
  padding: 0.875em 1.125em;
  color: var(--color-ink-inverted);
  font-size: 0.875em;
  line-height: 1.7;
}

trix-editor :where(pre code) {
  color: inherit;
  font: inherit;
}

trix-editor :where(table) {
  width: 100%;
  table-layout: auto;
  font-size: 0.875em;
  line-height: 1.7;
}

trix-editor :where(thead) {
  border-bottom: 1px solid var(--color-border-medium);
}

trix-editor :where(tbody tr) {
  border-bottom: 1px solid var(--color-border);
}

trix-editor :where(tbody tr:last-child) {
  border-bottom-width: 0;
}

trix-editor :where(th, td) {
  padding: 0.571em;
  text-align: start;
  vertical-align: baseline;
}

trix-editor :where(figure > *) {
  margin-block: 0;
}

trix-editor :where(figcaption) {
  margin-block-start: 0.875em;
  color: var(--color-ink-lighter);
  font-size: 0.875em;
  line-height: 1.4;
}

trix-editor :where(:first-child) {
  margin-block-start: 0;
}

trix-editor :where(:last-child) {
  margin-block-end: 0;
}

trix-toolbar .trix-button-group {
  margin-left: 0 !important;
}

trix-toolbar .trix-button-row .trix-button-group {
  border-radius: var(--radius-md);
  border-style: none;
}

trix-toolbar .trix-button-group button {
  width: 1.25rem;
  height: 1.25rem;
  border-style: none;
  padding-inline: 0.75rem;
}

trix-toolbar .trix-button-group button:hover {
  background-color: var(--color-surface-subtle);
}

trix-toolbar .trix-button-group #emoji-picker {
  margin-inline-end: 0.5rem;
  border-inline-start: 1px solid var(--color-border);
  padding-inline: 0;
}

.rich-text {
  max-inline-size: 65ch;
  color: var(--color-ink-light);
  font-size: 1rem;
  line-height: 1.75;
}

.rich-text--small {
  font-size: 0.875rem;
}

.rich-text--large {
  font-size: 1.125rem;
}

.rich-text--full {
  max-inline-size: none;
}

.rich-text > * + * {
  margin-block-start: 1rem;
}


.rich-text a {
  color: var(--color-link);
  text-decoration: underline;
}

.rich-text :where(ul, ol) {
  padding-inline-start: 1.5rem;
}

.rich-text ul {
  list-style: disc;
}

.rich-text ol {
  list-style: decimal;
}

.rich-text :where(blockquote) {
  border-inline-start: 0.25rem solid var(--color-border);
  padding-inline-start: 1rem;
  color: var(--color-ink-light);
  font-style: italic;
}

.rich-text :where(pre) {
  overflow-x: auto;
  border-radius: var(--radius-md);
  background-color: var(--color-ink);
  padding: 0.875rem 1rem;
  color: var(--color-ink-inverted);
}

.youtube-embed {
  margin-block: 1rem;
}

.youtube-embed__link {
  display: block;
}

.youtube-embed__media {
  position: relative;
  cursor: pointer;
}

.youtube-embed__thumbnail {
  inline-size: 100%;
  block-size: 12rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow 300ms ease;
}

.youtube-embed__link:hover .youtube-embed__thumbnail,
.youtube-embed__link:focus-visible .youtube-embed__thumbnail {
  box-shadow: var(--shadow-lg);
}

.youtube-embed__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.youtube-embed__play {
  border-radius: var(--radius-pill);
  padding: 1rem;
  background-color: rgb(var(--palette-black) / 0.7);
  transition: background-color 300ms ease;
}

.youtube-embed__link:hover .youtube-embed__play,
.youtube-embed__link:focus-visible .youtube-embed__play {
  background-color: rgb(var(--palette-black) / 0.8);
}

.youtube-embed__play-icon {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-ink-inverted);
}

.attachment-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.attachment-preview__placeholder {
  inline-size: 9rem;
}

.attachment-preview__actions {
  margin-block-start: 0.5rem;
}

.attachment-preview__delete {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: rgb(var(--palette-red-100));
  color: rgb(var(--palette-red-700));
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.attachment-preview__delete:hover {
  background-color: rgb(var(--palette-red-50));
}

.attachment-preview__delete:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.attachment-preview__delete:focus-visible {
  border-color: rgb(var(--palette-red-300));
  box-shadow: 0 0 0 3px rgb(var(--palette-red-300) / 0.5);
}

.attachment-preview__delete:active {
  background-color: rgb(var(--palette-red-200));
}

.attachment-preview__delete-icon {
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline-start: -0.25rem;
  margin-inline-end: 0.5rem;
}