@import '~scssinc';
.bf-image-size-editor,
.bf-image-link-editor{
  padding-bottom: 1px;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 -1px 0 0 rgba(#fff, .1);
  .editor-input-group{
    width: 300px;
    margin: 8px 10px;
    overflow: hidden;
  }
  input{
    display: block;
    float: left;
    box-sizing: content-box;
    height: 32px;
    margin: 0 5px 0 0;
    padding: 0 10px;
    background-color: rgba(#fff, .1);
    border: none;
    border-radius: 2px;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(#fff, .1);
    color: #fff;
    font-weight: bold;
    &:hover{
      box-shadow: inset 0 0 0 1px rgba($COLOR_ACTIVE, .5);
    }
    &:focus{
      box-shadow: inset 0 0 0 1px rgba($COLOR_ACTIVE, 1);
    }
  }
  button{
    float: left;
    width: 60px;
    height: 32px;
    margin: 0;
    padding: 0 20px;
    background-color: $COLOR_ACTIVE;
    border: none;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
    &:hover{
      background-color: $COLOR_ACTIVE - 20;
    }
  }
}
.bf-image-size-editor{
  input{
    width: 95px;      
  }
}
.bf-image-link-editor{
  input{
    width: 215px;
  }
  .switch-group{
    height: 20px;
    margin: 10px 10px;
    .bf-switch{
      float: left;
    }
    label{
      float: left;
      margin-left: 15px;
      color: #999;
      font-size: 12px;
      line-height: 20px;      
    }
  }
}

.bf-image{
  .bf-media-toolbar{
    &::before{
      visibility: hidden;
    }
    &[data-float="left"] [data-float="left"],
    &[data-float="right"] [data-float="right"],
    &[data-align="left"] [data-align="left"],
    &[data-align="center"] [data-align="center"],
    &[data-align="right"] [data-align="right"] {
      color: $COLOR_ACTIVE;
    }
  }
}