@import "settings.button-colors";

@import "mixins/base.focus";
@import "mixins/components.button";

// --------------------------------------------------
// Base
// --------------------------------------------------

.c-button {
  @include c-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

// --------------------------------------------------
// Colours
// --------------------------------------------------

// Auto-generated classes

@each $color-name, $color in $c-button-colors {
  .c-button--#{$color-name} {
    @include c-button-theme($color-name);
  }
}

// --------------
// Custom themes
// --------------

// White buttons with custom text colours

.c-button--white-primary-red-text {
  @include c-button-theme--white-primary-red-text;
}

// Transparent buttons

.c-button--semi-transparent-lighten {
  @include c-button-theme--semi-transparent-lighten;
}
.c-button--semi-transparent-darken {
  @include c-button-theme--semi-transparent-darken;
}
.c-button--transparent-lighten {
  @include c-button-theme--transparent-lighten;
}
.c-button--transparent-darken {
  @include c-button-theme--transparent-darken;
}

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

.c-button--badge {
  @include c-button--badge;
}
.c-button--icon-only {
  @include c-button--icon-only;
}
.c-button--no-border {
  @include c-button--no-border;
}
.c-button--no-border-radius {
  @include c-button--no-border-radius;
}
.c-button--full-width {
  @include c-button--full-width;
}
.c-button--truncated {
  @include c-button--truncated(rem(65));
}
.c-button--small {
  // Small size doesn't apply to badge-style buttons
  &:not(.c-button--badge) {
    @include c-button--small;
  }
  // The icon should remain its normal size for "icon-only" buttons
  &:not(.c-button--badge):not(.c-button--icon-only) {
    @include c-button--small-icon;
  }
}
