.tn-tc-wrap {
  .tn-tc-sizes {
    display: none;
  }
  &.mobile-breakpoint {
    .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve {
      @include span-columns(12);
    }
    .wrapped-image {
      &.left, &.right {
        float: none;
        padding: 0;
      }
    }
  }
}

.tn-tc-main-actions {
  a {
    @include transition(all .2s ease);
    font-size: $tn-font-large;
    margin: $tn-margin $tn-margin 0 0;
    text-transform: uppercase;
    span {
      font-size: $tn-font-small;
      position: relative;
      top: -2px;
      padding-left: 5px;
    }
    &:hover {
      text-decoration: none;
    }
  }
}

.tenon-content {
  margin-top: $tn-margin;
  // @import "variables";
  // @import "styleguides/styleguide";
  // @extend body;
  .tn-tc-row {
    @include transition(box-shadow .2s ease-in);
    @include transition(border .2s ease-in);
    position: relative;
    overflow: hidden;
    min-height: 50px;
    margin-bottom: 10px;
    padding: 0;
    &.ui-sortable-helper {
      overflow: hidden;
      box-sizing: content-box;
      max-height: 200px;
      padding: 5px 10px;
      border: 1px solid $tn-dark-grey;
      background: $tn-light-grey;
      box-shadow: 1px 1px 5px $tn-dark-grey;
    }
    &.sortable-placeholder {
      min-height: 50px;
      max-height: 200px;
      border: 1px dashed $tn-dark-grey;
    }
    i {
      font-size: 20px;
    }
    .tn-tc-bottombar {
      display: none;
    }
  }
  .drag-anchor {
    float: left;
  }
  .tn-tc-topbar, .tn-tc-bottombar {
    padding: 0;
    height: 36px;
    // background-color: $tn-med-grey;
    .actions {
      @include transition(all .2s ease);
      position: relative;
      text-align: right;
      color: $tn-dark-grey;
      i {
        @include transition(all .2s ease);
      }
      a {
        @include transition(all .2s ease);
        display: inline-block;
        padding: 10px 0 5px;
        color: $tn-dark-grey;
        span {
          position: relative;
          top: -2px;
          display: inline-block;
        }
      }
      a.tn-tc-open-library {
        @include transform(translate(-50%, 0));
        position: absolute;
        top: 0;
        left: 50%;
        text-transform: uppercase;
        span {
          font-size: $tn-font-small;
        }
      }
      a:hover {
        text-decoration: none;
      }
      .drag-anchor {
        float: left;
        padding: 10px 0 5px;
        cursor: move;
      }
    }
  }
  .tn-tc-row:hover {
    &:hover {
      .tn-tc-topbar, .tn-tc-bottombar {
        color: $tn-black;
        a {
          color: $tn-black;
        }
        i {
          color: $tn-black;
        }
      }
    }
    .tn-tc-topbar, .tn-tc-bottombar {
      opacity: 1;
    }
  }
  .tn-tc-fields {
    @include outer-container;
    min-height: 20px;
  }
  > div {
    min-height: 100%;
  }
  a.add-image {
    span {
      font-family: $tn-open-sans;
      line-height: 200px;
      display: block;
      height: 200px;
      text-align: center;
      color: $tn-dark-grey;
      border: 4px dashed $tn-dark-grey;
      background: $tn-med-grey;
    }
  }
  .wrapped-image {
    @include media($tn-bp-mobile) {
      &.left, &.right {
        float: none;
        padding: 0;
      }
    }
    &.left {
      float: left;
      padding: 5px 10px 0 5px;
    }
    &.right {
      float: right;
      padding: 5px 5px 0 10px;
    }
  }
  .medium-editor-placeholder {
    position: static;
  }
  .medium-editor-placeholder:after {
    position: static;
    display: none;
  }
  .tn-tc-asset-field img {
    width: 100%;
  }
  .image {
    position: relative;
    overflow: hidden;
    img {
      display: block;
      width: auto;
      max-width: 100%;
      margin: 0 auto;
    }
    &.stretch img {
      width: 100%;
    }
  }
  textarea.caption, div.tn-tc-caption {
    font-size: $tn-font-small;
    width: 100%;
    margin: 0;
    padding: 5px;
    resize: none;
    color: #fff;
    background: $tn-dark-grey;
  }
  textarea.caption:-moz-placeholder {
    color: #fff;
  }
  textarea.caption::-webkit-input-placeholder {
    color: $tn-light-grey;
  }
  .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve {
    @include transition(width .2s ease);
  }
}

.tn-tc-templates {
  display: none;
}

.tn-tc-wrapped-image-with-text {
  .editable-text {
    min-height: 200px;
  }
}

.tn-tc-image-and-text {
  > div {
    height: 100%;
  }
}

.tn-tc-with-background-image {
  padding: 60px 0 40px;
  .tn-text-overlay {
    position: relative;
    z-index: 10;
    float: left;
    width: 46%;
    margin: 0 2%;
    .editable-text {
      background-color: rgba(#fff, .8);
    }
  }
  .tn-tc-background-image {
    position: absolute;
    top: 40px;
    a.add-image span {
      line-height: 60px;
      height: 140px;
    }
  }
}


.image-controls {
  @include transition(none);
  &.full-width-image, &.three-column-image, &.four-column-image, &.stacked-image-and-text {
    .grow-image, .shrink-image, .swap-sides {
      display: none;
    }
  }
  button:active, button:focus {
    outline: none;
    background: lighten($tn-primary, 10%);
  }
  .link-form {
    z-index: $tn-z-medium-editor-controls;
  }
}

[contenteditable=true]:empty:not(:focus):before {
  content: attr(data-placeholder);
  color: $tn-med-grey;
}

a.open-embed-modal {
  @include transition(all .2s ease);
  font-size: $tn-font-small;
  display: block;
  padding: 5px 0;
  text-transform: uppercase;
  color: $tn-dark-grey;
}

.tn-tc-row:hover a.open-embed-modal {
  color: $tn-black;
}

.embed {
  clear: both;
}

.edit-embed-code {
  display: none;
  textarea {
    width: 100%;
  }
}

.modal .edit-embed-code {
  display: block;
}

.tn-tc-with-background-image {
  padding: 60px 0 40px;
  .tn-text-overlay {
    position: relative;
    z-index: 10;
    float: left;
    width: 46%;
    margin: 0 2%;
    .editable-text {
      background-color: rgba(#fff, .8);
    }
  }
  .tn-tc-background-image {
    position: absolute;
    top: 40px;
    a.add-image span {
      line-height: 60px;
      height: 140px;
    }
  }
}