@import './mixins/mat-button-theme';

// Automate mixins
@mixin base-box-shadow($blurRadius: 14px, $shadowColor: $gray-pale) {
  box-shadow: 0 1px $blurRadius $shadowColor;
}

// Empty state list item
@mixin empty-item() {
  border: 1px dashed $gray-light;
  border-radius: $global-radius;
  color: $gray;
  font-size: .75em;
  margin-top: 1.5em;
  padding: 1em;
  text-align: center;
}

// Buttons
@mixin base-button($bgColor: transparent, $borderColor: $gray-pale, $padding1: 1em, $padding2: 1em, $hasBorder: true) {
  display: inline-block;
  padding: $padding1 $padding2;
  background-color: $bgColor;
  @if $hasBorder == true {
    border: 1px solid $borderColor;
  } @else {
    border: 0;
  }
  border-radius: $global-radius;
  text-align: center;
  transition: box-shadow .2s;

  &:hover {
    @include base-box-shadow();
  }
}

@mixin cta-button($padding1: 1em, $padding2: 1em, $hasShadow: true) {
  @extend %primary-gradient;
  @include base-button;
  border: 0;
  @if $hasShadow == true {
    @include base-box-shadow($blurRadius: 24px);
  } @else {
    box-shadow: none;
  }
  color: $white;
  padding: $padding1 $padding2;
}


// Popover modal box
@mixin modal-box() {
  @include base-box-shadow();
  background-color: $white;
  border: 1px solid $gray-pale;
  border-radius: $global-radius;
  padding: 1.5em;
}
