/* Despite the name this is mostly small components, so it belongs in the app
   layer rather than utilities: putting it last would let the bare
   `turbo-frame` rule below outrank the more specific one in feeds.css.
   `.text-muted-soft` carries its own !important and wins either way. */
@layer app {
  /* ============================================================
     Misc app-wide pieces
     ============================================================ */

  .text-muted-soft {
    color: color-mix(in srgb, var(--color-dark) 50%, transparent) !important;
  }

  .display-contents {
    display: contents;
  }

  turbo-frame[role="presentation"] {
    display: contents;
  }

  .divider-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: color-mix(in srgb, var(--color-dark) 40%, transparent);
    font-size: 0.875rem;

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: color-mix(in srgb, var(--color-dark) 10%, transparent);
    }
  }

  .toggler--toggled {
    .toggler__visible-when-off {
      display: none;
    }

    .toggler__visible-when-on {
      display: unset;
    }
  }

  .toggler__visible-when-on {
    display: none;
  }
}