/*
 *  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
 */

//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: 0.5em;
    background: $s-color--btn-default__bottom;
  }

  &__inner {
    position: relative;
    background: white;
    display: block;
    padding: 0.75em 1.5em;
    border-radius: 0.5em;
    border: $s-color--btn-default__border;
    transition: all 0.1s $s-animation--ease-out;
  }

  &:hover {
    .o-btn__inner {
      @include t-translate-y(0.1em);
    }
  }

  &:active {
    .o-btn__inner {
      @include t-translate-y(0.4em);
      background: $s-color--btn-default-hover__top;
    }
  }

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