.active {
  background-color: red;
}

.controlsWrapper {
  display: flex;
  user-select: none;
  > div:nth-child(even) {
    border-left: 0;
    border-right: 0;
  }
}

.styleButton {
  height: 32px;
  min-width: 32px;
  background-color: #FFFFFF;
  border: 1px solid rgba(16,22,34,0.10);
  font-size: 13px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  cursor: pointer;

  &:hover {
    background-color: #F3F4F4;
  }
}

.styleButtonActive {
  border: 0;
  background: rgba(16,22,34,0.00);
  box-shadow: inset 0 -1px 0 0 rgba(16,22,34,0.04), inset 0 1px 0 0 rgba(16,22,34,0.04);
}

.styleButtonBold {
  background-image: url('../../assets/icons/icon_bold.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.styleButtonDisabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.styleButtonItalic {
  background-image: url('../../assets/icons/icon_italic.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.styleButtonUnderline {
  background-image: url('../../assets/icons/icon_underline.svg');
  background-position: center 11px;
  background-repeat: no-repeat;
}

.styleButtonUL {
  background-image: url('../../assets/icons/icon_bullet-list.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.styleButtonOL {
  background-image: url('../../assets/icons/icon_numbered-list.svg');
  background-position: center 12px;
  background-repeat: no-repeat;
}

.styleButtonBlockQuote {
  background-image: url('../../assets/icons/icon_quote-block.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.styleButtonCodeBlock {
  background-image: url('../../assets/icons/icon_code-block.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.styleButtonLink {
  background-image: url('../../assets/icons/icon_link.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.styleButtonImg {
  background-image: url('../../assets/icons/icon_media.svg');
  background-position: center;
}

.styleButtonStrikedOut {
  background-image: url('../../assets/icons/icon_barred.svg');
  background-position: center;
  background-repeat: no-repeat;
}

.wysiwygInlineControls {
  height: 49px;
  display: flex;
  padding: 8px 3px 0 10px;
  background-color: #F3F4F4;
  user-select: none;
  > div:nth-child(even) {
    border-left: 0;
    border-right: 0;
  }
  > div:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  > div:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: 1px solid rgba(16,22,34,0.10);
  }
}

.wysiwygInlineControlsFocus {
  border-color: #78caff;
}