@import "partials/variables";

.main-container {
  padding: 0;
}

.dropdown-menu .h2 .fa { transform: scale(1.4); }
.dropdown-menu .h3 .fa { transform: scale(1.2); }
.dropdown-menu .h4 .fa { transform: scale(1.0); }

#editor-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: white;
  display: block;
  overflow: auto;
  transition: opacity .25s;
}

#status-bar {
  position: fixed;
  right: 1rem;
  bottom: 1rem;

  > div {
    vertical-align: middle;
    min-height: 1.7rem;
    display: inline-block;

    &:not(:first-child) {
      margin-left: .5rem;
    }
  }
}

#word-count {
  .word-count-none,
  .word-count-one,
  .word-count-many {
    background: rgba($postleaf-black, .8);
    font-size: .9rem;
    color: white;
    padding: .25rem .5rem;
    border-radius: .25rem;
    pointer-events: none;
    user-select: none;
  }
}

#zen-mode-theme {
  button {
    padding: 0;
    transform: rotate(0);
    transition: .4s transform;
    display: block;

    &[data-zen-theme="night"] {
      transform: rotate(180deg);
    }
  }

  img {
    width: 1.5em;
    height: 1.5em;
    display: block;
  }
}

#dropzone {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba($postleaf-black, .9);
  padding: 3rem;

  .dropzone-target {
    width: 100%;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    border: solid .5rem white;
    border-radius: $border-radius-large;
    text-align: center;
    transition: .2s transform, .2s color, .2s background-color, .2s border-color;
    padding: 1rem;
    display: table;

    &.active {
      color: white;
      background-color: $brand-primary;
      border-color: $brand-primary;
    }

    &:first-child {
      height: calc(30% - 3rem);
      margin-bottom: 3rem;
    }

    &:last-child {
      height: 70%;
    }

    .dropzone-text {
      display: table-cell;
      vertical-align: middle;
    }
  }
}

// Fixes an issue in iOS where hitting enter and various other commands (e.g. cmd+b) cause the
// editor to scroll to the top of the page. Last tested on iOS 10.3.2.
.ios {
  .stretch-down {
    overflow: visible;
  }
}