:root {
  --nu-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
  --nu-shadow-soft: 6px 6px 12px #b8b9be, -6px -6px 12px #fff;
  --nu-shadow-inset: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
  --nu-shadow-check: inset 1px 2px 2px #b8b9be, inset -5px -2px 4px #fff;
  --nu-border: 1px solid #d1d9e6;

  --scroller-height: 475px;
  --post-width: 540px; /* A Tumblr thing */
  --custom-post-padding: 8px; /* can be customized, must be in px */
  --custom-post-padding-color: #dce0e6;

  --shadow-color: 0deg 0% 60%;
  --custom-post-shadow: 0 0.5px 2px 1px hsl(var(--shadow-color) / 0.15),
    0 1.85px 1.75px 0 hsl(var(--shadow-color) / 0.25), 0 2.25px 3px -0.15px hsl(var(--shadow-color) / 0.45);
}

*:focus-visible {
  outline: 2px solid #44476a;
}

/* Layout/General styles */
body {
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
  line-height: 1.5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  color: #44476a;
  background-color: #e6e7ee;

  --bg-size: 2.25;
  --bg-rotation: 0.125;
  --symbol-color: rgb(0, 0, 0, 0.06);
  background-image: linear-gradient(-2.5deg, #e6e6e6, transparent 30%, transparent 70%, #e6e7ee),
    repeating-linear-gradient(
      calc(var(--bg-rotation) * 0.25turn),
      transparent,
      transparent calc(var(--bg-size) * 8px),
      var(--symbol-color),
      var(--symbol-color),
      transparent calc(var(--bg-size) * 9px),
      transparent calc(var(--bg-size) * 16px)
    ),
    repeating-linear-gradient(
      calc(var(--bg-rotation) * 0.25turn + 0.25turn),
      transparent,
      transparent calc(var(--bg-size) * 8px),
      var(--symbol-color),
      var(--symbol-color),
      transparent calc(var(--bg-size) * 9px),
      transparent calc(var(--bg-size) * 16px)
    );
  background-attachment: fixed;
  background-size: 100% 100vh;
  background-size: 100% 100lvh;
}

header {
  h1 {
    font-weight: 700;
    font-size: 2rem;
  }
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: max-content;
  gap: 2rem;
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  a {
    text-decoration-color: #b8b9be;
    text-underline-offset: 2px;

    &:hover {
      text-decoration-color: unset;
    }
  }
}

/* Specific Styles */
.controls {
  .control-group {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .horizontal-group {
    display: flex;
    gap: 1rem;

    fieldset {
      width: 100%;
    }
  }

  .form-radio label,
  .form-checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 1.375rem;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 0;
    transition: all 0.2s ease;
    color: #44476a;
  }

  input[type="radio"],
  input[type="checkbox"] {
    opacity: 0;
    position: absolute;

    &:focus + label::before {
      outline: 1px solid #44476a;
    }
  }

  input[type="radio"] {
    & + label::before,
    & + label::after {
      content: " ";
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-block;
      position: absolute;
      left: 0;
      top: 3px;
      opacity: 0;
      padding: 1px;
      transition: opacity 100ms linear;
    }
    & + label::before {
      transition: outline 0.2s ease;
      outline: 1px solid transparent;
      box-shadow: var(--nu-shadow-check);
      opacity: 1;
    }
    &:checked + label::after {
      width: 8px;
      height: 8px;
      top: 7px;
      left: 4px;
      background-color: #31344b;
      border: 4px solid;
      padding: 1px;
      opacity: 1;
    }
  }

  input[type="checkbox"] {
    & + label::before,
    & + label::after {
      content: " ";
      display: inline-block;
      position: absolute;
      width: 15px;
      height: 15px;
      left: 0;
      top: 0;
      background-color: #d1d9e6;
      border: 1px solid #b1bcce;
      transition: all 0.2s ease;
      border-radius: 2px;
      box-shadow:
        inset 1px 2px 2px #b8b9be,
        inset -5px -2px 4px #fff;
    }
    & + label::after {
      content: "\2713";
      top: 0;
      text-align: center;
      color: #31344b;
      font-weight: 900;
      border: 0;
      opacity: 0;
    }
    &:checked + label::after {
      opacity: 1;
    }
  }

  button {
    width: 100%;
    padding: 0.75rem 0.8rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.55rem;
    font-weight: 700;
    background-color: #e6e7ee;
    box-shadow: var(--nu-shadow);

    &:active {
      box-shadow: var(--nu-shadow-inset);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.65;
      box-shadow: var(--nu-shadow-inset);
      color: #31344b;
      border-color: #e6e7ee;
    }
  }
}

#post-wrapper {
  height: auto;
  width: calc(var(--post-width) + 2 * var(--custom-post-padding));
  padding: var(--custom-post-padding);
  margin-inline: auto;
  background-color: var(--custom-post-padding-color);
  transition: all 200ms ease;
}

