@import 'css/master/settings/settings';

.clearance_flag {
  display: inline-block !important;
  padding: 2px 35px 2px 7px;
  margin: 3px 0 7px 0;
  width: auto !important;
  color: $black;
  font-weight: $fontWeightSemiBold;
  background: linear-gradient(-55deg, transparent 1.3em, $clearanceBadgeColor 0),
              linear-gradient(-125deg, transparent 1.3em, $clearanceBadgeColor 0);
  @include font-size($baseFontSize - 2);
  @include box-sizing();

  &.over_image {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }
}

.rmp_badge {
  display: inline-block;
  position: relative;
  padding: 2px 8px 2px 18px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  background: $rmpBadgeColor;
  color: $white;
  text-transform: uppercase;
  @include font-size($baseFontSize - 4);

  svg {
    width: 22px;
    height: 22px;
    display: block;
    position: relative;
  }

  .rmp_badge_dollar {
    position: absolute;
    top: -3px;
    left: -6px;
  }

  .rmp_login {
    color: $black;
    left: 124px;
    position: absolute;
    padding: 0 4px 0 14px;
    top: 0;
    width: 225px;
    text-transform: none;

    @include border-radius();
  }
  &.sm {
    @include font-size(8px);
    padding: 2px 8px 2px 12px;
    svg {
      width: 16px;
      height: 16px;
    }
  }
  &.med {
    @include font-size(8px);
    padding: 2px 6px 2px 14px;
    svg {
      width: 19px;
      height: 19px;
    }
  }
  &.img_top {
    position: absolute;
    top: 3px;
    left: 6px;
  }
}

.rmp_red {
  color: $rmpBadgeColor;

  &.rmp_strong {
    font-weight: 600;
  }
}