
$spaceForButtons = 46px;
$showPreviewMinWidth = 900px;
$spacyButtonsMinWidth = 450px;
$spacyYMinHeight = 400px;

// Without this, height = auto, and won't be full size, in Firefox (but fine in Chrome, weird).
.DW.DW .rta__textarea
  height: 100%;
  // Default is 1em, that's too large.
  font-size: 14px;

.dw-embedded-editor
  #debiki-editor-controller
    height: 100% !important

.esEdtr_backdrop
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black; // but js sets opacity.
  pointer-events: none;

.esEdtr_titleEtc
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 4px;
  @media (min-height: $spacyYMinHeight)
    margin-bottom: 7px;
  .form-group
    margin-bottom: 0;

  @media (max-width: 700px)
    // Now don't list all stuff side by side, instead, one per row.
    flex-direction: column;

.esEdtr_titleEtc_title
  flex: 1;

.esEdtr_titleEtc_title,
.esEdtr_textarea
  &.esError
    outline: 6px solid hsl(0, 100%, 65%);
    outline-offset: 0; // else 2px in Chrome at least, if :focus. Why?
    box-shadow: none !important; // both outline & shadow = ugly
    border-radius: 0; // both rectangular outline & border radius = ugly

.esEdtr_txtBtns
  background: white;
  margin-bottom: 1px;

.esEdtr_txtBtn
  border: none;
  background: white;
  padding: 4px 8px;
  color: hsl(0, 0%, 50%);
  font-size: 15px;
  &:hover
    background: hsl($uiHue, 100%, 94%);
    color: hsl(0, 0%, 12%);

.esEdtr_txtBtn-em
  font-family: monospace;
  font-size: 90%;

.esEdtr_txtBtn.n_FmtHlp
  box-shadow: 1px 1px 2px hsl(0 0% 50%);
  padding: 3px 6px 1px 7px;
  font-size: 13.5px;
  line-height: 1;
  position: relative;
  top: 0px;
  margin-left: 1ex;
  border: 1px solid #ddd;
  color: hsl(0deg 0% 22%);

.esEdtr_close
  position: absolute;
  right: 0;
  padding: 1px 13px;
  font-size: 24px;
  color: hsl(0, 0%, 27%);
  z-index: 2;
  &:hover
    color: hsl(0, 0%, 8%);
    background-color: hsl(0,0%,80%);
    cursor: pointer;


.s_E_SimlTpcs
  box-shadow: 10px 9px 10px rgba(0,0,0,0.57) !important;
  bottom: calc(100% + 5px) !important;  // or the shadow gets bit too close to the title
  max-height: 170px;  // sync with js [SIMLTPCH]
  overflow-y: scroll;
  overflow-x: hidden;
  h4
    margin: 0 0 9px;
    float: left;
  ul
   clear: both;

.s_E_SimlTpcs_L_It
  line-height: 131%;
  font-size: 15.3px;
  margin-left: 26px;


.s_E_SimlTpcs_SearchB,
.s_E_SimlTpcs_HideB
  padding: 10px 0 2px 13px !important;
  position: relative;
  top: -12px;

.s_E_SimlTpcs_SearchB
  padding-right: 13px !important;


.s_E_DoingWhat
  .esP_By
    margin: 0 2px 0 3px;
  .esP_By_F,
  .esP_By_U
    font-weight: bold;
    color: hsl($uiHue, 100%, 35%);

$scrollPreviewButtonPaddingTop = 6px;

#debiki-editor-controller.s_E-NoInEdPrvw
  // No in-editor preview — then, there's a Show-preview button instead that
  // scrolls to an in-page preview. Align the doing-what (e.g. "Reply to:") text
  // with that button.
  .s_E_DoingWhat,
  .icon-info-circled
    padding-top: $scrollPreviewButtonPaddingTop;
  .s_DfSts
    // Skip flex-position, it'd get placed "far away" to the right, hard to see,
    // now when the textarea is so wide (100%, no preview to the right).
    margin-left: 33px;
    padding-top: $scrollPreviewButtonPaddingTop;

  // Also, there's more blank space above, because of the large "Show preview" button,
  // so can reduce 'top' from 12px (EDABSTOP) to this:
  // And, sice no preview, set width 100% (instead of 50%).
  .editor-area
    top: 8px;
    width: 100%;
  // And add a bit more padding, looks less claustrophobic.
  #editor-after-borders
    left: 21px;
    right: 21px;

