// variables
$colors: (
    "primary": var(--primary),
    "secondary": var(--secondary),
    "tertiary": var(--tertiary),
    "success": var(--success),
    "warning": var(--warning),
    "danger": var(--danger),
    "dark": var(--dark),
    "medium": var(--medium),
    "light": var(--light)
);

// mixins
@mixin btn-outline($color) {
  outline: 2px solid $color;
  color: $color;
}

/* buttons */
.btn {
  all: unset;
  max-width: 100%;
  height: var(--btn-height);

  &:disabled {
    @include btn-outline(#888);
  }

  @each $color-name, $color-value in $colors {
    &-#{$color-name} {
      @include btn-outline($color-value);
    }
  }
}