@layer components {

  .one-pager__title-edit {
    --block-padding: 1.5rem;
    margin-inline: calc(var(--block-padding) * -1);
    padding-inline: var(--block-padding) !important;
  }

  /* Containers
  /* ------------------------------------------------------------------------ */

  .one-pager-block {
    --bg-color: oklch(var(--lch-ink-inverted) / 0.33);
    --border: 1px solid var(--color-theme-light);
    --figure-size: 4.5em;
    --margin: 0.65lh; /* Same as text margins */
    --padding: 1.5rem;
    --radius: 0.5em;

    border-radius: var(--radius);
    margin-block-start: var(--margin);
    position: relative;
    text-align: start;
  }

  .one-pager-block--editing {
    border: 2px dashed var(--color-theme-light);
    margin-inline: calc(var(--padding) * -1);
    padding: var(--padding);

    trix-editor {
      border: none;
      min-block-size: auto;
      padding: 0;
    }

    &[aria-current='true'] {
      border: 2px solid var(--color-theme);

      .one-pager-block__action {
        opacity: 1;
      }
    }
  }

  /* Buttons
  /* ------------------------------------------------------------------------ */

  .one-pager-block__action {
    opacity: 0;
    position: absolute;
    z-index: 1;
  }

  .one-pager-block__add-details {
    inset: auto auto 0 50%;
    position: absolute;
    translate: -50% 50%;
  }

  .one-pager-block__add-btn {
    background-color: var(--color-theme);
    border: 0;
  }

  .one-pager-block__remove-btn,
  .one-pager-block__drag-btn {
    background-color: var(--color-body) !important;
    border: 2px solid var(--color-theme);
  }

  .one-pager-block__drag-btn {
    --btn-border-radius: 0.5em !important;

    background-color: var(--color-body);
    inset: 50% auto auto 0;
    translate: -50% -50%;

    .icon {
      font-size: 1.5em;
    }
  }

  .one-pager-block__remove-btn {
    background-color: var(--color-body);
    inset: 0 0 auto auto;
    translate: 50% -50%;
    z-index: 2;

    .one-pager-block__content & {
      background-color: var(--color-body) !important;
      border-width: 1px;
    }
  }

  /* Layout
  /* ------------------------------------------------------------------------ */

  .one-pager-block__content {
    color: inherit;
    inline-size: 100%;
    position: relative;
    text-decoration: none;
  }

  .one-pager-block__content--card {
    align-items: center;
    background-color: var(--bg-color);
    border: var(--border);
    border-radius: var(--radius);
    display: flex;
    gap: 1ch;
    padding: var(--padding);
    transition: border-color 300ms ease;

    > *:first-child {
      align-self: flex-start;
    }

    /* Remove card styles when editing (except for files) */
    .one-pager-block--editing:not(.one-pager-block--file_list) & {
      background: none;
      border: none;
      padding: 0;
    }
  }

  .one-pager-block__content--transparent {
    background: none;
  }

  /* Generic elements
  /* ------------------------------------------------------------------------ */

  .one-pager-block__description {
    font-size: var(--txt-medium);
    margin-block-start: var(--block-space-quarter);

    > *:first-child { margin-block-start: 0; }
    > *:last-child { margin-block-end: 0; }
  }

  .one-pager-block__figure {
    aspect-ratio: 1;
    background-color: var(--color-theme-lightest);
    block-size: var(--figure-size);
    border-radius: var(--input-border-radius, 0.3em);
    display: grid;
    flex-shrink: 0;
    inline-size: var(--figure-size);
    margin: 0;
    overflow: hidden;
    place-items: center;
    position: relative;

    > img {
      block-size: 100%;
      object-fit: cover;
    }

    .icon {
      --icon-size: 66%;
    }

    .one-pager-block__remove-btn {
      translate: 50%, -50%;
    }
  }

  /* Block: Text
  /* ------------------------------------------------------------------------ */

  .one-pager-block--text {
    .one-pager-block__content {
      border: none;
      padding: 0;
    }
  }

  /* Block: Events
  /* ------------------------------------------------------------------------ */

  .one-pager-block--calendar_event {
    /* The date input is, mysteriously, 1.6px shorter than the time inputs. */
    .input {
      block-size: 2.5em;
    }
  }

  .minical {
    align-self: flex-start;
    aspect-ratio: 1;
    border-radius: var(--input-border-radius, 0.3em);
    border: 2px solid var(--color-theme);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    inline-size: var(--figure-size);
    text-align: center;
  }

  .minical__month {
    background-color: var(--color-theme);
    color: var(--color-ink-inverted);
    padding: 2px 0;
    text-transform: uppercase;
  }

  .minical__day {
    font-size: 3ch;
    font-weight: 500;
  }

  .one-pager-block__calendar-segments {
    display: flex;
    flex-direction: column;
    font-size: var(--txt-medium);
    gap: 1ch;
    margin-block-end: var(--block-space-half);
    min-inline-size: 0;

    @media (min-width: 800px) {
      align-items: center;
      flex-direction: row;
    }
  }

  .one-pager-block__calendar-segment {
    align-items: center;
    display: grid;
    gap: 1ch;
    grid-template-columns: 56px 1fr;
    min-inline-size: 0;

    @media (min-width: 800px) {
      display: flex;
      flex: 1;
    }
  }

  .one-pager-block__calendar-segment-label {
    font-weight: 500;
    text-align: end;

    @media (min-width: 800px) {
      display: none !important;
    }
  }

  .one-pager-block__all-day-label {
    align-items: center;
    align-self: stretch;
    cursor: pointer;
    display: flex;
    gap: 0.5ch;
    white-space: nowrap;

    @media (max-width: 799px) {
      display: grid;
      gap: 1ch;
      grid-template-columns: 56px 1fr;

      .checkbox__label {
        grid-column-start: 1;
        grid-row-start: 1;
        text-align: end;
        font-weight: 500;
      }

      .checkbox__button {
        grid-column-start: 2;
      }
    }
  }

  .one-pager-block__calendar-hyphen {
    @media (max-width: 799px) {
      display: none !important;
    }
  }

  .one-pager-block--calendar-event-all-day {
    .one-pager-block__calendar-hide-when-all-day {
      display: none;
    }
  }

  .one-pager-block:not(.one-pager-block--calendar-event-all-day) {
    .one-pager-block__calendar-show-when-all-day {
      display: none;
    }
  }

  /* Block: Gallery
  /* ------------------------------------------------------------------------ */

  .one-pager-block--gallery {
    &:has(figure) {
      .file-upload__button {
        --btn-border-radius: 0.3em;
        aspect-ratio: 1;
      }
    }

    &:not(:has(figure)) {
      .file-upload__button { border-radius: 99rem; }
      .file-upload__label { display: inherit; }
    }

    .file-upload__button {
      border-radius: 0.33rem;
    }

    .file-upload__figure {
      transition: box-shadow 100ms ease, transform 100ms ease;

      &:hover,
      &[aria-selected='true'] {
        transform: scale(1.02);
      }
    }

  }

  .one-pager-block__gallery-images {
    --columns: 1;

    display: grid;
    gap: 1ch;
    grid-template-columns: repeat(var(--columns), 1fr);
    inline-size: 100%;

    &:has(> :nth-child(2):last-child) { --columns: 2; }
    &:has(> :nth-child(3):last-child) { --columns: 3; }
    &:has(> :nth-child(4):last-child) { --columns: 4; }
    &:has(> :nth-child(5)) { --columns: 5; }

    /* There's a hidden input in edit mode, so gotta add +1 to nth-child */
    .one-pager-block--editing & {
      &:has(> :nth-child(2):last-child) { --columns: 1; }
      &:has(> :nth-child(3):last-child) { --columns: 2; }
      &:has(> :nth-child(4):last-child) { --columns: 3; }
      &:has(> :nth-child(5):last-child) { --columns: 4; }
      &:has(> :nth-child(6)) { --columns: 5; }
    }
  }

  .one-pager-block-gallery--dragging,
  .one-pager-block-file-list--dragging {
    border-radius: 0.5em;
    box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  }

  .one-pager-block__gallery-remove-image,
  .one-pager-block__gallery-caption {
    display: inline-grid;
    position: absolute;
    opacity: 0;
    background-color: var(--color-body);
    pointer-events: none;
  }

  .one-pager-block__gallery-remove-image {
    inset-block-start: 0;
    inset-inline-end: 0;
    translate: 50% -50%;
  }

  .one-pager-block__gallery-caption {
    --btn-padding: 0.4em 0.8em;
    background: none;
    backdrop-filter: blur(20px);
    color: var(--color-ink-inverted);
    inset-block-end: 1em;
    inset-inline-start: 1em;
  }

  .one-pager-block__gallery-image-caption-editor {
    background-color: var(--color-body);
    grid-area: 1/1;
    padding: var(--inline-space-double);

    .lightbox__image {
      grid-area: none;
      max-inline-size: calc(100dvw - (var(--inline-space) * 10));
      max-block-size: calc(100dvh - (var(--block-space) * 10));
      margin: auto;
    }
  }

  .one-pager-block--gallery.one-pager-block--editing {
    .file-upload__figure {
      cursor: pointer;

      &:hover {
        box-shadow: 0 0 0 2px var(--color-theme-light);
      }

      &[aria-selected='true'] {
        box-shadow: 0 0 0 2px var(--color-theme);

        .one-pager-block__gallery-remove-image,
        .one-pager-block__gallery-caption {
          opacity: 1;
          pointer-events: initial;
        }
      }
    }
  }

  /* Block: Files
  /* ------------------------------------------------------------------------ */

  .one-pager-block__file-list {
    .one-pager-block__content:not(:last-child) {
      margin-block-end: var(--margin);
    }

    .file-upload__button { inline-size: 100%; }
    .file-upload__label { display: inherit; }

    .file-upload__preview {
      background-color: var(----bg-color);
      block-size: 4.5em;
      border: 1px solid var(--color-theme);
      border-block-end: 5px solid var(--color-theme);
      column-gap: var(--block-space) !important;
      inline-size: 4.5em;
      margin: var(--block-space) auto;
      position: relative;
    }

    .one-pager-block__remove-btn {
      translate: none;
    }
  }

  .one-pager-block__file-preview {
    display: flex;
    padding: var(--block-space-double) var(--inline-space-double);
    position: relative;

    img {
      display: none;
    }

    progress {
      inset: 50% auto auto 50%;
      max-inline-size: calc(100% - 20px);
      position: absolute;
      translate: -50% -50%;
    }
  }

  .one-pager-block__file-no-preview {
    font-weight: 900;
    text-transform: uppercase;
  }

  /* Block: FAQs
  /* ------------------------------------------------------------------------ */

  .one-pager-block__faq-entry {
    background-color: var(--bg-color);
    border: var(--border);
    position: relative;
    transition: all 150ms ease-out;

    &:first-child {
      border-start-start-radius: 0.5em;
      border-start-end-radius: 0.5em;
    }

    &:last-child {
      border-end-start-radius: 0.5em;
      border-end-end-radius: 0.5em;
    }

    /* Don't double up on borders */
    & + .one-pager-block__faq-entry {
      margin-block-start: -1px;
    }

    &:has(*:focus, *:focus-visible) {
      border-color: var(--color-theme);
      box-shadow: 0 0 0 1px var(--color-theme);
      z-index: 1;

      .one-pager-block__faq-label {
        color: var(--color-theme);
      }
    }
  }

  .one-pager-block__faq-question {
    --btn-border-radius: 0;
    --btn-padding: 0.5em 1em;
    --hover-size: 0;
    --input-padding: 0.5em 1em;

    font-weight: bold;

    &:not(.one-pager-block--editing &) {
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding: 1ch 1em;
    }
  }

  .one-pager-block__faq-arrow {
    transition: transform 150ms ease-out;

    [open] & {
      transform: scaleY(-1);
    }
  }

  .one-pager-block__faq-answer {
    padding: var(--btn-padding, 0 1em);
    padding-block-end: 0.75em;

    > *:first-child { margin-block-start: 0; }
    > *:last-child { margin-block-end: 0; }
  }

  /* Editing */
  .one-pager-block__faq-toolbar {
    display: flex;
    gap: var(--btn-gap, 0.3em);
    inset: 0.5em 0.5em auto auto;
    position: absolute;
    z-index: 1;
  }

  .one-pager-block__faq-label {
    color: var(--color-ink-light);
    font-weight: bold;
    padding-inline: 1em 0.5ch;

    .one-pager-block__faq-answer & {
      align-self: flex-start;
    }
  }

  .one-pager-block--faq.one-pager-block--editing {
    &:has(.one-pager-block__faq-entry:first-child:last-child) {
      button.delete {
        display: none;
      }
    }

    .one-pager-block__faq-question,
    .one-pager-block__faq-answer {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding-inline: 0;

      .input {
        padding-inline: 0;
      }
    }

    /* Make room for the (+)(x) buttons */
    .one-pager-block__faq-question {
      margin-inline-end: 3.5em;
    }
  }

  /* Block: Links
  /* ------------------------------------------------------------------------ */

  .one-pager-block--link {
    a {
      color: inherit;
    }
  }

  /* Block: Contacts
  /* ------------------------------------------------------------------------ */

  .one-pager-block--contact {
    .file-upload__button {
      border-radius: 0.33rem;
      inset: 0;
      position: absolute;
      z-index: 1;
    }

    .file-upload__figure {
      aspect-ratio: 1;
      block-size: var(--figure-size);
      inline-size: var(--figure-size);
      min-inline-size: var(--figure-size);
      object-fit: cover;
    }

    &:has(progress) {
      .file-upload__figure {
        block-size: 0px;
        overflow: hidden;
      }
    }

    &:not(:has(.one-pager-block__remove-btn)) {
      .file-upload__figure > img {
        background: transparent;
        transform: scale(0.5);
      }
    }
  }
}