@use "../../variables/units";
@use "../../variables/colors";

@use "application-heading.variables" as application-heading-variables;

@mixin root() {
  border-block-end: 1px solid colors.$grijs-20;

  h2 {
    margin-block-start: units.$u2;
  }

  .dso-steps-indicator {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    span.dso-step {
      color: colors.$grasgroen;
      display: block;
      flex: 1 0;
      flex-basis: auto;
      font-size: 1rem;
      font-weight: normal;
      padding-block-start: #{application-heading-variables.$step-padding * 0.5};
      text-align: end;
    }
  }
}