/* ==================================
   #BUTTONS
   ================================== */

/* Variables
   ========================================================================== */

$au-button-height: $au-unit-large - $au-unit-small !default;
$au-button-height-large: $au-unit-large !default;
$au-button-font-size: var(--au-h6) !default;
$au-button-font-size-large: var(--au-h5) !default;
$au-button-border: 0.2rem !default;
$au-button-border-radius: var(--au-radius) !default;
$au-button-color: var(--au-white) !default;
$au-button-contrast-color: var(--au-blue-700) !default;
$au-button-contrast-hover-color: var(--au-blue-900) !default;
$au-button-contrast-active-color: var(--au-blue-900) !default;
$au-button-contrast-visited-color: var(--au-blue-700) !default;
$au-button-secondary-color: var(--au-blue-700) !default;
$au-button-secondary-hover-color: var(--au-blue-900) !default;
$au-button-secondary-contrast-active-color: var(--au-blue-200) !default;
$au-button-link-height: $au-unit !default;
$au-button-link-color: var(--au-blue-700) !default;
$au-button-link-color-underline: var(--au-blue-300) !default;
$au-button-link-hover-color: var(--au-blue-900) !default;
$au-button-link-hover-color-underline: var(--au-blue-200) !default;
$au-button-link-secondary-color: var(--au-gray-700) !default;
$au-button-link-secondary-color-underline: var(--au-gray-300) !default;
$au-button-link-secondary-hover-color: var(--au-gray-900) !default;
$au-button-link-secondary-hover-color-underline: var(--au-gray-200) !default;
$au-button-link-active-color: var(--au-gray-900) !default;
$au-button-alert-color: var(--au-white) !default;
$au-button-alert-contrast-color: var(--au-red-600) !default;
$au-button-alert-contrast-hover-color: var(--au-red-700) !default;
$au-button-icon-only-width: $au-button-height !default;
$au-button-icon-only-width-large: $au-button-height-large !default;
$au-button-link-icon-only-width: $au-button-link-height !default;

/* Component
  ========================================================================== */

