@use "../../variables/units";
@use "../../variables/colors";
@use "../button";
@use "../../global/mixins/set-colors.mixin" as set-colors;

@mixin root() {
  padding-block: units.$u2;
  padding-inline: units.$u2 units.$u4;
  position: relative;

  @include set-colors.apply(colors.$grijs-5, "info");
}

@mixin richContent() {
  *:first-child {
    margin-block-start: 0;
  }

  img {
    display: block;
    margin-block: units.$u1;
    margin-inline: auto;
    max-inline-size: 100%;
  }

  a {
    &:hover,
    &:focus,
    &:active,
    &:visited {
      &#{button.$not-dso-buttons} {
        color: colors.$zwart;
      }
    }

    &:active {
      text-decoration: none;
    }
  }

  .dso-tertiary:not([disabled]) {
    color: colors.$zwart;

    &:hover,
    &:focus {
      &,
      dso-icon {
        color: colors.$grijs-60;
        text-decoration: underline;
      }
    }
  }
}

@mixin children() {
  .dso-rich-content {
    @include richContent();
  }

  @include set-colors.apply(colors.$grijs-5, "info");
}