@import "../../styles/type";

.page-title,
h1.default-style {
  @include ca-type-ideal-page-title;
  margin-bottom: $ca-grid;
  margin-top: 0;
}

.title,
h2.default-style {
  @include ca-type-ideal-title;
  margin-bottom: $ca-grid;
  margin-top: 0;
}

.display,
h3.default-style {
  @include ca-type-ideal-display;
  margin-bottom: $ca-grid;
  margin-top: 0;
}

.heading,
h4.default-style,
h5.default-style,
h6.default-style {
  @include ca-type-ideal-heading;
  margin-bottom: $ca-grid;
  margin-top: 0;
}

.lede {
  @include ca-type-ideal-lede;
  margin-bottom: $ca-grid;
  margin-top: 0;
}

.paragraph,
p.default-style {
  @include ca-type-ideal-body;
  margin-bottom: $ca-grid;
  margin-top: 0;
}

.body,
.default-style {
  @include ca-type-ideal-body;
  margin: 0;
}

.body-bold {
  @include ca-type-ideal-body-bold;
  margin: 0;
}

.small {
  @include ca-type-ideal-small;
  margin: 0;
}

.small-bold {
  @include ca-type-ideal-small-bold;
  margin: 0;
}

.notification {
  @include ca-type-ideal-notification;
  margin: 0;
}

.label {
  @include ca-type-ideal-label;
  margin: 0;
}

.control-action {
  @include ca-type-ideal-control-action;
  margin: 0;
}

.button {
  @include ca-type-ideal-button;
  margin: 0;
}

// We double the class selector to increase specificity above rules like `h1.default-style`
.inheritBaseline.inheritBaseline {
  @include ca-inherit-baseline;
}

// Required for aligning text alongside other elements e.g. Button
.inline.inline {
  display: inline-flex;
  margin-bottom: 0;
}

// Alias classes for Elm CSS modules
.defaultStyle {
  composes: default-style;
}
.pageTitle {
  composes: page-title;
}
.bodyBold {
  composes: body-bold;
}
.smallBold {
  composes: small-bold;
}
.controlAction {
  composes: control-action;
}