$offer-icon-red-border-color: #cb0000 !default;
$offer-icon-blue-border-color: #061938 !default;
$news-push-icon-size: 56px;

.offer-icon {
  @include font-size(16);
  font-weight: bold;
  background: $color-red-400;
  color: $color-white;
  display: block;
  padding: 2px 14px 4px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 17px;
  z-index: 200;

  &.offer-icon-blue {
    background: $color-blue-500;
  }

  &.offer-icon-black {
    background: $color-black;
  }
}

.offer-icon:after {
  border-right: 4px solid $offer-icon-red-border-color;
  content: '';
  height: 27px;
  position: absolute;
  right: -4px;
  top: 2px;
  width: 0;
}

.offer-icon-blue:after {
  border-color: $offer-icon-blue-border-color;
}

.offer-icon-black:after {
  border-color: $color-black;
}

.news-push {
  @include font-size(18);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: $news-push-icon-size;
  width: $news-push-icon-size;
  top: $margin-enterprise;
  right: $margin-enterprise;
  background-color: $color-blue-300;
  border-radius: 50%;
  color: $color-white;
  font-weight: bold;
  z-index: 2;

  &.small {
    @include font-size(16);
    height: 52px;
    width: 52px;
    top: $margin-normal;
    right: $margin-normal;

    @include breakpoint(sm) {
      @include font-size(18);
      height: $news-push-icon-size;
      width: $news-push-icon-size;
      top: $margin-enterprise;
      right: $margin-enterprise;
    }
  }
}