$font-family-sans-serif: // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

$enable-rounded: false;

@import 'bootstrap/scss/bootstrap';

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./bootstrap-icons.woff2") format("woff2"),
    url("./bootstrap-icons.woff") format("woff");
}

@import 'bootstrap-icons/font/bootstrap-icons';


.rails-bootstrap-forms-date-select select,
.rails-bootstrap-forms-time-select select,
.rails-bootstrap-forms-datetime-select select {
  display: inline-block;
  width: auto;
}

.rails-bootstrap-forms-error-summary {
  margin-top: 10px;
}


@import "trix/dist/trix";

/*
 * 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;
}


/* Fix trix dark mode */
.trix-button-row {
  .trix-button-group {
    border: var(--bs-border-width) solid var(--bs-border-color);

    .trix-button {
      border: 0;
      padding: var(--bs-padding)
    }
  }
}

[data-bs-theme=dark] {
  .trix-button-row {
    .trix-button-group {
      .trix-button {
        background-color: transparent !important;
        filter: invert(100%) !important;
      }
    }
  }
}

/* end fix trix dark mode */

.trix-content {
  pre {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-radius: 0 !important;
  }

  p {
    margin-bottom: 0.6rem;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

trix-toolbar .trix-dialog {
  background: var(--bs-secondary-bg) !important;
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  border-radius: 0 !important;
  box-shadow: none;
  font-size: 1.1rem;
}

trix-toolbar .trix-button {
  background: var(--bs-secondary-bg) !important;
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  border-radius: 0 !important;

}

trix-toolbar .trix-input--dialog {
  background: var(--bs-secondary-bg) !important;
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-secondary-color) !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  border-radius: 0 !important;
}

trix-toolbar .trix-dialog--link {
  max-width: 900px;
}