// Button
//
// Single button.
//
// Markup:
// <button class="btn {{{modifier_class}}}">Button</button>
//
// .btn--primary - Primary button type used throughout the site.
//
// Styleguide Components.button
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: rem(14);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 3px solid transparent;
  border-radius: 0;
  text-transform: uppercase;
  transition: $transition-time all;

  @include breakpoint-min($tablet-breakpoint) {
    font-size: rem(18);
    font-weight: 700;
  }

  &--primary {
    background-color: transparent;
    border-color: $primary-accent-color;
    color: $primary-accent-color;

    &:hover {
      background-color: $primary-accent-color;
      color: #fff;
    }
  }

  &--spaced {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  &.is-loading {
    position: relative;
    padding-left: 40px;
  }
}

// Menu toggle button
//
// Menu toggle button. (Only visible on viewport smaller than 768px, resize your browser to see it.)
//
// Markup:
// <div class="menu-toggle" id="menuToggle">
//   <div class="menu-toggle__lines">
//     <div class="menu-toggle__line1"></div>
//     <div class="menu-toggle__line2"></div>
//     <div class="menu-toggle__line3"></div>
//   </div>
// </div>
//
// Styleguide Components.menu-toggle
.menu-toggle {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  border: 2px solid $primary-accent-color;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: z-index(menuToggle);

  @include breakpoint-min($tablet-breakpoint) {
    display: none;
  }

  &__lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &__line1,
  &__line2,
  &__line3 {
    width: 13px;
    height: 2px;
    margin: 3px auto;
    background-color: $primary-accent-color;
    transition: $transition-time all;
  }
}