@use "../abstracts/mixins" as *;
@use "../abstracts/variables" as *;
@use "../utilities/border" as *;
// ------------------------------------
// Buttons
// ------------------------------------

.button {
  @include button-style(theme-color("primary"));
  font-weight: $font-weight-semibold;
  font-size: 1rem;
  padding: spacer(2) spacer(3);
  @include border-radius(10px);
  transition: background-color 0.3s ease, color 0.3s ease;

  &:hover,
  &:focus {
    background-color: theme-color("primary-dark");
    color: #fff;
    outline: none;
  }

  &:disabled,
  &[disabled] {
    // background-color: $color-muted;
    cursor: not-allowed;
    opacity: 0.65;
  }
}

// Variants

.button-secondary {
  @include button-style(
    theme-color("secondary"),
    $text-color: theme-color("dark")
  );
  border: 1px solid theme-color("secondary");

  &:hover,
  &:focus {
    background-color: theme-color("secondary-dark");
    color: #fff;
  }
}

.button-outline {
  background-color: transparent;
  color: theme-color("primary");
  border: 2px solid theme-color("primary");

  &:hover,
  &:focus {
    background-color: theme-color("primary");
    color: #fff;
  }
}

// Sizes

.button-sm {
  font-size: 0.875rem;
  padding: spacer(1) spacer(2);
}

.button-lg {
  font-size: 1.25rem;
  padding: spacer(3) spacer(4);
}