:root {
  /****************************************************************
  * Fixed Size
  *****************************************************************/
  --size-0_5: 0.125rem; /* 2px */
  --size-1:   0.25rem;  /* 4px */
  --size-1_5: 0.375rem; /* 6px */
  --size-2:   0.5rem;   /* 8px */
  --size-2_5: 0.625rem; /* 10px */
  --size-3:   0.75rem;  /* 12px */
  --size-3_5: 0.875rem; /* 14px */
  --size-4:   1rem;     /* 16px */
  --size-5:   1.25rem;  /* 20px */
  --size-6:   1.5rem;   /* 24px */
  --size-7:   1.75rem;  /* 28px */
  --size-8:   2rem;     /* 32px */
  --size-9:   2.25rem;  /* 36px */
  --size-10:  2.5rem;   /* 40px */
  --size-11:  2.75rem;  /* 44px */
  --size-12:  3rem;     /* 48px */
  --size-14:  3.5rem;   /* 56px */
  --size-16:  4rem;     /* 64px */
  --size-20:  5rem;     /* 80px */
  --size-24:  6rem;     /* 96px */
  --size-28:  7rem;     /* 112px */
  --size-32:  8rem;     /* 128px */
  --size-36:  9rem;     /* 144px */
  --size-40:  10rem;    /* 160px */
  --size-44:  11rem;    /* 176px */
  --size-48:  12rem;    /* 192px */
  --size-52:  13rem;    /* 208px */
  --size-56:  14rem;    /* 224px */
  --size-60:  15rem;    /* 240px */
  --size-64:  16rem;    /* 256px */
  --size-72:  18rem;    /* 288px */
  --size-80:  20rem;    /* 320px */
  --size-96:  24rem;    /* 384px */

  /****************************************************************
  * Percentual Size
  *****************************************************************/
  --size-1-2:   50%;
  --size-1-3:   33.333333%;
  --size-2-3:   66.666667%;
  --size-1-4:   25%;
  --size-2-4:   50%;
  --size-3-4:   75%;
  --size-1-5:   20%;
  --size-2-5:   40%;
  --size-3-5:   60%;
  --size-4-5:   80%;
  --size-1-6:   16.666667%;
  --size-2-6:   33.333333%;
  --size-3-6:   50%;
  --size-4-6:   66.666667%;
  --size-5-6:   83.333333%;
  --size-1-12:  8.333333%;
  --size-2-12:  16.666667%;
  --size-3-12:  25%;
  --size-4-12:  33.333333%;
  --size-5-12:  41.666667%;
  --size-6-12:  50%;
  --size-7-12:  58.333333%;
  --size-8-12:  66.666667%;
  --size-9-12:  75%;
  --size-10-12: 83.333333%;
  --size-11-12: 91.666667%;
  --size-full:  100%;

  /****************************************************************
  * Max Inline Sizes
  *****************************************************************/
  --max-i-3xs: 16rem; /* 256px */
  --max-i-2xs: 18rem; /* 288px */
  --max-i-xs:  20rem; /* 320px */
  --max-i-sm:  24rem; /* 384px */
  --max-i-md:  28rem; /* 448px */
  --max-i-lg:  32rem; /* 512px */
  --max-i-xl:  36rem; /* 576px */
  --max-i-2xl: 42rem; /* 672px */
  --max-i-3xl: 48rem; /* 768px */
  --max-i-4xl: 56rem; /* 896px */
  --max-i-5xl: 64rem; /* 1024px */
  --max-i-6xl: 72rem; /* 1152px */
  --max-i-7xl: 80rem; /* 1280px */

  /****************************************************************
  * Aspect Ratio
  *****************************************************************/
  --aspect-square: 1/1;
  --aspect-widescreen: 16/9;

  /****************************************************************
  * Breakpoints
  *****************************************************************/
  --breakpoint-sm:  40rem; /* 640px */
  --breakpoint-md:  48rem; /* 768px */
  --breakpoint-lg:  64rem; /* 1024px */
  --breakpoint-xl:  80rem; /* 1280px */
  --breakpoint-2xl: 96rem; /* 1536px */
}

