/**
 * CSS for EPI framework
 *
 * This provides common CSS for projects using this framwork and is entirely
 * optional.
 *
 * Prescribed format/ordering of CSS:
 *   - CSS custom properties (variables) placed first.
 *   - "Containers" section placed second. Remaining sections should be ordered
 *     alphabetically for easier searching.
 *   - Begin and close each section with comments containing the section name,
 *     e.g. Containers, Forms, Navigation, etc.
 *   - Within each section, the rules (selector + declaration group) should be
 *     ordered according to CSS specificity with type selectors (e.g. div)
 *     first, followed by class selectors (e.g. .example), and lastly ID
 *     selectors (e.g. #test).
 *   - Within each rule, order the properties alphabetically, e.g. font-family
 *     before font-size, height before width, etc.
 *   - Use rem instead of em for easier resolving of final sizes.
 *   - In view of accessiblity and zooming, try to use em or rem instead of px,
 *     especially for typography. See
 *     https://chiamakaikeanyi.dev/sizing-in-css-px-vs-em-vs-rem/ for more info.
 *
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
 * @link https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 */

/* BEGIN: Containers */
html,
body {
  /* When using rem units, note that Bootstrap default font-size is 16px */
  margin: 0;
  padding: 0;
}
/* CLOSE: Containers */


/* BEGIN: Alerts (including modals, popovers and session messages) */
.alert {
  padding: 0.5rem 1rem;
  word-break: break-word;
  word-wrap: break-word;
}
.alert.alert-dismissible {
  padding: 0.5rem 2rem 0.5rem 1rem; /* extra right padding so that message does not overlap close button */
}

.alert .btn-close {
  font-size: 0.8rem;
  padding: 0.8rem;
}

[data-session-messages] {
  display: none;
}

#shared-modal hr.divider {
  /* This divider stretches to the left/right edges of the modal, no effect if not in modal */
  margin-left: -1rem;
  width: calc(100% + 2rem); /* based on .modal-body padding in Bootstrap */
}

#shared-modal .modal-description {
  margin-top: 0.5rem;
  padding: 0 1rem;
}

#shared-modal .modal-error {
  color: red;
  padding: 0 1rem;
}

#shared-modal .modal-error .alert {
  margin-bottom: 0;
  margin-top: 1rem;
}
/* CLOSE: Alerts */


/* BEGIN: Forms */
.form-switch .form-check-input[name="is_active"] + label::after {
  /* Change label of is_active switch based on its state, without use of JavaScript */
  /* Placed here and not in style.css cos this is kind of programmatic */
  content: 'Inactive';
}

.form-switch .form-check-input[name="is_active"]:checked + label:after {
  content: 'Active';
}
/* CLOSE: Forms */


/* BEGIN: Navigation */
.navbar .dropdown-item.nav-link span { /* shift menu item labels down a bit when displayed beside Bootstrap Icons */
  margin-top: 0.25rem;
  padding: 0 0 0 0.25rem;
}
/* CLOSE: Navigation */


/* BEGIN: Utility Classes */
a.hidden-link,
a.hidden-link:hover {
  color: transparent;
}

.border-transparent {
  border-color: transparent;
}

.clickable {
  /* adding role="button" to an element will change the cursor to pointer also but not guaranteed */
  cursor: pointer;
}

.color-transparent {
  color: transparent;
}

.hover {
  /* This class is toggled on dropzone by public/js/upload-handler.js as :hover does not work when dragging files in */
  filter: brightness(85%);
}
/* END: Utility Classes */