.s_E_ScrPrvwB
    margin: 0 0 5px 30px;
    background: white;
    color: #222;
    padding: $scrollPreviewButtonPaddingTop 12px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 50%);

#debiki-editor-controller
  position: fixed !important; // !important so jQuery.resizable() won't overwrite — what? but jQuery.resizable() is gone now (year 2020) since long.
  top: initial;
  bottom: 0
  width: 100%
  height: 300px;
  background: hsl(0, 0%, 89%)
  z-index: 1030

  &.editor-box-shadow
    box-shadow: 0 0 23px 6px rgba(0,0,0,0.6);
    border-top: 1px solid hsl(0, 0%, 94%);

  &.c_E-PlaceLeft
    top: 0;
    height: 100%;
    border-top: none;
    box-shadow: 0 0 14px 2px rgb(0 0 0 / 73%);
    padding-top: 9px;
    left: 0;
    width: calc(100% * 0.45);  // [ed_left_width]
    //max-width: 850px;  — wait, complicated to sync w page content width [ed_left_max_width]

    // The watchbar would be to the left, if it was open — so there's an open-watchbar
    // button to the left, if it's closed. (But no open-watchbar in the topbar,
    // which is to the right of the eitor. That is: 1) watchbar (to the very left),
    // 2) editor with open-watchbar button, 3) topbar and page contents, 4) the right sidebar.)
    .esOpenWatchbarBtn
      float: none;
      margin: 0 12px 2px -21px;
      padding: 6px 10px 6px 3px;

    // No need for any thick gray border-looking area to the right — not close to
    // the screen edge any more; instead, there's the page content to the right.
    // (And then a thick border instead looks distracting.)  [.no_border_right]
    #editor-after-borders
      right: 0;
    .editor-area-after-borders
      right: 4px !important;

    // There's almost no border to the right (see [.no_border_right] just above),
    // instead, we're using this scrollbar — and let's show it also when it's not needed,
    // so it works as a border (looks ok nice, better than the [.no_border_right]).
    textarea.rta__textarea.editor
      overflow-y: scroll;

// On forum topic list pages, there's no in-page preview — instead, the preview
// is inside the editor. Then, the editor needs more space, say, 60% instead of 45%:
// COULD UX: Make the editor horizontally resizable.
html.es-forum #debiki-editor-controller.c_E-PlaceLeft
  width: calc(100% * 0.60);  // [ed_left_width]


html.es-watchbar-open #debiki-editor-controller
  &.c_E-PlaceLeft
    // The watchbar is 230 px wide. We'll split the remaining 45% + 55% between the
    // editor (to the left) and page contents (to the right).
    left: $watchbarWidth; // 230px;
    // Seems `$watchbarWidth` won't get replaced inside calc!?
    width: calc((100% - 230px) * 0.45);  // [ed_left_width]
    // Nothing to the right of the buttons (no preview).
    .submit-cancel-btns
      width: auto;
    .esOpenWatchbarBtn
      // Not needed; watchbar already open.
      display: none;

// Extra wide, on topic list pages — but subtract the watchbar width.
html.es-watchbar-open.es-forum #debiki-editor-controller
  &.c_E-PlaceLeft
    // Try using $watchbarWidth instead of 230, hmm.
    width: calc((100% - 230px) * 0.60);  // [ed_left_width]


