.markdown-area {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);

  &.focus {
    $color: $input-border-focus;
    $color-rgba: rgba(red($color), green($color), blue($color), .6);
    border-color: $color;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);

  }

  .nav-tabs {
    padding: $padding-base-horizontal $padding-base-horizontal 0;

    li a {
      padding: $padding-base-vertical $padding-base-horizontal;
    }
  }

  textarea {
    margin: 0;
    padding: $padding-base-vertical $padding-base-horizontal;
    border: none;
    resize: vertical;
    height: 8em;
    @include box-shadow(none);

    &:focus {
      border: none;
      @include box-shadow(none);
    }
  }

  .file-upload {
    background: $gray-lighter;
    position: relative;

    input[type=file] {
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
      outline: 0;
      opacity: 0;
      cursor: pointer;
    }

    .text {
      padding: $padding-base-vertical/2 $padding-base-horizontal;
    }

    &:hover {
      a {
        text-decoration: underline;
      }
    }
  }

  .preview {
    min-height: 8em;
    padding: $padding-base-vertical $padding-base-horizontal;
  }
}

.has-error .markdown-area {
  border-color: $state-danger-text;

  &.focus {
    border-color: darken($state-danger-text, 10%);
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($state-danger-text, 20%));
  }

  textarea {
    @include box-shadow(none);

    &:focus {
      border: none;
      @include box-shadow(none);
    }
  }
}
