@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../button/button.scss" as *;

.ds-blocked-content {
  background-color: $ds-color-surface-primary;
  margin: 0;
  padding: ds-spacing($ds-s-100 0 $ds-s-200);

  .ds-blocked-content__inner {
    text-align: center;
    border: ds-border-width(xxs) solid $ds-color-border-primary;
    border-radius: ds-border-radius(012);
    padding: ds-spacing($ds-s-200 $ds-s-100 $ds-s-100);
  }

  .ds-blocked-content__body {
    margin: ds-spacing(0 0 $ds-s-200);
    @include ds-typography($ds-typography-functional-body-md) {
      color: $ds-color-text-primary;
    }
    @at-root .ds-force-px#{&} {
      @include ds-typography($ds-typography-functional-body-md, true);
    }
  }

  .ds-blocked-content__link {
    display: block;
    margin-top: ds-spacing($ds-s-050);
    word-break: break-word;
    @include ds-link($ds-link-paragraph);
  }

  .ds-blocked-content__title {
    margin: ds-spacing(0 0 $ds-s-050);
    @include ds-typography(
      $ds-typography-functional-heading-xxs,
      $lineHeight: $ds-lineheight-md,
      $fontWeight: $ds-fontweight-semibold
    ) {
      color: $ds-color-text-primary;
    }
    @at-root .ds-force-px#{&} {
      @include ds-typography(
        $ds-typography-functional-heading-xxs,
        $forcePx: true,
        $lineHeight: $ds-lineheight-md,
        $fontWeight: $ds-fontweight-semibold
      );
    }
  }
}