#debiki-editor-controller
  &.s_E-Max
    // --- dupl [5KETW02]
    height: 100% !important;
    #editor-after-borders
      top: -1px !important;
      left: 5px !important;
      right: 5px !important;
    &.editor-box-shadow
      border: none !important;
    // --- /dupl

  @media (min-width: $showPreviewMinWidth + 1)
    &.s_E-SplitHz
      .editor-area
        width: 100%;
        bottom: calc(65% + 10px);
      .preview-area
        width: 100%;
        position: absolute
        top: 35%;
        bottom: $spaceForButtons + 3px;

  @media (max-width: $showPreviewMinWidth)
    top: 0;

    // --- dupl [5KETW02]
    height: 100% !important;
    #editor-after-borders
      top: -1px !important;
      left: 5px !important;
      right: 5px !important;
    &.editor-box-shadow
      border: none !important;
    // --- /dupl

    .esEdtr_cycleMaxHzBtn
      display: none;

    &.s_E-Min
      top: initial;
      height: 47px !important;

      .editor-area,
      .preview-area,
      button
        display: none !important;

      .submit-cancel-btns
        bottom: 6px !important;  // instead of only 3px (8KAQF24)

      #esMinimizeBtn
        display: block !important;
        font-weight: bold;
        border: none;
        padding-left: 10px; // instead of 6px
        padding-right: 10px;

  .btn-default
    border-color: hsl(0, 0%, 70%); // not 80% because background not white but light gray

  .s_E_SimlTpcs,
  .dw-editor-guidelines-wrap
    position: absolute;
    bottom: 100%;

  .s_E_SimlTpcs,
  .dw-editor-guidelines
    background-color: hsl($yellowTipsHue, 70%, 93%);
    border: 1px solid hsl($yellowTipsHue, 70%, 85%);
    box-shadow: 6px 7px 9px rgba(80, 80, 80, 0.63);
    left: 13px;
    padding: 18px 18px 8px;
    min-width: 300px;
    max-width: 550px;
    @media (max-width: 500px)
      max-width: 400px;
    @media (max-width: 400px)
      max-width: 300px;

    .dw-hide
      padding: 0 15px 8px;
      color: hsl($uiHue, 70%, 45%);
      float: right;

  .dw-editor-guidelines
    position: relative;  // or can move  left 13px to the -wrap instead?

  #editor-after-borders
    position: absolute;
    top: 3px;
    right: 15px;
    bottom: 0;
    left: 15px;

  .editor-area  // (EDABSTOP)
    width: 50%
    position: absolute
    top: 12px;
    bottom: $spaceForButtons - 4;
    @media (min-height: $spacyYMinHeight)
      bottom: $spaceForButtons;

    .editor-area-after-borders
      position: absolute;
      top: 0;
      right: 10px;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;

    .s_E_DoingRow
      position: relative; // why? can remove?
      display: flex;
      align-items: baseline;
      @media (min-height: $spacyYMinHeight)
        margin-bottom: 4px;

    .icon-info-circled
      color: white;
      text-shadow: 0 0 3px black;
      font-size: 20px;
      position: relative;
      // top: -5px; — why?
      padding-left: 5px;
      &:hover
        text-decoration: none;
        outline: 1px solid hsl($uiHue, 50%, 70%);
        background-color: hsl($uiHue, 50%, 85%);

    .title-input
      width: 100%;
      padding: 6px;
      font-size: 14px;

    .rta // react-textarea-autocomplete
      width: 100%
      flex: 1; // it'll fill all available y-space
      .editor
        // height 100% doesn't work but this does: (.rta is already position = relative)
        position: absolute;
        top: 0;
        bottom: 0;
        font-size: $postFontSize;
        padding: 6px;
        border: none;
        &:focus
          box-shadow: 0 1px 3px 2px hsl($uiHue, 100%, 79%);

    @media (max-width: $showPreviewMinWidth)
      width: 100%;
      .editor-area-after-borders
        right: 0;

  .preview-area

    width: 50%
    position: absolute
    top: 12px
    right: 0
    bottom: 5px
    z-index: 1; // so above the div with Submit & Cancel buttons

    .dw-preview-help
      position: absolute;
      z-index: 5;
      top: 55px;
      left: 25px;
      box-shadow: 5px 5px 6px hsla(0, 0%, 0%, 0.6);

    .preview
      position: absolute;
      top: 26px;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0 2px 0 3px;
      background: white
      overflow: auto

    @media (max-width: $showPreviewMinWidth)
      display: none;
      width: 100%;
      bottom: $spaceForButtons;

  .editor-area,
  .preview-area
    @media (min-width: $showPreviewMinWidth + 1)
      // In case JS has adden display: none, and via CSS we've hidden the Show-preview button,
      // then we need to ensure the preview is indeed visible again now when the win width is wider:
      display: block !important;

  .submit-cancel-btns
    width: calc(50% - 10px);
    @media (max-width: $showPreviewMinWidth)
      width: 100%;
    position: absolute;
    bottom: 3px;  // (8KAQF24)
    @media (min-height: $spacyYMinHeight)
      bottom: 6px;
    button
      margin: 0;
      @media (min-width: $spacyButtonsMinWidth)
        margin-right: 5px;
    .esEdtr_cycleMaxHzBtn,
    #esPreviewBtn
      min-width: 65px;
    #esPreviewBtn,
    #esMinimizeBtn
      float: right;
      margin: 0;
      @media (min-width: $spacyButtonsMinWidth)
        margin-left: 5px;
    @media (min-width: $showPreviewMinWidth + 1)
      #esPreviewBtn,
      #esMinimizeBtn
        display: none;

  .view-edit-history
    margin-left: 1em;
    vertical-align: middle;