/* Custom post styles */
#post-wrapper.borderless {
  --custom-post-padding: 0px;
  --custom-post-padding-color: transparent;
  --custom-post-shadow: 0;
}

#post-wrapper.remove-header {
  header:has(#managed-icon__ds-badge-reblog-20) {
    display: none;

    & + div {
      border-radius: 8px 8px 0 0;
      overflow: clip;
    }
  }
}

#post-wrapper.remove-follow {
  .zn53i.EF4A5.r21y5 {
    display: none;
  }
}

#post-wrapper-inner {
  border-radius: 8px;
  background-color: white;
  max-width: var(--post-width);
  box-shadow: var(--custom-post-shadow);

  &:empty {
    padding-block: calc(2rem + 3.65rem / 2); /* Adds the height of the output link */
    text-align: center;
    &::after {
      font-style: italic;
      content: "(Post will appear here...)";
    }
  }
}

.post-preview {
  overflow-x: auto;
}

.post-output {
  overflow-x: auto;
}

#post-image-container {
  display: grid;
  place-items: center;

  &:empty {
    padding-block: calc(2rem + var(--custom-post-padding));
    text-align: center;
    &::after {
      font-style: italic;
      content: "(Output image will appear here...)";
    }
  }

  & .loader {
    padding-block: calc(2rem + 16px + 2px);
  }
}

.description {
  p {
    margin-bottom: 1rem;
  }
  ol {
    list-style: decimal;
  }
  ol li {
    font-feature-settings: unset;
    list-style-type: unset;
  }
  li {
    margin-bottom: 4px;
  }
  code {
    display: inline;
    font-size: 0.875rem;
    font-family: "Courier New", Courier, monospace;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    padding: 0.1em 0.2em;
  }
}

#svg-definitions {
  display: none;
}

/* Helper styles */
.container {
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}

.card {
  height: fit-content;
  padding: 1rem 1.5rem;
  background-color: #e6e7ee;
  border: 0.0625rem solid rgba(243, 247, 250, 0.05);
  box-shadow: var(--nu-shadow-soft);
  border-radius: 0.55rem;
}

.card-label {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  padding-bottom: 0.25rem;
}

.post-scroller {
  max-width: 100%;
  max-height: var(--scroller-height);
  margin-inline: auto;
  overflow: auto;
  scrollbar-gutter: stable;

  .post-output & {
    max-height: calc(var(--scroller-height) - 3.65rem); /* Adds the height of the output link */
  }
}

.button-icon {
  vertical-align: text-top;
}

.inline-icon {
  vertical-align: middle;
}

/* Element styles */
label {
  gap: 0.5rem;
  font-size: 0.875rem;
}

label:has(textarea) {
  display: grid;
}

textarea {
  resize: vertical;
  width: 100%;
  min-height: 4rem;
  max-height: 500px;
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: #44476a;
  background-color: #e6e7ee;
  background-clip: padding-box;
  border: 0.0625rem solid #d1d9e6;
  border-radius: 0.55rem;
  box-shadow: var(--nu-shadow-inset);
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;

  outline: unset;
  transition: border-color 200ms ease-in-out;

  &:focus-visible {
    border-color: #b8b9be;
  }
}

.readonly-textarea {
  min-height: unset;
  resize: none;
  margin-bottom: 0.75rem;
}

@media (width < 800px) {
  body {
    padding: 1rem;
  }
  main {
    grid-template-columns: 1fr;
  }
}

[aria-busy="true"]:not(input, select, textarea, html, form):before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 1ch;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
  background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: -0.125em;
}

/* Screen reader shenans */
.sr-only {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px 1px 1px 1px);
  /* maybe deprecated but we need to support legacy browsers */
  clip: rect(1px, 1px, 1px, 1px);
  /* modern browsers, clip-path works inwards from each corner */
  clip-path: inset(50%);
  /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
  white-space: nowrap;
}

/* Modifying other libraries */

.toastify {
  background: #e6e7ee;
  box-shadow: var(--nu-shadow);
  color: #44476a;
  border-radius: 0.55rem;
  border: 1px solid #d1d9e6;
}

.toast-close {
  color: #44476a;
}

/* Fixes */

/* Show all images */
.RoN4R,
.GmPch {
  visibility: visible !important;
}
/* Blaze */
.m5KTc:has([aria-label="Blaze"]) {
  display: none;
}

/* Remove post box shadow so custom one is the only one */
.FtjPK.r0etU {
  box-shadow: unset;
}