.au-c-button {
  @include au-font-size(
    $au-button-font-size,
    $au-button-height - $au-button-border * 2
  );
  font-family: var(--au-font);
  font-weight: var(--au-regular);
  cursor: pointer;
  height: $au-button-height;
  text-decoration: none;
  text-align: center;
  appearance: none;
  display: inline-flex;
  gap: $au-unit-tiny;
  align-items: center;
  padding: 0 $au-unit-small; // Visually center the text in the button
  border-radius: $au-button-border-radius;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    color var(--au-transition),
    background-color var(--au-transition),
    border-color var(--au-transition),
    box-shadow var(--au-transition);

  &,
  &:visited {
    color: $au-button-color;
    background-color: $au-button-contrast-color;
    border: $au-button-border solid $au-button-contrast-color;
  }

  &:hover,
  &:focus-visible {
    color: $au-button-color;
    background-color: $au-button-contrast-hover-color;
    border-color: $au-button-contrast-hover-color;
    text-decoration: none;
  }

  &:focus {
    outline: 0;
  }

  &:focus-visible {
    outline: var(--au-outline);
    outline-offset: var(--au-outline-offset);
  }

  &:active {
    border-color: $au-button-contrast-active-color;
    background-color: $au-button-contrast-active-color;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus-visible,
  &.is-disabled:active {
    cursor: not-allowed;
    color: var(--au-gray-700);
    background-color: var(--au-gray-300);
    border-color: var(--au-gray-300);
  }

  &.is-loading,
  &.is-loading:hover {
    position: relative;
    color: var(--au-gray-700);
    background-color: var(--au-gray-300);
    border-color: var(--au-gray-300);
  }
}

/* Modifiers
  ========================================================================== */

.au-c-button--large {
  @include au-font-size($au-button-font-size-large);
  padding: $au-unit-small $au-unit-small $au-unit-small + 0.1rem;
  height: $au-button-height-large;
}

// Primary button
.au-c-button--primary {
  font-weight: var(--au-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Secondary button
.au-c-button--secondary {
  font-weight: var(--au-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &,
  &:visited {
    color: $au-button-secondary-color;
    background-color: transparent;
    border-color: $au-button-secondary-color;
  }

  &:hover,
  &:focus-visible,
  &:active {
    color: $au-button-secondary-hover-color;
    background-color: transparent;
    border-color: $au-button-secondary-hover-color;
  }
}

// Naked button
.au-c-button--naked {
  font-weight: var(--au-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &,
  &:visited {
    color: $au-button-secondary-color;
    background-color: transparent;
    border-color: transparent;
  }

  &:hover,
  &:focus-visible,
  &:active {
    color: $au-button-secondary-hover-color;
    background-color: transparent;
    border-color: transparent;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus-visible,
  &.is-disabled:active {
    color: var(--au-gray-700);
    background-color: transparent;
    border-color: transparent;
  }

  &.is-loading,
  &.is-loading:hover,
  &.is-loading:focus-visible {
    color: var(--au-gray-700);
    background-color: transparent;
    border-color: transparent;
  }
}

// Link button
.au-c-button--link,
.au-c-button--link-bold {
  font-size: inherit;
  border-color: transparent;
  padding: 0 $au-unit-tiny 0;
  height: $au-button-link-height;
  line-height: $au-button-link-height;

  &,
  &:visited {
    color: $au-button-link-color;
    background-color: transparent;
    text-decoration: underline;
    text-decoration-color: $au-button-link-color-underline;
  }

  &:hover,
  &:focus-visible,
  &:active {
    color: $au-button-link-hover-color;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: $au-button-link-hover-color-underline;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus-visible,
  &.is-disabled:active {
    color: var(--au-gray-700);
    background-color: transparent;
    text-decoration: none;
    border-color: transparent;
  }

  &.is-loading,
  &.is-loading:hover {
    color: var(--au-gray-700);
    background-color: transparent;
    border-color: transparent;
    text-decoration: none;
  }
}

.au-c-button--link-bold {
  font-weight: var(--au-medium);
  text-decoration: none;

  &:hover,
  &:focus-visible,
  &:active {
    text-decoration: underline;
  }
}

// Link secondary button
.au-c-button--link-secondary {
  font-size: inherit;
  border-color: transparent;
  padding: 0 $au-unit-tiny 0;
  height: $au-button-link-height;
  line-height: $au-button-link-height;

  &,
  &:visited {
    color: $au-button-link-secondary-color;
    background-color: transparent;
    text-decoration: underline;
    text-decoration-color: $au-button-link-secondary-color-underline;
  }

  &:hover,
  &:focus-visible,
  &:active {
    color: $au-button-link-secondary-hover-color;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-color: $au-button-link-secondary-hover-color-underline;
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus-visible,
  &.is-disabled:active {
    color: var(--au-gray-700);
    background-color: transparent;
    text-decoration: none;
    border-color: transparent;
  }

  &.is-loading,
  &.is-loading:hover {
    color: var(--au-gray-700);
    background-color: transparent;
    border-color: transparent;
    text-decoration: none;
  }
}

// Alert button
.au-c-button--alert:not([class*="is-"]) {
  color: $au-button-alert-color;
  background-color: $au-button-alert-contrast-color;
  border-color: $au-button-alert-contrast-color;

  &:hover,
  &:focus-visible,
  &:active {
    color: $au-button-alert-color;
    background-color: $au-button-alert-contrast-hover-color;
    border-color: $au-button-alert-contrast-hover-color;
  }

  &.au-c-button--secondary {
    background-color: transparent;

    &,
    &:visited {
      color: $au-button-alert-contrast-color;
      border-color: $au-button-alert-contrast-color;
    }

    &:hover,
    &:focus-visible,
    &:active {
      color: $au-button-alert-contrast-hover-color;
      border-color: $au-button-alert-contrast-hover-color;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus-visible,
    &.is-disabled:active {
      color: var(--au-gray-700);
      background-color: var(--au-gray-300);
      border-color: var(--au-gray-300);
    }

    &.is-loading,
    &.is-loading:hover {
      color: var(--au-gray-700);
      background-color: var(--au-gray-300);
      border-color: var(--au-gray-300);
    }
  }

  &.au-c-button--naked {
    background-color: transparent;

    &,
    &:visited {
      color: $au-button-alert-contrast-color;
      border-color: transparent;
    }

    &:hover,
    &:focus-visible,
    &:active {
      color: $au-button-alert-contrast-hover-color;
      border-color: transparent;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus-visible,
    &.is-disabled:active {
      color: var(--au-gray-700);
      background-color: transparent;
      border-color: transparent;
    }

    &.is-loading,
    &.is-loading:hover,
    &.is-loading:focus-visible {
      color: var(--au-gray-700);
      background-color: transparent;
      border-color: transparent;
    }
  }

  &.au-c-button--link,
  &.au-c-button--link-secondary,
  &.au-c-button--link-bold {
    background-color: transparent;

    &,
    &:visited {
      color: $au-button-alert-contrast-color;
      border-color: transparent;
      text-decoration-color: var(--au-red-300);
    }

    &:hover,
    &:focus-visible,
    &:active {
      color: $au-button-alert-contrast-hover-color;
      border-color: transparent;
      text-decoration-color: var(--au-red-400);
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus-visible,
    &.is-disabled:active {
      color: var(--au-gray-700);
      background-color: transparent;
      border-color: transparent;
    }

    &.is-loading,
    &.is-loading:hover,
    &.is-loading:focus-visible {
      color: var(--au-gray-700);
      background-color: transparent;
      border-color: transparent;
    }
  }
}

// Wrap text inside a button
.au-c-button--wrap {
  height: auto;
  white-space: initial;
  text-align: left;
}

// Block button
.au-c-button--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

// Active buttons
.au-c-button:not(.au-c-button--secondary):not(.au-c-button--link).is-active {
  background-color: $au-button-contrast-active-color;
  border-color: $au-button-contrast-active-color;
}

.au-c-button--secondary.is-active {
  color: $au-button-secondary-hover-color;
  background-color: $au-button-secondary-contrast-active-color;
}

.au-c-button--link.is-active {
  color: $au-button-link-active-color;
  font-weight: var(--au-medium);
}

.au-c-button--icon-only {
  padding: 0
    calc(
      (
          #{$au-button-icon-only-width -
            ($au-button-border * 2)} - var(--au-icon-size-medium)
        ) /
        2
    ); // calculate padding automatically to create square icon-only buttons

  &.au-c-button--link {
    padding: 0
      calc(
        (
            #{$au-button-link-icon-only-width -
              ($au-button-border * 2)} - var(--au-icon-size-medium)
          ) /
          2
      );
  }

  .au-c-icon {
    width: var(--au-icon-size-medium);
    height: var(--au-icon-size-medium);
  }
}

.au-c-button--icon-only.au-c-button--large {
  padding: 0
    calc(
      (
          #{$au-button-icon-only-width-large -
            ($au-button-border * 2)} - var(--au-icon-size-large)
        ) /
        2
    ); // calculate padding automatically to create square icon-only buttons

  .au-c-icon {
    width: var(--au-icon-size-large);
    height: var(--au-icon-size-large);
  }
}

/* Animations
  ========================================================================== */

@keyframes buttonLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}