/*
 *  Button
 *    Clicky Tappy Touchy Buttons!
 *
 *  Dependencies:
 *    styles/settings/animation.scss
 *    styles/settings/colors.scss
 *    styles/tools/_gradient.scss
 *
 *
 *  Version:
 *    1.0.1 - 2018/05/14
 */
$o-btn--padding: 1.5em;//Base Padding size.

//Default Button (applies to all styles)
.o-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-bottom: 0.5em;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    border: $s-color--btn-default__border;
    border-radius: $o-btn--padding / 3;
    background: $s-color--btn-default__bottom;
  }

  &__inner {
    position: relative;
    background: $s-color--btn-default__top;
    display: block;
    padding: ( $o-btn--padding / 2 ) $o-btn--padding;
    border-radius: $o-btn--padding / 3;
    border: $s-color--btn-default__border;
    transition: all 0.1s $s-animation--ease-out;
  }

  &:hover {
    .o-btn__inner {
      @include t-translate-y($o-btn--padding / 10);
    }
  }

  &:active &__inner {
    @include t-translate-y($o-btn--padding / 4);
    background: $s-color--btn-default-hover__top;
  }
}

/*** Custom Button Styles ***/
@mixin o-basic-button-design($top, $bottom) {
  &::before,
  &:active &__inner {
    background: $bottom;
  }

  &__inner {
    background: $top;
  }
}

//Primary (Blue)
.o-btn--style-primary {
  @include o-basic-button-design(
    $s-color--btn-primary__top,
    $s-color--btn-primary__bottom
  );
}

//Secondary (Light Blue)
.o-btn--style-secondary {
  @include o-basic-button-design(
    $s-color--btn-secondary__top,
    $s-color--btn-secondary__bottom
  );
}

//Danger
.o-btn--style-danger {
  @include o-basic-button-design(
    $s-color--btn-danger__top,
    $s-color--btn-danger__bottom
  );
}