$dot-size: rem(12);

.sui-a-technology-badge {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: $sui-border-radius-relative-md;
  line-height: 1;
  background: $sui-color-brand-denim-100;

  i,
  img,
  svg {
    width: 100%;
    height: 100%;
  }

  img {
    border-radius: $sui-border-radius-relative-md;
  }

  @include suiTechnologyBadgeSize($sui-size-xs);

  &.as--sm {
    @include suiTechnologyBadgeSize(rem(22));
  }

  &.as--lg {
    @include suiTechnologyBadgeSize($sui-size-sm);
  }

  &.as--xl {
    @include suiTechnologyBadgeSize($sui-size-md);
  }

  &.as--shadow-100 {
    @include suiTechnologyBadgeShadow($sui-shadow-100);
  }

  &.as--shadow-200 {
    @include suiTechnologyBadgeShadow($sui-shadow-200);
  }

  &.as--shadow-300 {
    @include suiTechnologyBadgeShadow($sui-shadow-300);
  }

  &.as--shadow-400 {
    @include suiTechnologyBadgeShadow($sui-shadow-400);
  }

  &.as--shadow-500 {
    @include suiTechnologyBadgeShadow($sui-shadow-500);
  }

  &.as--shadow-600 {
    @include suiTechnologyBadgeShadow($sui-shadow-600);
  }

  &__disabled {
    filter: grayscale(1);
    opacity: 0.6;
  }

  &.as--deprecated {
    border: solid $sui-size-border $sui-color-tangerine;
  }

  &.as--missing-elements::after {
    content: '';
    position: absolute;
    top: -0.4 * $dot-size;
    right: -0.4 * $dot-size;
    background-color: #757575;
    border-radius: 50%;
    width: $dot-size;
    height: $dot-size;
  }

  &.as--deprecated::after {
    content: '';
    position: absolute;
    top: -0.4 * $dot-size;
    right: -0.4 * $dot-size;
    background-color: $sui-color-tangerine;
    border-radius: 50%;
    width: $dot-size;
    height: $dot-size;
  }
}