.button {

display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #555;
text-align: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;

&:hover,
&:focus,
&:active {
  color: #333;
  border-color: #888;
  outline: 0;
}

&--primary {
  color: $white;
  background-color: $primary-color;
  border-color: $primary-color;
  font-weight: 800;
  border: 0;

  &:hover,
  &:focus,
  &:active {
    color: $white;
    background-color: $primary-color-dark;
    border: 0;
  }
}

&--flat {
  color: $primary-color;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  border: 0;

  &:hover,
  &:focus,
  &:active {
    border: 0;
    color: $primary-color;
    background: fade-out($primary-color, 0.8);
  }

  &.button--left {
    left: -10px;
  }

  &.button--right {
    right: -10px;
  }

  &.button--bottom {
    bottom: -10px;
  }
}

&--white {
  color: $primary-color;
  border: 0;
  background: $white;

  &:hover,
  &:focus,
  &:active {
    background: rgba($white, 0.8);
    border: 0;
    color: $primary-color;
  }
}

&--left {
  align-self: flex-start;
}

&--right {
  align-self: flex-end;
  margin-left: auto;
}

&--bottom {
  margin-top: auto;
  margin-bottom: 0;
}

&--center {
  align-self: center;
}

}