@import "mixins/base.controls";
@import "mixins/base.focus";

// --------------------------------------------------
// Base-level styles
// --------------------------------------------------

.c-button {
  @include control-button;
}
// Normally we wouldn't use an element selector in the "components" layer of
// the ITCSS pyramid, but line-height is inconsistent between <button> vs <a>
// elements, in some browsers (and unfortunately, this still doesn't fix it 100%)
a.c-button {
  line-height: normal;
}
// Fixes Firefox issue where submit button still has default dotted focus outline
// sass-lint:disable no-vendor-prefixes, no-misspelled-properties
.c-button:-moz-focusring,
.c-button[type="button"]:-moz-focusring,
.c-button[type="reset"]:-moz-focusring,
.c-button[type="submit"]:-moz-focusring {
  @include focus-outline;
}
// sass-lint:enable no-vendor-prefixes, no-misspelled-properties

// --------------------------------------------------
// Colour themes
// --------------------------------------------------

// Light

.c-button {
  @include control-button--light-primary; // Default
}
.c-button--light-secondary {
  @include control-button--light-secondary;
}

// Dark

.c-button--dark-primary {
  @include control-button--dark-primary;
}
.c-button--dark-secondary {
  @include control-button--dark-secondary;
}

// Blue

.c-button--blue-primary {
  @include control-button--blue-primary;
}
.c-button--blue-secondary {
  @include control-button--blue-secondary;
}

// Utility

.c-button--utility-primary--inactive {
  @include control-button--utility-primary--inactive;
}
.c-button--utility-primary--red {
  @include control-button--utility-primary--red;
}
.c-button--utility-primary--green {
  @include control-button--utility-primary--green;
}
.c-button--utility-secondary--red {
  @include control-button--utility-secondary--red;
}
.c-button--utility-secondary--green {
  @include control-button--utility-secondary--green;
}

// --------------------------------------------------
// Display options
// --------------------------------------------------

.c-button--badge {
  @include control-button--badge;
}
.c-button--icon-only {
  @include control-button--icon-only;
}
.c-button--no-border {
  @include control-button--no-border;
}
.c-button--no-border-radius {
  @include control-button--no-border-radius;
}
.c-button--full-width {
  @include control-button--full-width;
}
