/** Styles to match web platform */
ion-app.app-root core-format-text,
ion-app.app-root .item core-format-text,
ion-app.app-root core-rich-text-editor .core-rte-editor {
  @include core-headings();

  font-size: 1.4rem;

  p {
    margin-bottom: 1rem;
  }

  // Fix lists styles in core-format-text.
  ul {
    padding-left: 1rem;
  }
  ol {
    list-style-type: decimal;
  }
  ul, ol {
    -webkit-padding-start: 15px;
    ol {
      list-style-type: lower-latin;
    }
    ul, ol {
      @include margin(null, null, null, 15px);
    }
  }

  .badge {
    position: initial !important;
  }

  .core-disable-media-adapt,
  .core-disable-media-adapt .core-media-adapt-width {
    max-width: none !important;
    max-height: none !important;
    width: initial !important;
    height: initial !important;
    display: inline-block !important;
  }

  img.icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin-right: .5rem;
  }

  // Atto styles
  // -------------------------
  .atto_image_preview {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .atto_image_preview_box {
    max-height: 200px;
    margin-bottom: 1em;
    overflow: auto;
  }

  .editor_atto_content img {
    cursor: pointer;
  }

  .atto_image_size {
    display: inline-block;
  }

  .atto_image_size input[type=checkbox] {
    @include margin(null, 1em, null, 1em);
  }

  .atto_image_size input[type=text] {
    width: 3em;
  }

  .atto_image_size label {
    display: inline-block;
  }

  .atto_image_button_text-top,
  .atto_image_button_middle,
  .atto_image_button_text-bottom,
  .atto_image_button_left,
  .atto_image_button_right {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    width: auto;
    display: inline-block;
    margin: 0 0.5em;

    &.img-responsive {
      /* If the image is display: block then linking the image to URLs won't work. */
      /*display: inline-block;*/
      max-width: 100%;
      height: auto;
      width: auto;
    }
  }

  .atto_image_button_text-top {
    vertical-align: text-top;
  }

  .atto_image_button_middle {
    vertical-align: middle;
  }

  .atto_image_button_text-bottom {
    vertical-align: text-bottom;
  }

  /*rtl:begin:ignore*/
  .atto_image_button_left {
    @include float(start);
    @include margin(0, 0.5em, 0, 0);
  }

  .atto_image_button_right {
    @include float(end);
    @include margin(0, 0, 0, 0.5em);
  }
  /*rtl:end:ignore*/

  // Bootstrap 4 Styles
  // -------------------------
  .media {
    display: flex;
    align-items: flex-start;
  }

  .media-body {
    flex: 1;
  }

  .alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 0 solid transparent;
  }

  // Headings for larger alerts
  .alert-heading {
    // Specified to prevent conflicts of changing $headings-color
    color: inherit;
  }

  // Provide class for links that match alerts
  .alert-link {
    font-weight: 400;
  }

  @each $color-name, $color-base in get-colors($colors) {
    .alert-#{$color-name} {
      color: $color-base;
      border-color: $color-base;
      background-color: mix($color-base, white, 20%);

      .alert-link {
        color: darken($color-base, 10%);
      }
    }
    .alert-#{$color-name} p {
      color: $color-base;
    }
  }
}

// Special fixes
// -------------------------
ion-app.app-root {
  // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
  ion-card core-format-text img {
    width: min-content;
    display: inline;
  }

  .toolbar core-format-text {
    font-size: inherit;
  }
}