//
// Text Angular
// --------------------------------------------------

text-angular {
  .btn-group {
    margin-bottom: $grid-unit-y;
  }

  .btn {
    @include button-size(
      ceil($grid-unit-y * 0.5) - 2,
      $grid-unit-x * 2,
      $font-size-small,
      $grid-unit-y * 2,
      $btn-border-radius-base
    );

    .fa {
      vertical-align: -6%;
    }
  }
}

.ta {
  &-hidden-input {
    width: 1px;
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -10000px;
    left: -10000px;
    opacity: 0;
    overflow: hidden;
  }

  /* add generic styling for the editor */
  &-root.focussed > &-scroll-window.form-control {
    &,
    & > .ta-bind {
      $color: $input-border-focus;
      $color-rgba: rgba(red($color), green($color), blue($color), 0.6);

      border-color: $color;
      outline: 0;
      @include box-shadow(
        'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px ${color-rgba}'
      );
    }
  }

  &-editor.ta-html,
  &-scroll-window.form-control {
    min-height: 300px;
    height: auto;
    overflow: auto;
    font-family: inherit;
    font-size: 100%;
  }

  &-scroll-window {
    &.form-control {
      position: relative;
      padding: 0;
    }

    & > .ta-bind {
      height: auto;
      min-height: 300px;
      padding: 6px 12px;
    }
  }

  &-editor:focus {
    user-select: text;
  }

  /* add the styling for the awesomness of the resizer */
  &-resizer-handle-overlay {
    z-index: 100;
    position: absolute;
    display: none;

    & > .ta-resizer-handle {
      &-info {
        position: absolute;
        bottom: 16px;
        right: 16px;
        border: 1px solid black;
        background-color: $color-white;
        padding: 0 4px;
        opacity: 0.7;

        &-background {
          position: absolute;
          bottom: 5px;
          right: 5px;
          left: 5px;
          top: 5px;
          border: 1px solid black;
          background-color: rgba(0, 0, 0, 0.2);
        }
      }

      &-corner {
        width: 10px;
        height: 10px;
        position: absolute;

        &-tl {
          top: 0;
          left: 0;
          border-left: 1px solid black;
          border-top: 1px solid black;
        }

        &-tr {
          top: 0;
          right: 0;
          border-right: 1px solid black;
          border-top: 1px solid black;
        }

        &-bl {
          bottom: 0;
          left: 0;
          border-left: 1px solid black;
          border-bottom: 1px solid black;
        }

        &-br {
          bottom: 0;
          right: 0;
          border: 1px solid black;
          cursor: se-resize;
          background-color: white;
        }
      }
    }
  }
}