@use '../variables' as variables;
@use '../mixins' as mixins;
@use 'sass:map';

.btn {
  --btn-active-bg: inherit;
  --btn-active-border-color: transparent;
  --btn-active-color: inherit;
  --btn-bg: transparent;
  --btn-border-color: #{variables.$btn-border-color};
  --btn-border-radius-xs: #{variables.$btn-border-radius-xs};
  --btn-border-radius: #{variables.$btn-border-radius};
  --btn-border-radius-sm: #{variables.$btn-border-radius-sm};
  --btn-border-radius-lg: #{variables.$btn-border-radius-lg};
  --btn-border-radius-xl: #{variables.$btn-border-radius-xl};
  --btn-border-width: #{variables.$btn-border-width};
  --btn-color: #{variables.$btn-color};
  --btn-disabled-opacity: #{variables.$btn-disabled-opacity};
  --btn-hover-bg: inherit;
  --btn-hover-border-color: inherit;
  --btn-hover-color: var(--btn-color);
  --btn-hover-text-decoration: #{if(variables.$link-hover-decoration == underline, none, null)};
  --btn-font-family: #{variables.$btn-font-family};
  --btn-font-size-xs: #{variables.$btn-font-size-xs};
  --btn-font-size: #{variables.$btn-font-size};
  --btn-font-size-sm: #{variables.$btn-font-size-sm};
  --btn-font-size-lg: #{variables.$btn-font-size-lg};
  --btn-font-size-xl: #{variables.$btn-font-size-xl};
  --btn-font-weight: #{variables.$btn-font-weight};
  --btn-line-height: #{variables.$btn-line-height};
  --btn-padding-x-xs: #{variables.$btn-padding-x-xs};
  --btn-padding-x: #{variables.$btn-padding-x};
  --btn-padding-x-sm: #{variables.$btn-padding-x-sm};
  --btn-padding-x-lg: #{variables.$btn-padding-x-lg};
  --btn-padding-x-xl: #{variables.$btn-padding-x-xl};
  --btn-padding-y-xs: #{variables.$btn-padding-y-xs};
  --btn-padding-y: #{variables.$btn-padding-y};
  --btn-padding-y-sm: #{variables.$btn-padding-y-sm};
  --btn-padding-y-lg: #{variables.$btn-padding-y-lg};
  --btn-padding-y-xl: #{variables.$btn-padding-y-xl};
  --btn-text-decoration: #{if(variables.$link-decoration == none, null, none)};
  --btn-white-space: #{variables.$btn-white-space};

  align-items: center;
  background-color: var(--btn-bg);
  border: var(--btn-border-width) solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  color: var(--btn-color);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  text-decoration: var(--btn-text-decoration);
  user-select: none;
  vertical-align: middle;
  white-space: var(--btn-white-space);

  @include mixins.hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-color);
    text-decoration: var(--btn-hover-text-decoration);
  }

  &:focus,
  &.focus {
    background-color: var(--btn-bg);
    border-color: var(--btn-border-color);
    color: var(--btn-hover-color);
    outline: 0;
  }

  &:active,
  &.active {
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
    color: var(--btn-active-color);
  }

  &:disabled,
  &.disabled {
    pointer-events: none;
    opacity: var(--btn-disabled-opacity);
  }
}

//
// Link buttons
//

// Make a button look and behave like a link
.btn-link {
  --btn-link-color: var(--link-color);
  --btn-link-decoration: var(--link-decoration);
  --btn-link-disabled-color: #{variables.$btn-link-disabled-color};
  --btn-link-font-weight: var(--font-weight-normal);
  --btn-link-hover-color: var(--link-hover-color);
  --btn-link-hover-decoration: var(--link-hover-decoration);

  color: var(--btn-link-color);
  text-decoration: var(--btn-link-decoration);
  font-weight: var(--btn-link-font-weight);

  @include mixins.hover {
    color: var(--btn-link-hover-color);
    text-decoration: var(--btn-link-hover-decoration);
  }

  &:focus,
  &.focus {
    text-decoration: var(--btn-link-hover-decoration);
  }

  &:disabled,
  &.disabled {
    color: var(--btn-link-disabled-color);
  }

  // No need for an active state here
}

//
// Unstyled buttons
//

// Remove styles from the button, typically used for icons or other elements for accessibility reasons

.btn-unstyled {
  appearance: none;
  background: inherit;
  border: unset;
  color: inherit;
  cursor: pointer;
  font: inherit;
  margin: unset;
  padding: unset;
  text-align: unset;
}

//
// Button sizes
//

.btn-xs {
  --btn-font-size: var(--btn-font-size-xs);
  --btn-border-radius: var(--btn-border-radius-xs);
  --btn-padding-x: var(--btn-padding-x-xs);
  --btn-padding-y: var(--btn-padding-y-xs);
}

.btn-sm {
  --btn-font-size: var(--btn-font-size-sm);
  --btn-border-radius: var(--btn-border-radius-sm);
  --btn-padding-x: var(--btn-padding-x-sm);
  --btn-padding-y: var(--btn-padding-y-sm);
}

.btn-lg {
  --btn-font-size: var(--btn-font-size-lg);
  --btn-border-radius: var(--btn-border-radius-lg);
  --btn-padding-x: var(--btn-padding-x-lg);
  --btn-padding-y: var(--btn-padding-y-lg);
}

.btn-xl {
  --btn-font-size: var(--btn-font-size-xl);
  --btn-border-radius: var(--btn-border-radius-xl);
  --btn-padding-x: var(--btn-padding-x-xl);
  --btn-padding-y: var(--btn-padding-y-xl);
}

//
// Alternate buttons
//

@each $color, $value in map.merge(variables.$colors, variables.$grays) {
  .btn-#{$color} {
    @include mixins.button-variant($value);
  }

  .btn-outline-#{$color} {
    @include mixins.button-outline-variant($value);
  }
}

.btn-rounded {
  border-radius: 2em;
}

//
// Circle buttons
//

.btn-circle {
  --btn-circle-radius: #{variables.$btn-circle-radius};

  border-radius: 50%;
  height: var(--btn-circle-radius);
  padding: 0;
  width: var(--btn-circle-radius);
}

// --- One-offs

// White outline, orange on hover

.btn-outline-white-orange {
  @include mixins.button-outline-variant(variables.$white, variables.$orange-dark, variables.$orange-dark);
}