@import "src/assets/variables";

$button-color: $primary-color !default;
$button-background-color: $primary-background-color !default;
$button-primary-background-color: $primary-color !default;
$button-secondary-background-color: $secondary-background-color !default;
$button-tertiary-background-color: $tertiary-background-color !default;
.muncher-button {
  font-family: $button-font;
  color: $button-color;
  background: $button-background-color;
  text-decoration: none;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
  white-space: nowrap;

  a {
    text-decoration: none;
  }

}


.muncher-button--primary {
  color: $button-background-color;
  background: $button-primary-background-color;
}

.muncher-button--secondary {
  background: $button-secondary-background-color;
}

.muncher-button--tertiary {
  background: $button-tertiary-background-color;
}

.muncher-button--transparent {
  background: none;
}

.muncher-button--danger {
  color: $button-background-color;
  background: $danger-color;
}

.muncher-button--active {
  background: $button-secondary-background-color;
}

.muncher-button--small {
  font-size: .8rem;
  padding: .4rem;
}

.muncher-button--medium {
  font-size: .9rem;
  padding: .5rem .8rem;
}

.muncher-button--large {
  font-size: 1rem;
  padding: .5rem .8rem;
}

.muncher-button--rounded {
  border-radius: 50%;
  padding: .5rem;
}

.muncher-button:disabled {
  color: $disabled-color;
}

.muncher-button:hover {
  opacity: .7;
}

.muncher-button--nav {
  color: $nav-color;
  background: $nav-background-color;
  font-size: 1rem;
  text-align: center;
  display: block;

  a {
    color: $nav-color;
    text-decoration: none;
  }

  @media (min-width: $large-size) {
    padding: 0 .5rem;
    display: inline-block;

  }
}