:root {
  /* Abstractions */
  --color-bg: white;
  --color-text: black;
  --color-text-reversed: white;
  --color-text-subtle: var(--zinc-500);
  --color-link: var(--blue-700);
  --color-border-light: var(--zinc-100);
  --color-border: var(--zinc-200);
  --color-border-dark: var(--zinc-400);
  --color-selected: var(--blue-100);
  --color-selected-dark: var(--blue-300);

  /* Accent colors */
  --color-primary: var(--zinc-900);
  --color-secondary: var(--zinc-100);
  --color-negative: var(--red-600);
  --color-positive: var(--green-600);

  /* SVG color values */
  --color-filter-text: invert(0);
  --color-filter-text-reversed: invert(1);
  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
  --color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);
}

body {
  background: var(--color-positive) !important;
}
/*
 * 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;
}


/*
 * https://csszero.lazaronixon.com/lookbook/inspect/trix/default
*/
trix-toolbar {
  inset-block-start: 0;
  position: sticky;
  z-index: 100;
  .trix-button-row {
    background-color: var(--color-bg);
    border-block-width: 1px;
    padding-block: var(--size-1_5);
    gap: 1px;
  }
  .trix-button-group {
    border: 0 !important;
    margin: 0 !important;
    gap: 1px;
  }
  .trix-button {
    background-color: var(--color-bg);
    border: 0 !important;
    border-radius: var(--rounded-md);
    color: var(--color-text);
    &.trix-active {
      background-color: var(--color-secondary);
    }
    &.trix-button--icon::before {
      filter: var(--color-filter-text);
      opacity: 1;
    }
    &.trix-button--icon:disabled::before {
      opacity: 0.125;
    }
  }
  .trix-dialog {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--rounded-md);
    margin: var(--size-1);
    box-shadow: var(--shadow-md);
  }
  .trix-input--dialog {
    border-color: var(--color-border);
    background-color: var(--color-bg);
    margin: 0;
  }
  .trix-button--dialog {
    margin-inline-start: var(--size-1_5);
    background-color: var(--color-primary);
    color: var(--color-text-reversed);
  }
  @media (max-width: 768px) {
    .trix-button-group--history-tools { display: none; }
  }
}
trix-editor {
  border: 0;
  min-block-size: var(--size-72);
  padding-block: var(--size-6) var(--size-2);
  &:empty:not(:focus)::before {
    color: color-mix(in srgb, currentColor 50%, transparent);
  }
  [data-trix-mutable].attachment img,
  [data-trix-mutable].attachment--content,
  [data-trix-mutable].attachment--file {
    box-shadow: 0 0 0 2px var(--color-selected-dark);
  }
  .attachment__metadata {
    background-color: var(--color-border-light);
    color: var(--color-text);
  }
  &:focus-visible {
    outline: 0;
  }
}
.trix-content {
  & {
    line-height: var(--leading-7);
  }
  a {
    color: var(--color-link);
    text-decoration: underline;
  }
  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-8);
    margin-block-end: var(--size-6);
  }
  blockquote {
    border-inline-start: 2px solid var(--color-border);
    font-style: italic;
    margin: 0;
    padding-inline-start: var(--size-6);
    padding-inline-end: 0;
  }
  pre {
    background-color: var(--color-border-light);
    border-radius: var(--rounded-lg);
    font-family: var(--font-monospace-code);
    font-size: var(--text-sm);
    line-height: var(--leading-5);
    padding: var(--size-4);
  }
  ul {
    list-style-type: disc;
    margin-inline-start: var(--size-6);
  }
  ol {
    list-style-type: decimal;
    margin-inline-start: var(--size-6);
  }
  li {
    margin: 0;
  }
  img {
    display: inline;
  }
  action-text-attachment {
    display: contents;
  }
  .attachment:not(.attachment--file) {
    .attachment__caption { display: none; }
  }
  .attachment--file {
    color: var(--color--text);
    border: 1px solid var(--color-border);
  }
  .attachment__progress {
    background-color: var(--color-border-light);
    border-radius: var(--rounded-full);
    overflow: hidden;
    &::-webkit-progress-bar {
      background-color: var(--color-border-light);
    }
    &::-webkit-progress-value {
      background-color: var(--color-primary);
    }
    &::-moz-progress-bar {
      background-color: var(--color-primary);
    }
  }
}


.comment-form .trix-button-group--file-tools, .comment-form .trix-button--icon-link {
  display: none !important;
}