/*
 *  Form
 *    Styles for form elements
 *
 *  Dependencies:
 *
 *  Version:
 *    1.0.0 - 2018/03/07
 */
$c-button--shadow-offset: 5px;
$c-button--background: white;
$c-button--border: $s-color--border--default;
$c-button--text: $s-color--text;

.o-button {
  display: inline-block;
  padding: 0.5em 1em;
  border: $c-button--border;
  @include t-box-shadow(-$c-button--shadow-offset, $c-button--shadow-offset, 0px, rgba(0, 0, 0, 0.5));
  background: $c-button--background;
  text-decoration: none;
  color: $c-button--text;
  transition: all 0.1s $s-animation--ease-out-curve;

  &:hover {
    text-decoration: none;
    color: $c-button--text;
    @include t-box-shadow(-0, 0, 0px, rgba(0, 0, 0, 0.5));
    @include t-transform(translate(-$c-button--shadow-offset, $c-button--shadow-offset))
  }

  ~ .o-button {
    margin-left: $c-button--shadow-offset * 2;
  }
}