.s_DfSts
  margin: 0 auto;  // places it in the middle, if flex layout
  color: hsl(0, 0%, 38%);

.s_DfSts-Err
  padding: 2px 9px;
  font-weight: bold;
  color: $errorColor;
  background: $errorBackground;


.s_UplErrD_UplNm
    color: $errorColor;
    background: $errorBackground;

.c_2Short-Cmt
  .n_MoreMargin
    margin: 0 0.85ex;  // or sample list becomes hard to read
  .icon-heart
    color: hsl(0 0% 33%);  // or too dark


// React-textarea-autocomplete problems / bugs:   [rta_overfl_top_bgfx]
// boundariesElement doesn't seem to work,
// so instead, if rta tries to place itself at the win/something top, then:
.rta__autocomplete--top
  position: relative !important;
  // There's some controls and widgets above, so top can be a bit < 0:
  top: -50px !important;
// And RTA can place itself at left: -900 so everything is off-screen,
// if there's some rather wide elem, or not sure what it does:
// Apparently it tries to place at right win edge, and if won't work,
// it just left aligns althoguh everything then off-screen.
// Maybe don't use rta — because these problems solved already in Ty's
// dropdown-modal. Just add a markdown-it plugin that pops up a
// username selector if typing '@...'  ?  Maybe no need for any extra
// component like rta.
.rta__autocomplete
  max-width: 360px;

.rta__entity
  font-size: 14px;
  padding: 5px 0 5px 5px !important;
html.mouse .rta__entity
  padding: 3px 0 3px 5px !important;


// Hack. Make disabled items (e.g. usernames one cannot mention) unclickable, and gray.
.rta__entity .c_Disabled
  background: #fff;
  color: #777;
  margin: -3px 0 -3px -6px;
  padding: 5px 0 5px 6px;
  //pointer-events: none; — using event.stopPropagation() instead. [mention_disabled]


// Compact buttons if narrow screen, so won't wrap to 2nd line.
@media (max-width: $spacyButtonsMinWidth - 1)
  #esMinimizeBtn
    padding-left: 6px;  // instead of 12px
    padding-right: 6px;
  #esPreviewBtn
    padding-left: 7px;
    padding-right: 7px;

.c_AliasB
  margin-left: 1ex;

.esE_SaveB_Verbose
  display: none;
  @media (min-width: $spacyButtonsMinWidth)
    display: inline;

.s_E_iPhoneKbd
  display: none;

// iPhone is problematic, needs these special fixes.
html.s_iphone
  .s_E-E
    // Leave lots of space for the keyboard. The iPhone keyboard doesn't trigger any resize event,
    // when appearing — it just covers the lower parts of the window, sometimes also the lower
    // parts of a <textarea>, making the lower parts impossible to edit (without canceling
    // the keyboard, scrolling down and opening it again).
    #editor-after-borders
      height: 73%;

    .s_E_iPhoneKbd
      display: block;
      position: absolute;
      bottom: 25px;
      left: 30px;
      font-size: 14px;
      color: gray;

  // Prevent iPhone from zooming in on input fields — which it does if the font size is <= 16 px.
  // Based on:
  //   https://stackoverflow.com/questions/2989263/
  //      disable-auto-zoom-in-input-text-tag-safari-on-iphone#comment25424617_6394497
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  select:focus,
  textarea
    font-size: 16px !important;

// vim: fdm=marker et ts=2 sw=2 tw=0 fo=r list
