//applies styles other than button shape.
//pointed corners are controlled through modified-border-radius

//breaking our normal pattern, we want to remove all shadow effects on button click
.btn:focus,
.btn.focus {
  box-shadow: none;
}

// !!MUST!! use alongside bootstrap's button style class (e.g. .btn-primary)
.mmui-button,
.mmui-link-button {
  // @extend .btn;
  border: 0;
  padding: 0px 3.4rem;
  line-height: 4rem; //css trick to vertically centering one-line

  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.162rem;
  text-transform: uppercase;
  text-decoration: none;


  color: $mm-neutral-white !important;

  &:focus {
    background-color: $mm-core-digital-blue-70;
    color: $mm-neutral-white !important;
  }
  &:hover {
    background-color: $mm-core-brand-blue-90;
    color: $mm-neutral-white;
  }
  &:active {
    background-color: $mm-core-brand-blue-90 !important;
    color: $mm-neutral-white !important;
  }
  &.disabled {
    border-color: $mm-neutral-gray-10;
    background: $mm-neutral-gray-10;
    color: $mm-seq-gray-50 !important;
  }
}

//note, bootstrap prioritizes support for <button> rather than <a> tags
.mmui-link-button {
  &:visited {
    color: $mm-neutral-white;
  }
}

.mmui-secondary-button,
.mmui-link-secondary-button {
  //height: 100%;
  //display: inline-block; //to enable giving height
  //height: 45px;
  line-height: 4rem; //css trick to vertically centering one-line
  padding: 0px 3.4rem;

  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.162rem;
  text-transform: uppercase;
  text-decoration: none;

  background-color: transparent;
  color: $mm-core-digital-blue-70;
  border-color: $mm-core-digital-blue-70;
  border-style: solid;
  border-width: 0.1rem;

  &:focus {
    background-color: transparent;
    color: $mm-core-digital-blue-70;
    border-color: $mm-core-digital-blue-70;
    border-style: solid;
    border-width: 0.1rem;
  }
  &:hover {
    background-color: $mm-neutral-gray-30 !important;
    color: $mm-neutral-black !important;
    border: 1px solid $mm-neutral-gray-30 !important;
  }
  &:active {
    background-color: $mm-neutral-gray-30 !important;
    color: $mm-neutral-black !important;
    border: 1px solid $mm-neutral-gray-30 !important;
  }
  &.disabled {
    background-color: $mm-neutral-white;
    color: $mm-sem-neutral-50;
    border-color: $mm-sem-neutral-50;
  }
}

.mmui-link-secondary-button {
  &:visited {
    color: $mm-core-digital-blue-70;
  }
}

//specifically for use in hero
.mmui-large-button,
.mmui-link-large-button {
  //height: 100%;
  display: inline-block; //to enable giving height
  height: 48px;
  line-height: 48px; //css trick to vertically centering one-line
  padding: 0 50px 0 50px;

  font-size: 1.4rem;
  letter-spacing: 0.194rem;
}

.mmui-icon-button {
  padding: 0 8px;

  > i {
    font-size: 1.8rem;
    vertical-align: -25% !important;
  }
}

//as recommended by bootstrap here: https://getbootstrap.com/docs/4.0/components/buttons/#disabled-state
.disabled {
  pointer-events: none;
}


.btn-link {
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}