.tag-editor {
  line-height: 18px;
  border: 1px solid #CCC;
  padding: 0 4px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  ;
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;

  &.focus {
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  }

  input {
    border: none;
    border-radius: none;
    -moz-border-radius: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
    margin: 4px 0;

    &:focus {
      border-color: none;
      box-shadow: none;
    }
  }

  .tag-preview {
    span {
      &.tag {
        color: white;
        font-weight: bold;
        font-size: 11px;
        padding: 1px 4px;
        background-color: #AAA;
        border-radius: 3px;
        -moz-border-radius: 3px;
        margin: 4px 4px 4px 0;
        display: inline-block;
        line-height: 16px;
        vertical-align: middle;
      }

      &.delete {
        margin-left: 3px;
        cursor: pointer;
        font-weight: bold;
        color: #CCC;

        &:hover {
          color: #FFF;
        }
      }
    }
  }
}
