.edit-post-visual-editor .components-button-custom.has-icon {
  display: flex;
  height: auto;
  background-color: var(--primary);
  padding: 2px 20px 2px 2px;
  border-radius: 20px 0 20px 20px;
  color: var(--black);
  line-height: normal;
}
.edit-post-visual-editor div.components-button-custom.has-icon {
  display: inline-flex;
}

.components-button-custom .dashicon {
  background-color: white;
  border-radius: 50%;
  font-size: 25px;
  display: block;

}

.components-button-custom:hover .dashicon {
  color: var(--black);
}

.components-button-custom .dashicon:before {
  padding: 8px 1px;
}

.components-button-custom a {
  color: white;
  cursor: pointer;
  text-decoration: none;
}

.components-button-custom.size-big {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 35px;
  border-radius: 30px 0 30px 30px !important;
}
.components-button-custom.size-big .dashicon {
  font-size: 38px;
  width:36px;
  height:36px;
}

.components-button-custom.size-medium {
  font-size: 25px;
}
.components-button-custom.size-medium .dashicon {
  font-size: 27px;
  width:30px;
  height:30px;
}

.components-button-custom.size-small {
  padding-left: 1px !important;
  font-size: 14px;
}
.components-button-custom.size-small .dashicon {
  font-size: 20px;
    width:22px;
  height:22px;
}

.edit-post-visual-editor .components-button-custom.color-black {
  color: white;
  background-color: var(--black) !important;
}
.edit-post-visual-editor .components-button-custom.color-black .dashicon {
  color: var(--black);
}