/*
 * Trix editor styles based on the Pico design tokens (light and dark aware).
 * See Action Text overwrites below.
*/

/*
 * Deliberately not positioned: the floating label of fields.css is absolute and
 * would be painted over by a positioned sibling that comes later in the DOM.
*/
.rich-text-field__frame {
  margin-bottom: 0;
  background-color: var(--pico-form-element-background-color);
  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.rich-text-field__frame:focus-within {
  border-color: var(--pico-form-element-active-border-color, var(--pico-primary));
  box-shadow: 0 0 0 var(--pico-outline-width, 0.125rem)
    var(--pico-form-element-focus-color, var(--pico-primary-focus));
}

/* The floating label follows the focus like the other fields in fields.css. */
.rich-text-field:focus-within > label {
  color: var(--pico-primary);
  transition: 0.3s ease;
}

trix-editor,
trix-toolbar {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

trix-editor {
  min-height: 10rem;
  max-height: 70vh;
  margin: 0;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  color: var(--pico-form-element-color);
  background-color: var(--pico-form-element-background-color);
  border: 0;
  outline: none;
  line-height: 1.55;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  resize: vertical;
}

.rich-text-field--basic trix-editor {
  min-height: 6.5rem;
}

/* Keep the mode group; hide the rest of the toolbar chrome while previewing. */
.rich-text-field.is-previewing .trix-button-group:not(.trix-button-group--mode-tools),
.rich-text-field.is-previewing .trix-button-group-spacer,
.rich-text-field.is-previewing trix-editor,
.rich-text-field.is-previewing > .rich-text-field__frame > input {
  display: none !important;
}

.rich-text-field.is-previewing .trix-dialogs {
  display: none;
}

.rich-text-field__preview {
  min-height: 10rem;
  max-height: 70vh;
  margin: 0;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  color: var(--pico-color);
  background-color: var(--pico-form-element-background-color);
  outline: none;
  line-height: 1.55;
  overflow-y: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rich-text-field--basic .rich-text-field__preview {
  min-height: 6.5rem;
}

.rich-text-field__preview-empty {
  margin: 0;
  color: var(--pico-muted-color);
  font-style: italic;
}

.rich-text-field__counter {
  display: block;
  margin: 0.2rem 0.15rem var(--pico-spacing);
  text-align: right;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  line-height: 1.2;
}

.rich-text-field__counter.is-over {
  color: var(--pico-del-color, #c62828);
  font-weight: 600;
}

.rich-text-field:not(:has(.rich-text-field__counter)) .rich-text-field__frame {
  margin-bottom: var(--pico-spacing);
}

/* Higher specificity than the default stylesheet Trix injects at runtime. */
.rich-text-field trix-editor:empty::before {
  color: var(--pico-muted-color);
}

/*
 * The top padding matches the one every Pico control uses, so the floating
 * label positioned by fields.css never lands on the buttons.
*/
trix-toolbar {
  padding: var(--pico-form-element-spacing-vertical) calc(var(--pico-spacing) * 0.4)
    calc(var(--pico-spacing) * 0.4);
  background-color: color-mix(
    in srgb,
    var(--pico-primary) 4%,
    var(--pico-form-element-background-color)
  );
  border-bottom: var(--pico-border-width) solid var(--pico-form-element-border-color);
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-group[hidden],
trix-toolbar .trix-button-group-spacer[hidden],
trix-toolbar .trix-button[hidden] {
  display: none !important;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  max-width: 100%;
}

trix-toolbar .trix-button-group {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0.125rem;
  border-radius: calc(var(--pico-border-radius) * 1.5);
  background: color-mix(in srgb, var(--pico-primary) 8%, transparent);
}

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

trix-toolbar .trix-button {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 2rem;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: calc(var(--pico-border-radius) * 1.25);
  background: transparent;
  color: var(--pico-primary);
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  outline: none;
  overflow: hidden;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:not(:disabled):hover {
  background: color-mix(in srgb, var(--pico-primary) 18%, transparent);
}

trix-toolbar .trix-button:not(:disabled):active {
  transform: scale(0.92);
}

trix-toolbar .trix-button:focus-visible {
  box-shadow: 0 0 0 var(--pico-outline-width, 0.125rem) var(--pico-primary);
}

trix-toolbar .trix-button.trix-active {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
}

trix-toolbar .trix-button:disabled {
  opacity: 0.3;
}

trix-toolbar .trix-button--icon {
  font-size: inherit;
  text-indent: -9999px;
}

trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  inset: 0;
  opacity: 0.9;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-row {
    gap: 0.25rem;
  }

  trix-toolbar .trix-button-group-spacer {
    display: none;
  }

  trix-toolbar .trix-button {
    width: 2rem;
    height: 1.9rem;
  }
}

trix-toolbar .trix-button--icon-attach::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  top: 8%;
  bottom: 4%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-bold::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l48%200%2016%200%20128%200c70.7%200%20128%2057.3%20128%20128c0%2031.3-11.3%2060.1-30%2082.3c37.1%2022.4%2062%2063.1%2062%20109.7c0%2070.7-57.3%20128-128%20128L96%20480l-16%200-48%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l16%200%200-160L48%2096%2032%2096C14.3%2096%200%2081.7%200%2064zM224%20224c35.3%200%2064-28.7%2064-64s-28.7-64-64-64L112%2096l0%20128%20112%200zM112%20288l0%20128%20144%200c35.3%200%2064-28.7%2064-64s-28.7-64-64-64l-32%200-112%200z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l48%200%2016%200%20128%200c70.7%200%20128%2057.3%20128%20128c0%2031.3-11.3%2060.1-30%2082.3c37.1%2022.4%2062%2063.1%2062%20109.7c0%2070.7-57.3%20128-128%20128L96%20480l-16%200-48%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l16%200%200-160L48%2096%2032%2096C14.3%2096%200%2081.7%200%2064zM224%20224c35.3%200%2064-28.7%2064-64s-28.7-64-64-64L112%2096l0%20128%20112%200zM112%20288l0%20128%20144%200c35.3%200%2064-28.7%2064-64s-28.7-64-64-64l-32%200-112%200z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-italic::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-58.7%200L160%20416l64%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l58.7%200L224%2096l-64%200c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-58.7%200L160%20416l64%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32s14.3-32%2032-32l58.7%200L224%2096l-64%200c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-link::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M579.8%20267.7c56.5-56.5%2056.5-148%200-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6%201.1c-14.4%2010.3-17.7%2030.3-7.4%2044.6s30.3%2017.7%2044.6%207.4l1.6-1.1c32.1-22.9%2076-19.3%20103.8%208.6c31.5%2031.5%2031.5%2082.5%200%20114L422.3%20334.8c-31.5%2031.5-82.5%2031.5-114%200c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4%206.9-34.4-7.4-44.6s-34.4-6.9-44.6%207.4l-1.1%201.6C206.5%20251.2%20213%20330%20263%20380c56.5%2056.5%20148%2056.5%20204.5%200L579.8%20267.7zM60.2%20244.3c-56.5%2056.5-56.5%20148%200%20204.5c50%2050%20128.8%2056.5%20186.3%2015.4l1.6-1.1c14.4-10.3%2017.7-30.3%207.4-44.6s-30.3-17.7-44.6-7.4l-1.6%201.1c-32.1%2022.9-76%2019.3-103.8-8.6C74%20372%2074%20321%20105.5%20289.5L217.7%20177.2c31.5-31.5%2082.5-31.5%20114%200c27.9%2027.9%2031.5%2071.8%208.6%20103.9l-1.1%201.6c-10.3%2014.4-6.9%2034.4%207.4%2044.6s34.4%206.9%2044.6-7.4l1.1-1.6C433.5%20260.8%20427%20182%20377%20132c-56.5-56.5-148-56.5-204.5%200L60.2%20244.3z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M579.8%20267.7c56.5-56.5%2056.5-148%200-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6%201.1c-14.4%2010.3-17.7%2030.3-7.4%2044.6s30.3%2017.7%2044.6%207.4l1.6-1.1c32.1-22.9%2076-19.3%20103.8%208.6c31.5%2031.5%2031.5%2082.5%200%20114L422.3%20334.8c-31.5%2031.5-82.5%2031.5-114%200c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4%206.9-34.4-7.4-44.6s-34.4-6.9-44.6%207.4l-1.1%201.6C206.5%20251.2%20213%20330%20263%20380c56.5%2056.5%20148%2056.5%20204.5%200L579.8%20267.7zM60.2%20244.3c-56.5%2056.5-56.5%20148%200%20204.5c50%2050%20128.8%2056.5%20186.3%2015.4l1.6-1.1c14.4-10.3%2017.7-30.3%207.4-44.6s-30.3-17.7-44.6-7.4l-1.6%201.1c-32.1%2022.9-76%2019.3-103.8-8.6C74%20372%2074%20321%20105.5%20289.5L217.7%20177.2c31.5-31.5%2082.5-31.5%20114%200c27.9%2027.9%2031.5%2071.8%208.6%20103.9l-1.1%201.6c-10.3%2014.4-6.9%2034.4%207.4%2044.6s34.4%206.9%2044.6-7.4l1.1-1.6C433.5%20260.8%20427%20182%20377%20132c-56.5-56.5-148-56.5-204.5%200L60.2%20244.3z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-strike::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M161.3%20144c3.2-17.2%2014-30.1%2033.7-38.6c21.1-9%2051.8-12.3%2088.6-6.5c11.9%201.9%2048.8%209.1%2060.1%2012c17.1%204.5%2034.6-5.6%2039.2-22.7s-5.6-34.6-22.7-39.2c-14.3-3.8-53.6-11.4-66.6-13.4c-44.7-7-88.3-4.2-123.7%2010.9c-36.5%2015.6-64.4%2044.8-71.8%2087.3c-.1%20.6-.2%201.1-.2%201.7c-2.8%2023.9%20.5%2045.6%2010.1%2064.6c4.5%209%2010.2%2016.9%2016.7%2023.9L32%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l448%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-209.9%200-.4-.1-1.1-.3c-36-10.8-65.2-19.6-85.2-33.1c-9.3-6.3-15-12.6-18.2-19.1c-3.1-6.1-5.2-14.6-3.8-27.4zM348.9%20337.2c2.7%206.5%204.4%2015.8%201.9%2030.1c-3%2017.6-13.8%2030.8-33.9%2039.4c-21.1%209-51.7%2012.3-88.5%206.5c-18-2.9-49.1-13.5-74.4-22.1c-5.6-1.9-11-3.7-15.9-5.4c-16.8-5.6-34.9%203.5-40.5%2020.3s3.5%2034.9%2020.3%2040.5c3.6%201.2%207.9%202.7%2012.7%204.3c0%200%200%200%200%200s0%200%200%200c24.9%208.5%2063.6%2021.7%2087.6%2025.6c0%200%200%200%200%200l.2%200c44.7%207%2088.3%204.2%20123.7-10.9c36.5-15.6%2064.4-44.8%2071.8-87.3c3.6-21%202.7-40.4-3.1-58.1l-75.7%200c7%205.6%2011.4%2011.2%2013.9%2017.2z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M161.3%20144c3.2-17.2%2014-30.1%2033.7-38.6c21.1-9%2051.8-12.3%2088.6-6.5c11.9%201.9%2048.8%209.1%2060.1%2012c17.1%204.5%2034.6-5.6%2039.2-22.7s-5.6-34.6-22.7-39.2c-14.3-3.8-53.6-11.4-66.6-13.4c-44.7-7-88.3-4.2-123.7%2010.9c-36.5%2015.6-64.4%2044.8-71.8%2087.3c-.1%20.6-.2%201.1-.2%201.7c-2.8%2023.9%20.5%2045.6%2010.1%2064.6c4.5%209%2010.2%2016.9%2016.7%2023.9L32%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l448%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-209.9%200-.4-.1-1.1-.3c-36-10.8-65.2-19.6-85.2-33.1c-9.3-6.3-15-12.6-18.2-19.1c-3.1-6.1-5.2-14.6-3.8-27.4zM348.9%20337.2c2.7%206.5%204.4%2015.8%201.9%2030.1c-3%2017.6-13.8%2030.8-33.9%2039.4c-21.1%209-51.7%2012.3-88.5%206.5c-18-2.9-49.1-13.5-74.4-22.1c-5.6-1.9-11-3.7-15.9-5.4c-16.8-5.6-34.9%203.5-40.5%2020.3s3.5%2034.9%2020.3%2040.5c3.6%201.2%207.9%202.7%2012.7%204.3c0%200%200%200%200%200s0%200%200%200c24.9%208.5%2063.6%2021.7%2087.6%2025.6c0%200%200%200%200%200l.2%200c44.7%207%2088.3%204.2%20123.7-10.9c36.5-15.6%2064.4-44.8%2071.8-87.3c3.6-21%202.7-40.4-3.1-58.1l-75.7%200c7%205.6%2011.4%2011.2%2013.9%2017.2z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-quote::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%20216C0%20149.7%2053.7%2096%20120%2096l8%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-8%200c-30.9%200-56%2025.1-56%2056l0%208%2064%200c35.3%200%2064%2028.7%2064%2064l0%2064c0%2035.3-28.7%2064-64%2064l-64%200c-35.3%200-64-28.7-64-64l0-32%200-32%200-72zm256%200c0-66.3%2053.7-120%20120-120l8%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-8%200c-30.9%200-56%2025.1-56%2056l0%208%2064%200c35.3%200%2064%2028.7%2064%2064l0%2064c0%2035.3-28.7%2064-64%2064l-64%200c-35.3%200-64-28.7-64-64l0-32%200-32%200-72z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%20216C0%20149.7%2053.7%2096%20120%2096l8%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-8%200c-30.9%200-56%2025.1-56%2056l0%208%2064%200c35.3%200%2064%2028.7%2064%2064l0%2064c0%2035.3-28.7%2064-64%2064l-64%200c-35.3%200-64-28.7-64-64l0-32%200-32%200-72zm256%200c0-66.3%2053.7-120%20120-120l8%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-8%200c-30.9%200-56%2025.1-56%2056l0%208%2064%200c35.3%200%2064%2028.7%2064%2064l0%2064c0%2035.3-28.7%2064-64%2064l-64%200c-35.3%200-64-28.7-64-64l0-32%200-32%200-72z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l48%200%2048%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-16%200%200%20112%20224%200%200-112-16%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l48%200%2048%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-16%200%200%20144%200%20176%2016%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-48%200-48%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l16%200%200-144-224%200%200%20144%2016%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-48%200-48%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l16%200%200-176L48%2096%2032%2096C14.3%2096%200%2081.7%200%2064z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l48%200%2048%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-16%200%200%20112%20224%200%200-112-16%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l48%200%2048%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-16%200%200%20144%200%20176%2016%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-48%200-48%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l16%200%200-144-224%200%200%20144%2016%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-48%200-48%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l16%200%200-176L48%2096%2032%2096C14.3%2096%200%2081.7%200%2064z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

/*
 * The three heading levels share a text face (H1/H2/H3) instead of an icon, so
 * they read as one group. Overrides the mask above.
*/
trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-button--icon-heading-2,
trix-toolbar .trix-button--icon-heading-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

trix-toolbar .trix-button--icon-heading-1::before,
trix-toolbar .trix-button--icon-heading-2::before,
trix-toolbar .trix-button--icon-heading-3::before {
  content: none;
}

trix-toolbar .trix-button--icon-code::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M392.8%201.2c-17-4.9-34.7%205-39.6%2022l-128%20448c-4.9%2017%205%2034.7%2022%2039.6s34.7-5%2039.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6%20120.1c-12.5%2012.5-12.5%2032.8%200%2045.3L562.7%20256l-89.4%2089.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l112-112c12.5-12.5%2012.5-32.8%200-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3%200zm-306.7%200c-12.5-12.5-32.8-12.5-45.3%200l-112%20112c-12.5%2012.5-12.5%2032.8%200%2045.3l112%20112c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L77.3%20256l89.4-89.4c12.5-12.5%2012.5-32.8%200-45.3z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M392.8%201.2c-17-4.9-34.7%205-39.6%2022l-128%20448c-4.9%2017%205%2034.7%2022%2039.6s34.7-5%2039.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6%20120.1c-12.5%2012.5-12.5%2032.8%200%2045.3L562.7%20256l-89.4%2089.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l112-112c12.5-12.5%2012.5-32.8%200-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3%200zm-306.7%200c-12.5-12.5-32.8-12.5-45.3%200l-112%20112c-12.5%2012.5-12.5%2032.8%200%2045.3l112%20112c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L77.3%20256l89.4-89.4c12.5-12.5%2012.5-32.8%200-45.3z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M40%2048C26.7%2048%2016%2058.7%2016%2072l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24L40%2048zM192%2064c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L192%2064zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zM16%20232l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24l-48%200c-13.3%200-24%2010.7-24%2024zM40%20368c-13.3%200-24%2010.7-24%2024l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24l-48%200z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M40%2048C26.7%2048%2016%2058.7%2016%2072l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24L40%2048zM192%2064c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L192%2064zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zm0%20160c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l288%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-288%200zM16%20232l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24l-48%200c-13.3%200-24%2010.7-24%2024zM40%20368c-13.3%200-24%2010.7-24%2024l0%2048c0%2013.3%2010.7%2024%2024%2024l48%200c13.3%200%2024-10.7%2024-24l0-48c0-13.3-10.7-24-24-24l-48%200z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-number-list::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M24%2056c0-13.3%2010.7-24%2024-24l32%200c13.3%200%2024%2010.7%2024%2024l0%20120%2016%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-80%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l16%200%200-96-8%200C34.7%2080%2024%2069.3%2024%2056zM86.7%20341.2c-6.5-7.4-18.3-6.9-24%201.2L51.5%20357.9c-7.7%2010.8-22.7%2013.3-33.5%205.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2%2072.3-35.6%2099.2-4.9c21.3%2024.4%2020.8%2060.9-1.1%2084.7L86.8%20432l33.2%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-88%200c-9.5%200-18.2-5.6-22-14.4s-2.1-18.9%204.3-25.9l72-78c5.3-5.8%205.4-14.6%20.3-20.5zM224%2064l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M24%2056c0-13.3%2010.7-24%2024-24l32%200c13.3%200%2024%2010.7%2024%2024l0%20120%2016%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-80%200c-13.3%200-24-10.7-24-24s10.7-24%2024-24l16%200%200-96-8%200C34.7%2080%2024%2069.3%2024%2056zM86.7%20341.2c-6.5-7.4-18.3-6.9-24%201.2L51.5%20357.9c-7.7%2010.8-22.7%2013.3-33.5%205.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2%2072.3-35.6%2099.2-4.9c21.3%2024.4%2020.8%2060.9-1.1%2084.7L86.8%20432l33.2%200c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024l-88%200c-9.5%200-18.2-5.6-22-14.4s-2.1-18.9%204.3-25.9l72-78c5.3-5.8%205.4-14.6%20.3-20.5zM224%2064l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zm0%20160l256%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-256%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-undo::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M48.5%20224L40%20224c-13.3%200-24-10.7-24-24L16%2072c0-9.7%205.8-18.5%2014.8-22.2s19.3-1.7%2026.2%205.2L98.6%2096.6c87.6-86.5%20228.7-86.2%20315.8%201c87.5%2087.5%2087.5%20229.3%200%20316.8s-229.3%2087.5-316.8%200c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200c62.5%2062.5%20163.8%2062.5%20226.3%200s62.5-163.8%200-226.3c-62.2-62.2-162.7-62.5-225.3-1L185%20183c6.9%206.9%208.9%2017.2%205.2%2026.2s-12.5%2014.8-22.2%2014.8L48.5%20224z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M48.5%20224L40%20224c-13.3%200-24-10.7-24-24L16%2072c0-9.7%205.8-18.5%2014.8-22.2s19.3-1.7%2026.2%205.2L98.6%2096.6c87.6-86.5%20228.7-86.2%20315.8%201c87.5%2087.5%2087.5%20229.3%200%20316.8s-229.3%2087.5-316.8%200c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200c62.5%2062.5%20163.8%2062.5%20226.3%200s62.5-163.8%200-226.3c-62.2-62.2-162.7-62.5-225.3-1L185%20183c6.9%206.9%208.9%2017.2%205.2%2026.2s-12.5%2014.8-22.2%2014.8L48.5%20224z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-redo::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M463.5%20224l8.5%200c13.3%200%2024-10.7%2024-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2%205.2L413.4%2096.6c-87.6-86.5-228.7-86.2-315.8%201c-87.5%2087.5-87.5%20229.3%200%20316.8s229.3%2087.5%20316.8%200c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200c-62.5%2062.5-163.8%2062.5-226.3%200s-62.5-163.8%200-226.3c62.2-62.2%20162.7-62.5%20225.3-1L327%20183c-6.9%206.9-8.9%2017.2-5.2%2026.2s12.5%2014.8%2022.2%2014.8l119.5%200z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M463.5%20224l8.5%200c13.3%200%2024-10.7%2024-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2%205.2L413.4%2096.6c-87.6-86.5-228.7-86.2-315.8%201c-87.5%2087.5-87.5%20229.3%200%20316.8s229.3%2087.5%20316.8%200c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200c-62.5%2062.5-163.8%2062.5-226.3%200s-62.5-163.8%200-226.3c62.2-62.2%20162.7-62.5%20225.3-1L327%20183c-6.9%206.9-8.9%2017.2-5.2%2026.2s12.5%2014.8%2022.2%2014.8l119.5%200z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064zM192%20192c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM0%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32zM.2%20268.6c-8.2-6.4-8.2-18.9%200-25.3l101.9-79.3c10.5-8.2%2025.8-.7%2025.8%2012.6l0%20158.6c0%2013.3-15.3%2020.8-25.8%2012.6L.2%20268.6z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064zM192%20192c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM0%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32zM.2%20268.6c-8.2-6.4-8.2-18.9%200-25.3l101.9-79.3c10.5-8.2%2025.8-.7%2025.8%2012.6l0%20158.6c0%2013.3-15.3%2020.8-25.8%2012.6L.2%20268.6z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064zM192%20192c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM0%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32zM127.8%20268.6L25.8%20347.9C15.3%20356.1%200%20348.6%200%20335.3L0%20176.7c0-13.3%2015.3-20.8%2025.8-12.6l101.9%2079.3c8.2%206.4%208.2%2018.9%200%2025.3z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M0%2064C0%2046.3%2014.3%2032%2032%2032l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%2096C14.3%2096%200%2081.7%200%2064zM192%20192c0-17.7%2014.3-32%2032-32l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32zm32%2096l192%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-192%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32zM0%20448c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20480c-17.7%200-32-14.3-32-32zM127.8%20268.6L25.8%20347.9C15.3%20356.1%200%20348.6%200%20335.3L0%20176.7c0-13.3%2015.3-20.8%2025.8-12.6l101.9%2079.3c8.2%206.4%208.2%2018.9%200%2025.3z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-mode-edit::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M471.6%2021.7c-21.9-21.9-57.3-21.9-79.2%200L362.3%2051.7l97.9%2097.9%2030.1-30.1c21.9-21.9%2021.9-57.3%200-79.2L471.6%2021.7zm-299.2%20220c-6.1%206.1-10.8%2013.6-13.5%2021.9l-29.6%2088.8c-2.9%208.6-.6%2018.1%205.8%2024.6s15.9%208.7%2024.6%205.8l88.8-29.6c8.2-2.7%2015.7-7.4%2021.9-13.5L437.7%20172.3%20339.7%2074.3%20172.4%20241.7zM96%2064C43%2064%200%20107%200%20160L0%20416c0%2053%2043%2096%2096%2096l256%200c53%200%2096-43%2096-96l0-96c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%2096c0%2017.7-14.3%2032-32%2032L96%20448c-17.7%200-32-14.3-32-32l0-256c0-17.7%2014.3-32%2032-32l96%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L96%2064z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M471.6%2021.7c-21.9-21.9-57.3-21.9-79.2%200L362.3%2051.7l97.9%2097.9%2030.1-30.1c21.9-21.9%2021.9-57.3%200-79.2L471.6%2021.7zm-299.2%20220c-6.1%206.1-10.8%2013.6-13.5%2021.9l-29.6%2088.8c-2.9%208.6-.6%2018.1%205.8%2024.6s15.9%208.7%2024.6%205.8l88.8-29.6c8.2-2.7%2015.7-7.4%2021.9-13.5L437.7%20172.3%20339.7%2074.3%20172.4%20241.7zM96%2064C43%2064%200%20107%200%20160L0%20416c0%2053%2043%2096%2096%2096l256%200c53%200%2096-43%2096-96l0-96c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%2096c0%2017.7-14.3%2032-32%2032L96%20448c-17.7%200-32-14.3-32-32l0-256c0-17.7%2014.3-32%2032-32l96%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L96%2064z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

trix-toolbar .trix-button--icon-mode-preview::before {
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M288%2032c-80.8%200-145.5%2036.8-192.6%2080.6C48.6%20156%2017.3%20208%202.5%20243.7c-3.3%207.9-3.3%2016.7%200%2024.6C17.3%20304%2048.6%20356%2095.4%20399.4C142.5%20443.2%20207.2%20480%20288%20480s145.5-36.8%20192.6-80.6c46.8-43.5%2078.1-95.4%2093-131.1c3.3-7.9%203.3-16.7%200-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5%2068.8%20368.8%2032%20288%2032zM144%20256a144%20144%200%201%201%20288%200%20144%20144%200%201%201%20-288%200zm144-64c0%2035.3-28.7%2064-64%2064c-7.1%200-13.9-1.2-20.2-3.3c-5.5-1.8-11.9%201.6-11.7%207.4c.3%206.9%201.3%2013.8%203.2%2020.7c13.7%2051.2%2066.4%2081.6%20117.6%2067.9s81.6-66.4%2067.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2%206.1-7.4%2011.7c2.1%206.3%203.3%2013.1%203.3%2020.2z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M288%2032c-80.8%200-145.5%2036.8-192.6%2080.6C48.6%20156%2017.3%20208%202.5%20243.7c-3.3%207.9-3.3%2016.7%200%2024.6C17.3%20304%2048.6%20356%2095.4%20399.4C142.5%20443.2%20207.2%20480%20288%20480s145.5-36.8%20192.6-80.6c46.8-43.5%2078.1-95.4%2093-131.1c3.3-7.9%203.3-16.7%200-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5%2068.8%20368.8%2032%20288%2032zM144%20256a144%20144%200%201%201%20288%200%20144%20144%200%201%201%20-288%200zm144-64c0%2035.3-28.7%2064-64%2064c-7.1%200-13.9-1.2-20.2-3.3c-5.5-1.8-11.9%201.6-11.7%207.4c.3%206.9%201.3%2013.8%203.2%2020.7c13.7%2051.2%2066.4%2081.6%20117.6%2067.9s81.6-66.4%2067.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2%206.1-7.4%2011.7c2.1%206.3%203.3%2013.1%203.3%2020.2z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat 50% 50%;
  mask-size: 20px;
}

/*
 * Icon sizing and coloring applied after the mask definitions above so the
 * active state can invert the icon color.
*/

trix-toolbar .trix-button--icon::before {
  inset: 0;
  -webkit-mask-size: 1.05rem;
  mask-size: 1.05rem;
  -webkit-mask-position: center;
  mask-position: center;
}

trix-toolbar .trix-button--icon.trix-active::before {
  background-color: var(--pico-primary-inverse);
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.6;
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: calc(var(--pico-spacing) * 0.35);
  left: 0;
  right: 0;
  font-size: 0.85rem;
  padding: calc(var(--pico-spacing) * 0.5);
  background: var(--pico-card-background-color, var(--pico-background-color));
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25));
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  width: auto;
  height: auto;
  font-size: inherit;
  font-weight: normal;
  padding: 0.45rem 0.65rem;
  margin: 0;
  color: var(--pico-form-element-color);
  background-color: var(--pico-form-element-background-color);
  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
trix-toolbar .trix-input--dialog:focus {
  border-color: var(--pico-primary);
}
trix-toolbar .trix-input--dialog.validate:invalid {
  border-color: var(--pico-del-color, #c62828);
  box-shadow: none;
}

trix-toolbar .trix-button--dialog {
  width: auto;
  height: auto;
  font-size: inherit;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  color: var(--pico-primary-inverse);
  background: var(--pico-primary);
  border: var(--pico-border-width) solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
}
trix-toolbar .trix-button--dialog:not(:disabled):hover {
  background: var(--pico-primary-hover);
  border-color: var(--pico-primary-hover);
}
trix-toolbar .trix-button--dialog[data-trix-method="removeAttribute"] {
  color: var(--pico-primary);
  background: transparent;
}
trix-toolbar .trix-button--dialog[data-trix-method="removeAttribute"]:not(:disabled):hover {
  background: color-mix(in srgb, var(--pico-primary) 15%, transparent);
  border-color: var(--pico-primary);
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
  min-width: 0;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
  padding: 0;
  gap: 0.35rem;
  background: transparent;
}

trix-toolbar .trix-dialog__link-meta {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

trix-toolbar .trix-dialog__link-preview {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--pico-muted-color, var(--pico-secondary));
  word-break: break-all;
}

trix-toolbar .trix-dialog__link-new-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  width: auto;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pico-color);
  cursor: pointer;
  background: transparent;
  border: 0;
}

trix-toolbar .trix-dialog__link-new-tab input {
  margin: 0;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

trix-toolbar .trix-dialog__link-new-tab:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1 1 100%;
  }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 1 1 100%;
  }
  trix-toolbar .trix-button--dialog {
    flex: 1;
  }
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
  background: none;
}

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight;
}

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: var(--pico-muted-color);
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: var(--pico-border-width) solid var(--pico-muted-border-color);
}
trix-editor .trix-button.trix-active {
  background: var(--pico-text-selection-color);
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: var(--pico-card-background-color, var(--pico-background-color));
  border: 2px solid var(--pico-primary);
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  content: "";
  background-color: var(--pico-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / 65%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / 65%;
}
trix-editor .trix-button--remove:hover {
  border-color: var(--pico-primary-hover);
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.7em 0 0.3em;
  color: var(--pico-color);
}
.trix-content h2 {
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.65em 0 0.25em;
  color: var(--pico-color);
}
.trix-content h3 {
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.35;
  margin: 0.55em 0 0.2em;
  color: var(--pico-color);
}
.trix-content h1:first-child,
.trix-content h2:first-child,
.trix-content h3:first-child {
  margin-top: 0;
}
.trix-content a {
  color: var(--pico-primary);
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}
.trix-content ul,
.trix-content ol {
  margin: 0.4em 0;
}
.trix-content blockquote {
  border: 0 solid var(--pico-primary);
  border-left-width: 0.25em;
  margin: 0.5em 0 0.5em 0.3em;
  padding-left: 0.7em;
  color: var(--pico-muted-color);
  font-style: italic;
}
.trix-content [dir="rtl"] blockquote,
.trix-content blockquote[dir="rtl"] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir="rtl"] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: var(--pico-font-family-monospace, monospace);
  font-size: 0.9em;
  margin: 0.5em 0;
  padding: 0.6em 0.8em;
  white-space: pre;
  color: var(--pico-code-color, var(--pico-color));
  background-color: var(
    --pico-code-background-color,
    color-mix(in srgb, var(--pico-muted-color) 12%, transparent)
  );
  border-radius: var(--pico-border-radius);
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " \2022 ";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: var(--pico-muted-color);
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: var(--pico-color);
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

/*
 * 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;
}