@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../icon-sprite/icon-sprite.scss";

$ds-disclaimer__icon-size: 20px;
$ds-btn-outlined__border-width: ds-border-width(xxs);

.ds-disclaimer {
  padding-bottom: ds-spacing($ds-s-100);
  box-sizing: border-box;

  .ds-disclaimer__body-html,
  .ds-disclaimer__icon-wrapper {
    background-color: $ds-color-surface-primary-raised-soft;
    padding: ds-spacing($ds-s-075 $ds-s-100);
  }

  .ds-disclaimer__icon-wrapper {
    // instead of margin to keep background color
    padding-right: ds-spacing($ds-s-050);
  }

  .ds-disclaimer__body-html {
    margin: 0;
    flex-grow: 1;
    border-radius: ds-border-radius(050);

    @include ds-typography($ds-typography-functional-body-sm) {
      color: $ds-color-text-primary;
    }

    @at-root .ds-force-px#{&} {
      @include ds-typography($ds-typography-functional-body-sm, true);
    }

    a {
      @include ds-link($ds-link-paragraph);
    }
    b,
    strong {
      @include ds-typography($ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-semibold) {
        color: $ds-color-text-primary;
      }
      @at-root .ds-force-px#{&} {
        @include ds-typography($ds-typography-functional-body-sm, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
      }
    }
  }

  .ds-icon {
    position: relative;
    display: flex;
    height: ds-px-to-rem($ds-disclaimer__icon-size);
    width: ds-px-to-rem($ds-disclaimer__icon-size);
    margin: 0;
    color: $ds-color-text-primary;
    @at-root .ds-force-px#{&} {
      height: $ds-disclaimer__icon-size;
      width: $ds-disclaimer__icon-size;
    }
    svg {
      fill: currentColor;
    }
  }

  &.ds-disclaimer--with-icon {
    display: flex;
    flex-direction: row;

    .ds-disclaimer__body-html {
      padding-left: 0;
      border-radius: ds-border-radius(0 050 050 0);
    }

    .ds-disclaimer__icon-wrapper {
      border-radius: ds-border-radius(050 0 0 050);
    }
  }

  &.ds-disclaimer--native {
    .ds-disclaimer__body-html,
    .ds-disclaimer__icon-wrapper {
      background-color: $ds-color-surface-native-subtle;
    }

    .ds-icon,
    .ds-disclaimer__body-html,
    .ds-disclaimer__body-html b,
    .ds-disclaimer__body-html strong {
      color: $ds-color-text-primary;
    }
  }
}