$bgcolor: #57ad68;
$border_color: #fff;
$button_size: 40px;
$link_color: #fff;

.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;
                                        //@include transition(top .075s ease-out,left .075s ease-out);
  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 lighten($bgcolor, 20);
                                        color: $link_color;
                                        cursor: pointer;
                                        font-size: 14px;
                                        text-decoration: none;
                                        //@include box-sizing(border-box);
                                        //@include transition(background-color .2s ease-in, color .2s ease-in);
      &:hover                         { background-color: darken($bgcolor, 20);
                                        color: #fff;
      }
      &:focus                         { outline: none;
      }
    }
  }

  .character-editor-button-active     { background-color: darken($bgcolor, 30);
                                        color: #fff;
  }
}

.character-editor-toolbar-active      { visibility: visible;
                                        //-webkit-animation: pop-upwards 160ms forwards linear;
                                        //-moz-animation: pop-upwards 160ms forwards linear;
                                        //-ms-animation: pop-upwards 160ms forwards linear;
                                        //-o-animation: pop-upwards 160ms forwards linear;
                                        //animation: pop-upwards 160ms forwards linear;
                                        //@include transition(top .075s ease-out,left .075s ease-out);
}

.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;
                                        background-color: $bgcolor!important;
                                        color: $link_color;
                                        border: none;
                                        font-size: 14px;
                                        margin: 0;
                                        //@include box-sizing(border-box);
    &:focus                           { outline: 0;
                                        border: none;
                                        box-shadow: none;
    }
  }
  a                                   { color: $link_color;
                                        font-weight: bolder;
                                        font-size: 24px;
                                        text-decoration: none;
                                        padding: 0 13px;
    &:hover                           { color: $link_color;
                                        opacity: .8;
    }
  }
}

%character-toolbar-arrow              { content: "";
                                        display: block;
                                        position: absolute;
                                        left: 50%;
                                        margin-left: -5px;
                                        width: 0;
                                        height: 0;
                                        border-style: solid;
}

.character-toolbar-arrow-under:after  { @extend %character-toolbar-arrow;
                                        top: $button_size;
                                        border-width: 5px 5px 0 5px;
                                        border-color: $bgcolor transparent transparent transparent;
}

.character-toolbar-arrow-over:before { @extend %character-toolbar-arrow;
                                      top: -5px;
                                      border-width: 0 5px 5px 5px;
                                      border-color: transparent transparent $bgcolor transparent;
}