@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-default {
  @include c-button-theme--transparent-default;
}
.c-button--transparent-lighten {
  @include c-button-theme--transparent-lighten;
}
.c-button--transparent-darken {
  @include c-button-theme--transparent-darken;
}

.c-button--transparent-darken-grey-660 {
  @include c-button-theme--transparent-darken-grey-660;
}

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

.c-button--badge {
  @include c-button--badge;
}
.c-button--icon-right {
  @include c-button--icon-right;
}
.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;
  }
}
.c-button--pillbox {
  @include c-button--pillbox;
}

// Pulse animation
.c-button__icon-pulse {
  position: relative;
  &::before {
    content: "";
    width: rem(22);
    height: rem(22);
    background-color: $color-blue-500;
    border-radius: 50%;
    display: block;
    transform: translateZ(-1px) scale3d(1, 1, 1);
    position: absolute;
  }
  .c-button__icon {
    min-width: rem(22);
    width: rem(22);
    height: rem(22);
    background-color: $color-white;
    border-radius: 50%;
    border: rem(2) solid $color-white;
    transform: translateZ(0px);
  }
}
.c-button--icon-right .c-button__icon-pulse::before {
  right: 0;
}
.c-button__icon-pulse--animate::before {
  @include animation(c-button-pulse, 1.66s, ease-out, 0s, 3, normal, forwards, running);
}
@keyframes c-button-pulse {
  from {
    transform: translateZ(-1px) scale3d(1, 1, 1);
    opacity: 0.8;
  }
  to {
    transform: translateZ(-1px) scale3d(3.2, 3.2, 1);
    opacity: 0;
  }
}

// Modifier for following authors 
.c-button__text--author {
  margin-left: rem(5);
}
