/*
 *  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: white;
    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 {
    .o-btn__inner {
      @include t-translate-y($o-btn--padding / 4);
      background: $s-color--btn-default-hover__top;
    }
  }

  &:focus {
    &::before,
    .o-btn__inner {
      //border-color: $s-color--btn-default__focus;
    }
  }
}

//Custom Button Styles