@import 'mixins';
@import 'extends';

button,
.base--button {
  @extend %base--button;
}

.base--button {
  &_black {
    @include base--button($color: color('gray', 90), $border: color('gray', 90));
  }

  &_teal {
    @include base--button($color: color('teal', 50), $border: color('teal', 50));
  }

  &_icon-hyperlink {
    @include button--strip-styles();
    text-decoration: none;
    color: color('gray', 90);

    &--icon {
      margin-right: 0.2em;

      &.icon-reset {
        font-size: 1.5em;
      }
    }

    &--link {
      @include base--a;
      padding-bottom: 0.1em;
    }
  }
}

input[type="submit"],
button[type="submit"],
.base--button_submit {
  @include base--button();
}

input[type="reset"],
button[type="reset"],
.base--button_reset {
  @include base--button();
}