.button {
  // For the moment, these are defined as little mixins over in __vars/mixins so they can be included elsewhere

  @include button;

  // Sizes

  &--xs {
    @include button--xs;
  }

  &--sm {
    @include button--sm;
  }

  &--lg {
    @include button--lg;
  }

  &--xl {
    @include button--xl;
  }

  // Layout

  &--block {
    @include button--block;
  }

  &--pointy {
    @include button--pointy;
  }

  &--clipped {
    @include button--clipped;
  }

  &--caps {
    text-transform: uppercase;
  }

  // Colours

  &--slate {
    @include button--slate;
  }

  &--outline {
    @include button--outline;
  }

  &--outline-slate {
    @include button--outline-slate;
  }

  &[disabled] {
    @include button--disabled;
  }
}