/* Button for "Choose file" input */
#input-bg-file-button {
  flex-basis: 100%;
}


/* Drop zone for dropped-in files */
.file-drop-zone {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgba(var(--main-brand-rgb), 0.2);
  color: var(--main-brand);

  font-family: var(--system-font-stack);
  font-weight: bold;

  margin: 0.5em auto;

  outline: 4px dashed var(--main-brand);
  outline-offset: -8px;
  user-select: none;
  transition: background-color 0.3s ease;
}

.file-drop-zone div {
  padding: 40px 12px;

  text-align: center;
}

.file-drop-zone.highlight {
  background-color: rgba(var(--main-brand-rgb), 0.4);
}


/* Fancy "OR" text */
.file-input-or {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;

  margin: 0.25em 0;

  text-align: center;
}

.file-input-or::before,
.file-input-or::after {
  content: "";

  flex: 1 0 15px;

  border-top: 3px solid var(--dark-color);
}

.file-input-or::before {
  margin-right: 15px;
}

.file-input-or::after {
  margin-left: 15px;
}


/* "Toggle All" / "Toggle Selected" buttons */
@media screen and (max-width: 475px) {
  #button-toggle,
  #button-toggle-all {
    display: none;
  }
}


/* Container for loaded posts */
.post-container {
  margin: 10px auto;

  font-variant-ligatures: none;
}

.post-container > * {
  position: relative;

  min-width: 265px;

  margin: 0 auto;

  /*
  // LINK ./scripts/pelicanizer.js#touch-action-none
  */
  touch-action: pan-y pinch-zoom;
}

.post-container > *:empty {
  display: flex;
  justify-content: center;
  align-items: center;

  height: clamp(330px, 40vh, 80vh);
}

/* Unpopulated child of post container */
.post-container > *:empty::after {
  /* NOTE Most of this is copied from the loader styles. */
  content: "";

  display: block;
  font-size: 8px;

  width: 60px;
  height: 60px;

  border: 8px solid rgba(255, 255, 255, 0.25);
  border-left-color: rgba(255, 255, 255, 1);
  border-radius: 9999px;

  animation: spin 0.955s infinite linear;
}

/* NOTE We have to reset certain elements' styles, or they won't look right */
.post-container a {
  font-weight: normal;

  transition: none;
}

.post-container button span {
  display: inline;

  margin: 0;
}


/* Resize handle for post container */
.resize-handle {
  --resize-handle-color-1-rgb: 169, 169, 169;
  --resize-handle-color-2-rgb: 105, 105, 105;
  --resize-handle-opacity: 0.5;

  --resize-handle-color-1: rgba(
    var(--resize-handle-color-1-rgb), var(--resize-handle-opacity)
  );
  --resize-handle-color-2: rgba(
    var(--resize-handle-color-2-rgb), var(--resize-handle-opacity)
  );

  --resize-handle-overhang: 5px;

  position: absolute;
  top: 0;
  right: calc(-1 * var(--resize-handle-overhang));

  background: repeating-linear-gradient(
    135deg,
    var(--resize-handle-color-1),
    var(--resize-handle-color-1) 10px,
    var(--resize-handle-color-2) 10px,
    var(--resize-handle-color-2) 20px
  );

  width: calc(var(--resize-handle-width, 15px) + var(--resize-handle-overhang));
  height: 100%;

  border-top-right-radius: var(--resize-handle-overhang);
  border-bottom-right-radius: var(--resize-handle-overhang);
}


/* Styles from Mastodon */
.invisible {
  display: inline-block;

  font-size: 0;
  line-height: 0;

  width: 0;
  height: 0;
}


/* Pelican letters */
.pelican-letter:not(.emoji) {
  transition: opacity 0.2s ease;
}

.post-container.preview.faint-letters .pelican-letter:not(.emoji) {
  transition: none;
}

.pelican-letter.hidden {
  opacity: 0.5;
}

.post-container.preview:not(.faint-letters) .pelican-letter.hidden {
  opacity: 0.5;
  color: transparent;
}

.post-container.preview:not(.faint-letters) .emoji.pelican-letter.hidden {
  opacity: 0;
}

/* NOTE Each theme has its own style for "faint" hidden letters */


/* Site watermark */
.watermark::after {
  content: "Made with pelicanizer.com";

  word-wrap: break-word;
}


/* Special text in error messages */
.error-text {
  background-color: rgba(178, 34, 34, 0.2);
  color: crimson;
}

.log-text {
  background-color: rgba(100, 149, 237, 0.2);
  color: mediumBlue;
}

.error-text,
.log-text {
  padding: 1em;

  border-radius: 0.25em;

  white-space: pre-wrap;
  word-break: break-all;
}

.error-text:empty::after,
.log-text:empty::after {
  content: "(empty)";

  opacity: 0.5;

  font-style: italic;
}


/* Extra Pelicanizer styles */
#pelicanizer-post-input {
  max-width: 640px;

  margin: 0 auto;
  margin-bottom: 1em;
}

#pelicanizer-selection-buttons {
  margin: 16px auto 32px;
}

#bgutil {
  width: 100%;
}

#bgutil-post-input {
  max-width: 540px;

  margin: 0 auto;
  margin-bottom: 1em;
}

#bgutil-choose-mode {
  margin: 1em auto;
}

#bgutil-canvas-container {
  --guideline-width: 12px;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  width: fit-content;

  margin: 10px auto;
}

#bgutil-canvas-container canvas {
  max-width: 100%;
  max-height: 70vh;

  box-shadow: 5px 5px 10px gray;

  user-select: none;
}

#bgutil-canvas-container #bgutil-overlay-fg {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  outline: var(--guideline-width) solid rgba(var(--main-brand-rgb), 0.75);
  outline-offset: calc(-1 * (var(--guideline-width) - 1px));

  user-select: none;
  touch-action: none;
}

#bgutil-canvas-container .guideline-horizontal {
  position: absolute;
  top: calc(50% - var(--guideline-width) / 2);
  left: 0;

  width: 100%;
  height: 0;

  border-top: var(--guideline-width) dotted rgba(var(--main-brand-rgb), 0.75);

  user-select: none;
  pointer-events: none;
}

#bgutil-canvas-container .guideline-vertical {
  position: absolute;
  top: 0;
  left: calc(50% - var(--guideline-width) / 2);

  width: 0;
  height: 100%;

  border-left: var(--guideline-width) dotted rgba(var(--main-brand-rgb), 0.75);

  user-select: none;
  pointer-events: none;
}

#bgutil-canvas-container #bgutil-overlay-fg:not([data-guideline-h]) ~ .guideline-horizontal,
#bgutil-canvas-container #bgutil-overlay-fg:not([data-guideline-v]) ~ .guideline-vertical {
  border: none;
}