//---------------------------------------------------------
// CHARACTER EDITOR
//---------------------------------------------------------

$bgcolor:       $secondary_color;
$border_color:  darken($secondary_color, 5%);
$link_color:    #fff;
$button_size:   40px;

.character-editor                     {
  &:focus                             { outline: 0;
  }
}

.character-editor-placeholder         { position: relative;
  &:after                             { position: absolute;
                                        content: attr(data-placeholder);
                                        top: 0;
                                        left: 0;
                                        font-style: italic;
                                        opacity: .5;
    }
}

.character-editor-toolbar             { position: absolute;
                                        top: 0;
                                        left: 0;
                                        visibility: hidden;
                                        z-index: 2000;
                                        background-color: $bgcolor;
                                        font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
                                        font-size: 16px;
  ul                                  { margin: 0;
                                        padding: 0;
  }

  li                                  { float: left;
                                        list-style: none;
                                        margin: 0;
                                        padding: 0;
    &:last-child button               { border-right: none;
    }

    button                            { display: block;
                                        padding: 0px;
                                        margin: 0;
                                        height: $button_size;
                                        min-width: $button_size;
                                        background-color: transparent;
                                        border: none;
                                        border-right: 1px solid $border_color;
                                        color: $link_color;
                                        cursor: pointer;
                                        font-size: 14px;
                                        text-decoration: none;
      &:hover                         { background-color: $border_color;
                                        color: #fff;
      }
      &:focus                         { outline: none;
      }
    }
  }

  .character-editor-button-active     { background-color: $border_color;
                                        color: #fff;
  }
}

.character-editor-toolbar-active      { visibility: visible;
}

.character-editor-toolbar-form-anchor { background: $bgcolor;
                                        color: #fff;
  input[type='text'], a               { font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
  }
  input[type='text']                  { display: inline;
                                        padding: 6px;
                                        height: $button_size - 12px;
                                        background-color: $bgcolor!important;
                                        color: $link_color;
                                        border: none;
                                        font-size: 14px;
                                        margin: 0;
    &:focus                           { outline: 0;
                                        border: none;
                                        box-shadow: none;
    }
    @include input-placeholder        { color: $border_color;
    }
  }
  a                                   { color: $link_color;
                                        font-weight: bolder;
                                        font-size: 24px;
                                        text-decoration: none;
                                        padding: 0 13px;
                                        position: relative;
                                        top: 1px;
    &:hover                           { color: $link_color;
                                        opacity: .8;
    }
  }
}

.character-editor-toolbar-arrow       { display: block;
                                        position: absolute;
                                        left: 50%;
                                        top: $button_size;
                                        margin-left: -5px;
                                        width: 0px;
                                        height: 0px;
                                        border-style: solid;
                                        border-width: 5px 5px 0 5px;
                                        border-color:  $bgcolor transparent transparent transparent;
}