@import "~quill-better-table/dist/quill-better-table.css";
@import "~quill/dist/quill.snow.css";
@import "~quill/dist/quill.core.css";

.rc-viewer-container {
  max-width: 256px;
  margin: auto;
}

.d-contents {
  display: contents;
}

.full-width {
  width: 100%;
}

.disabled {
  color: rgba(var(--ion-color-medium-rgb), 0.2) !important;
}

// MENU - NEW COMPONENT
.menu-item {
  ion-label.menu-item-label {
    white-space: normal;
  }
}

.menu-item.selected > ion-item {
  --background: var(--ion-color-primary);
  --color: var(--ion-color-light);
}
.menu-item.selected > ion-item > ion-button {
  --color: var(--ion-color-light);
}

menu-item-viewer {
  .subitems {
    ion-item {
      ion-label {
        // padding-left: 16px;
      }
    }
    background-color: var(--ion-color-primary);
  }
}

// MENU - THESE RULES ARE CURRENTLY IN USE BY THE "TREE NODE" MENU
.menu-label {
  --background: none;
  height: 100%;
  white-space: pre-wrap !important;
}

.menu-label:hover {
  cursor: pointer;
  // color: var(--ion-color-white);
  // background: var(--ion-color-primary);

  // ion-icon {
  //   color: var(--ion-color-white);
  // }
}

.menu-label:hover ~ .sub-item {
  display: block;
  cursor: pointer;
}

.sub-item:hover {
  display: block;
}

.menu-card {
  margin-top: 16px;
}

.editor-card {
  height: calc(
    100vh - 20px - 57px - 20px - 64px
  ); //TOTAL - TOP MARGIN - HEADER HEIGHT - BOTTOM MARGIN - FOOTER HEIGHT
  padding-bottom: 20px;
}

.editor-content {
  --background: none;
  --offset-bottom: -58px !important; // THIS IS THE ION-CARD-HEADER HEIGHT//NEEDED SO THAT <ion-content> DISPLAYS SCROLLABLE FULL HEIGHT WHEN INSIDE  <ion-card-content>
}

.editor-card-header {
  box-shadow: 0px 0px 1px var(--ion-color-dark);
  padding: 0;
  z-index: 2;
  ion-title {
    cursor: default;
    padding-inline-end: 0;
  }
  div[slot="end"] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap-reverse;
    max-width: 60%;
    ion-button {
      --padding-start: 0.3em;
      --padding-end: 0.3em;
    }
  }
}

.editor-card-content {
  display: contents;
}

.editor-subcard-header {
  box-shadow: 0px 0px 4px var(--ion-color-dark);
  z-index: 2;
}

.ng-tooltip {
  position: absolute;
  max-width: 150px;
  font-size: 14px;
  text-align: center;
  color: var(--ion-color-primary);
  padding: 3px 8px;
  background: var(--ion-color-tertiary);
  border-radius: 4px;
  z-index: 1000;
  opacity: 0;
}
.ng-tooltip-show {
  opacity: 1;
}

.editor-footer {
  position: fixed;
  bottom: 0px;
  right: 0px;
  max-width: calc(100% - 400px);
}

.things-list-header {
  border-radius: 0px;
}

base-resources-list {
  display: contents;
}

// MODALS
ion-modal.text-editor {
  --width: 70%;
  --height: 90%;
  ion-content {
    --background: var(--ion-color-light);
    --color: var(--ion-color-dark);
  }
}

ion-modal.resource-viewer {
  --width: 90%;
  --height: 90%;
}

ion-modal.asset-viewer {
  &.bottom {
    align-items: flex-end;
  }

  --height: auto;

  .ion-page {
    position: relative;
    display: block;
    contain: content;
  }
}

//CENTERING DIVS IN PAGES
[center] {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  user-login {
    max-width: 500px;
  }
}

ion-modal.login-modal {
  &.bottom {
    align-items: flex-end;
  }
  --border-radius: 10px;
  --height: auto;
  padding: 16px;

  .ion-page {
    position: relative;
    display: block;
    contain: content;

    .inner-content {
      max-height: 80vh;
      overflow: auto;
      // padding: 16px;
    }
  }
}

.color-danger {
  color: var(--ion-color-danger);
}

.background-color-primary {
  background-color: var(--ion-color-primary);
  color: var(--ion-color-primary-contrast);
}

.background-color-secondary {
  background-color: var(--ion-color-secondary);
  color: var(--ion-color-secondary-contrast);
}

.background-color-tertiary {
  background-color: var(--ion-color-tertiary);
  color: var(--ion-color-tertiary-contrast);
}

.background-color-success {
  background-color: var(--ion-color-success);
  color: var(--ion-color-success-contrast);
}

.background-color-warning {
  background-color: var(--ion-color-warning);
  color: var(--ion-color-warning-contrast);
}

.background-color-danger {
  background-color: var(--ion-color-danger);
  color: var(--ion-color-danger-contrast);
}

