//stylelint-disable  property-no-vendor-prefix, color-named, order/order, selector-no-qualifying-type

button.reset,
.btn {
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.btn {
  background-color: color(primary);
  border-radius: map-get($button, border-radius);
  color: color('background');
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  min-height: map-get($button, height);
  padding: map-get($button, padding-y) map-get($button, padding-x);

  @include breakpoint($container-breakpoint) {
    &:hover {
      background-color: color('foreground');
    }
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .btn {
    @include transition((color, background));
  }
}

.btn-inverted {
  background-color: color('foreground');

  @include breakpoint($container-breakpoint) {
    &:hover {
      background-color: color(primary);
    }
  }
}

.btn-outline {
  background: transparent;
  border: solid map-get($button, border-width) color('foreground');
  color: color('foreground');
  padding: map-get($button, padding-y - map-get($button, border-width)) map-get($button, padding-x - map-get($button, border-width));

  @include breakpoint($container-breakpoint) {
    &:hover {
      background-color: color('foreground');
      color: color('background');
    }
  }

  &.btn-inverted {
    border-color: color('background');
    color: color('background');

    @include breakpoint($container-breakpoint) {
      &:hover {
        background-color: color('background');
        color: color('foreground');
      }
    }
  }
}