$radius: var(--wds-border-radius-600, 12px);

.image-viewer {
  border-radius: $radius;

  &--remove-radius {
    border-radius: 0;
  }

  & &__buttons > :last-child:not(:first-child) {
    margin-left: var(--wds-space-200, 8px);
  }

  & &__overlay {
    border-radius: $radius;
    background-color: var(
      --wds-color-fill-transparent-tint,
      rgba(234, 239, 255, 0.2)
    );
    background-image: linear-gradient(
      rgba(0, 11, 49, 0.4),
      rgba(0, 11, 49, 0.4)
    );
    /* stylelint-disable-next-line plugin/use-baseline */
    backdrop-filter: blur(calc(var(--wds-background-blur-350, 28px) / 2));
  }

  & &__overlay--remove-radius {
    border-radius: 0;
  }

  &--status-error &__status-container,
  &--status-warning &__status-container {
    display: none;
  }
}