.btn
  $btn-size: rem(23)

  display: inline-block
  position: relative
  cursor: pointer
  margin: 0 0 rem(18) 0
  padding: rem(7) rem(12) rem(8)
  background-color: $primary-color
  border: rem(1) solid $primary-color
  text-decoration: none
  text-align: center
  font-size: rem(18)
  font-weight: bold
  line-height: 1.33
  text-transform: uppercase
  color: $white
  box-shadow: $grey-light rem(2) rem(2) rem(2) 0
  +user-select(none)
  +appearance(none)
  +transition( all .1s ease-in-out )

  .icon
    width: $btn-size
    height: $btn-size
    vertical-align: top

  &:hover
    color: $white
    background: $grey-dark
    border-color: $grey-dark

  &:active,
  &.btn--active
    color: $white
    background: $black
    border-color: $black
    box-shadow: none
    +transition( none)

  &:focus
    outline: 0

  // ----------------------------------------------------------
  // SECONDARY STYLE
  // ----------------------------------------------------------
  &--secondary

    &,
    &.btn--active
      background-color: $white
      box-shadow: $secondary-color rem(1) rem(1) rem(2) 0

    &,
    &:hover
      color: $body-font-color
      border-color: $secondary-color

    &:hover
      background-color: $grey-light

    &:active,
    &.btn--active
      box-shadow: none
      background-color: $grey-light
      color: $primary-color
      border-color: $grey-light

  // ----------------------------------------------------------
  // TERTIARY STYLE
  // ----------------------------------------------------------
  &--tertiary

    &,
    &.btn--active
      box-shadow: none
      color: $secondary-color

    &,
    &:hover,
    &:active,
    &.btn--active
      border-color: transparent
      background-color: transparent

    &:hover
      color: $body-font-color

    &:active,
    &.btn--active
      color: $primary-color

  // ----------------------------------------------------------
  // ONLY ICON STYLE
  // ----------------------------------------------------------
  &--icon
    width: rem(40)
    height: rem(40)
    padding: rem(8) 0
    background: transparent
    border: none
    box-shadow: none
    color: $secondary-color

    &:hover,
    &:active
      border-radius: 100%
      background-color: $grey-light

    &:hover
      color: $body-font-color

    &:active
      color: $primary-color

  // ----------------------------------------------------------
  // SMALL STYLE
  // ----------------------------------------------------------
  &--small
    padding-top: rem(5)
    padding-bottom: rem(5)

  // ----------------------------------------------------------
  // EXPANDED STYLE
  // ----------------------------------------------------------
  &--expanded
    width: 100%

  // ----------------------------------------------------------
  // GROUP CONTAINER
  // ----------------------------------------------------------
  &__group
    position: relative
    display: inline-block
    vertical-align: middle
    margin: rem(12) 0 rem(18)

    > .btn
      position: relative
      float: left
      margin-right: rem(1)
      margin-bottom: rem(1)

      &:last-child
        margin-right: 0