.ui-iconbox-info {
  width: 32px;
  display: inline-block;

  color: $color-gray-09;
  font-size: 19px;
  line-height: 29px;
  text-align: center;

  background: $color-green-02;
  border-radius: 50%;
  border-bottom-left-radius: 0;
  border: 2px solid;
  box-shadow: $shadow-bottom-default;
  user-select: none;

  cursor: pointer;

  &::before {
    margin-left: -.1em;
  }
}

.ui-iconbox-info-small {
  width: 26px;
  font-size: 14px;
  line-height: 22px;
}

.ui-iconbox-info-mini {
  width: 18px;
  font-size: 10px;
  line-height: 16px;
  border-width: 1px;
}

.ui-iconbox-label {
  width: 50px;
  height: 50px;
  display: inline-block;

  border-radius: $border-radius-s;
  box-shadow: $shadow-bottom-default;

  background: $color-green-02;
  text-align: center;
  color: $color-gray-09;
}

.ui-iconbox-label-large {
  width: 80px;
  height: 80px;
}

.ui-iconbox-remove {
  $_size: 18px;

  @include block-round($_size);

  background: $color-gray-08;
  color: $color-base-01;

  box-shadow: $shadow-bottom-default;
  text-align: center;
  cursor: pointer;

  i {
    @include icon-size(11px);
    vertical-align: top;
    line-height: $_size;
  }
}

.ui-iconbox-remove-small {
  $_size: 16px;

  @include block-round($_size);

  i {
    @include icon-size(9px);
    line-height: $_size;
  }
}

.ui-iconbox-warning {
  display: inline-block;

  // fix height for small sizes
  line-height: 0;
  border-radius: 50%;
  color: $color-orange-01;
  background-color: $color-gray-08;
}

.ui-iconbox-mark-green {
  @include block-round(16px);
  background: $color-green-02;
  color: $color-gray-09;
}