/*

####################
### ATOM: button ###
####################

### INFO:

The regular button has only one size and no modifiers yet.
The text style is always extended from light headline 3 but in uppercase letters.

### MODIFIERS:

none

*/

@import '_extends.scss';
@import '_functions.scss';
@import '_mixins.scss';
@import '_variables.scss';

@import 'components/atoms/_color.scss';
@import 'components/atoms/_text.scss';
@import 'components/atoms/_headline.scss';

@mixin unset-button {
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
}

@mixin btn {
  @include hl;
  font-size: 1em;
  @include color-white;
  display: inline-block;
  max-width: 100%;
  width: auto;
  height: auto;
  padding: 0.75em 1.75em;
  margin: 0;
  text-decoration: none;
  text-align: center;
  border-radius: 3px;
  background-color: color('blue-ribbon');
  border: none;
  cursor: pointer;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

  &:hover {
    transform: translateY(-0.125em);
    box-shadow: 0 25px 20px -15px rgba(0, 0, 0, 0.15);
  }

  @media (min-width: 768px) {
    padding: 1em 2em;
  }
}
