$shiled-size-lg: 30px;
$shiled-size-base: 26px;
$shiled-size-sm: 22px;

.o-shield {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: $shiled-size-base;
  height: $shiled-size-base;
  font-weight: $font-bold;
  background-color: $color-blue-600;
  color: #fff;
  font-size: $font-base;
  border-radius: $border-radius-base;

  &.-lg {
    width: $shiled-size-lg;
    height: $shiled-size-lg;
    font-size: $font-lg;
    border-radius: 6px;
  }

  &.-sm {
    width: $shiled-size-sm;
    height: $shiled-size-sm;
    font-size: $font-m;
  }

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

  &.-gradient {
    background: linear-gradient(135deg, $color-blue-400 0%, $color-blue-600 100%);
    background: radial-gradient(100% 100% at 0% 0%, #002ABF 0%, #10C6FF 135%);
    box-shadow: inset 0 0 1px 0 rgba(255, 255, 255, 0.5);

    .fas {
      background: linear-gradient(135deg, #fff 50%, rgba(123, 208, 255, 0.8) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}