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

.dso-button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: units.$u2;

  .dso-primary,
  .dso-secondary,
  .dso-tertiary {
    white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- No text wrap after icon

    + .dso-primary,
    + .dso-secondary,
    + .dso-tertiary {
      margin-inline-start: 0;
    }
  }

  &.dso-emphasized {
    background-color: colors.$grijs-5;
    gap: units.$u4;
    padding: units.$u2;

    .dso-tertiary {
      color: colors.$zwart;
    }
  }

  &.dso-align-right {
    justify-content: flex-end;
  }

  &.dso-align-center {
    justify-content: center;
  }

  &.dso-no-wrap {
    flex-wrap: nowrap;
  }
}