@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

// TODO: should we force devlopers to add a .c-button--light-primary class
// so that the following colour classes don't have to override .c-button?
.c-button {
  @include control-button--light-primary; // Default
}
.c-button--light-secondary {
  @include control-button--light-secondary;
}
.c-button--light-tertiary {
  @include control-button--light-tertiary;
}

// 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--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;
}

// On red

.c-button--light-on-red {
  @include control-button--light-on-red;
}
.c-button--dark-on-red {
  @include control-button--dark-on-red;
}
.c-button--transparent-on-red {
  @include control-button--transparent-on-red;
}

// The following colours are used by the accordion only and need
// to be refined, renamed and finessed. Please avoid using them:

.c-button--light-100 {
  @include control-button--light-100;
}
.c-button--light-200 {
  @include control-button--light-200;
}
.c-button--dark-600 {
  @include control-button--dark-600;
}
.c-button--dark-600-v2 {
  @include control-button--dark-600-v2;
}
.c-button--dark-700 {
  @include control-button--dark-700;
}

// --------------------------------------------------
// 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;
}
.c-button--truncated {
  @include control-button--truncated(rem(65));
}

// Small buttons

.c-button--small {
  // Small size doesn't apply to badge-style buttons
  &:not(.c-button--badge) {
    @include control-button--small;
  }
  // The icon should remain its normal size for "icon-only" buttons
  &:not(.c-button--badge):not(.c-button--icon-only) {
    @include control-button--small-icon;
  }
}