.background-color-light {
  background-color: var(--ion-color-light);
  color: var(--ion-color-light-contrast);
}

.background-color-medium {
  background-color: var(--ion-color-medium);
  color: var(--ion-color-medium-contrast);
}

.background-color-dark {
  background-color: var(--ion-color-dark);
  color: var(--ion-color-dark-contrast);
}

.background-color-accent {
  background-color: var(--ion-color-accent);
  color: var(--ion-color-accent-contrast);
}

.ion-alert-checkbox-label-white-space-normal {
  .alert-checkbox-label {
    white-space: normal;
  }
}

.ion-select-colors {
  .select-interface-option ion-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75%;
    margin-right: 8px;
  }

  .select-interface-option:first-child ion-label {
    background: var(--ion-color-primary);
    color: var(--ion-color-primary-contrast);
  }

  .select-interface-option:nth-child(2) ion-label {
    background: var(--ion-color-secondary);
    color: var(--ion-color-secondary-contrast);
  }

  .select-interface-option:nth-child(3) ion-label {
    background: var(--ion-color-tertiary);
    color: var(--ion-color-tertiary-contrast);
  }

  .select-interface-option:nth-child(4) ion-label {
    background: var(--ion-color-success);
    color: var(--ion-color-success-contrast);
  }

  .select-interface-option:nth-child(5) ion-label {
    background: var(--ion-color-warning);
    color: var(--ion-color-warning-contrast);
  }

  .select-interface-option:nth-child(6) ion-label {
    background: var(--ion-color-danger);
    color: var(--ion-color-danger-contrast);
  }

  .select-interface-option:nth-child(7) ion-label {
    background: var(--ion-color-light);
    color: var(--ion-color-light-contrast);
  }

  .select-interface-option:nth-child(8) ion-label {
    background: var(--ion-color-medium);
    color: var(--ion-color-medium-contrast);
  }

  .select-interface-option:nth-child(9) ion-label {
    background: var(--ion-color-dark);
    color: var(--ion-color-dark-contrast);
  }

  .select-interface-option:nth-child(10) ion-label {
    background: var(--ion-color-accent);
    color: var(--ion-color-accent-contrast);
  }
}

// ion-modal.list-modal {
// justify-content: center;
// }

// QUILL - Needed to style Quill according to theme

.ql-toolbar.ql-snow {
  border: none !important;
}

.ql-container.ql-snow {
  border: none !important;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: var(--ion-color-primary) !important;
}

.ql-snow .ql-picker {
  color: var(--ion-color-primary) !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: var(--ion-color-primary) !important;
}
.ql-snow .ql-toolbar.snow,
.ql-snow .ql-stroke {
  stroke: var(--ion-color-primary) !important;
}

ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: var(--ion-color-medium) !important;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: var(--ion-color-medium) !important;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-mitter,
.ql-snow .ql-toolbar button:hover .ql-stroke-mitter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-mitter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-mitter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-mitter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-mitter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-mitter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-mitter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-mitter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-mitter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-mitter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-mitter {
  stroke: var(--ion-color-medium) !important;
}

ion-input {
  --padding-start: 8px !important; //Because some ion-inputs inside recursive forms are not padded
}

//Because stacked labels are not entirely visible when used with ion-inputs
//(from a certain CRUMS version onwards, could not find exactly what version, on crums 0.0.134 was fine)
ion-label.label-stacked {
  margin-bottom: 8px !important;
}

user-detail-search-input {
  .searchbar-input {
    padding-left: 40px !important;
    padding-right: 35px !important;
  }
}

.no-padding-vertical {
  --padding-top: 0;
  --padding-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.no-padding-horizontal {
  --padding-start: 0;
  --padding-end: 0;
  padding-left: 0;
  padding-right: 0;
}

.no-margin-vertical {
  --margin-top: 0;
  --margin-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.no-margin-horizontal {
  --margin-start: 0;
  --margin-end: 0;
  margin-left: 0;
  margin-right: 0;
}

.user-list-filters-popover {
  --backdrop-opacity: 0;

  @media only screen and (min-width: 768px) {
    --width: 500px;
  }
}

icu-diary-viewer .diary-entry-text {
  pre {
    white-space: pre-wrap;
  }

  p {
    margin: 0;
  }
}

// A slightly taller(?) modal for decent screen sizes
@media only screen and (min-width: 768px) and (min-height: 600px) {
  .consent-viewer-modal .modal-wrapper,
  .form-scheduler-modal .modal-wrapper {
    height: 75%;
  }
}

//Remove quill editor paddings from snow theme on the help article viewer
.helpArticleViewer .ql-editor {
  padding: 0px 0px;
}

[debug] {
  display: none;
  color: #ff0000;
  font-family: monospace;
  font-size: 0.75rem;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  z-index: 99999;
}

//Clickable text (resource modals) on quill view
span.resource-modal {
  cursor: pointer;
  background-color: lightgrey;
}

.card-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: smaller;
}

.has-card-footer {
  padding-bottom: 40px;
}