@import 'partials/variables';

body {
  // Prevent iPhone from rendering huge text when the page is scaled way down
  -webkit-text-size-adjust: none;
}

// Show not-allowed cursor on all links
a[href] {
  cursor: not-allowed;
}

// Hide the ghost container when dragging embeds
.mce-drag-container {
  display: none !important;
}

// Inline boundaries for code and links
a[data-mce-selected],
code[data-mce-selected] {
  outline: dotted 1px currentColor;
}

// Image selections
img[data-mce-selected] {
  outline: none !important;
}

// HR selections
hr[data-mce-selected] {
  outline: none !important;
}

// Content regions
[data-postleaf-region] {
  // Don't disappear when empty
  min-width: 1rem;
  min-height: 1rem;

  // Disable focus ring
  outline: none;

  a[href] {
    cursor: text;
  }
}

// Embeds
[data-embed] {
  position: relative !important;
  margin-bottom: 1rem;

  // Create an invisible overlay on top of embedded elements to prevent interaction
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: $brand-primary;
    opacity: 0;
    cursor: text;
  }

  // Highlight the embed when selected
  &[data-mce-selected] {
    outline: solid 2px $brand-primary;
    outline-offset: .25rem;
  }
}

// Figures
figure.image {
  &[data-mce-selected] img {
    outline: solid 2px $brand-primary;
    outline-offset: .25rem;
  }

  figcaption:focus {
    outline: none;
  }
}

// TinyMCE appends floating panels to the DOM for toolbars and other UI components. In some cases,
// they can cause the browser to scroll unexpectedly to the bottom of the page. Hiding the panels
// prevents this since we're not using TinyMCE's UI components anyway.
.mce-floatpanel,
.mce-panel {
  display: none !important;
}

// When a contentEditable="false" element is selected in Chrome, an mce-offscreen-selection appears
// below the post content, causing the browser to scroll unexpectedly. Simply hiding the element
// seems to fix it without any side effects. This only happens after toggling Zen Mode or reloading
// the post preview, so it probably has something to do with the way we hot swap the title and
// content elements.
.mce-offscreen-selection {
  display: none !important;
}