.aura-button {
  display: var(--aura-display-flex);
  align-items: var(--aura-align-center);
  justify-content: var(--aura-justify-center);
  gap: var(--aura-unit-8-px);
  font-size: var(--aura-unit-18-px);
  cursor: var(--aura-cursor-pointer);
  font-family: var(--aura-font-family-medium);
}

/* Button Colors */

.aura-button--color-primary {
  color: var(--aura-white);
  background-color: var(--aura-primary);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-primary);
  transition: var(--aura-transition-all) var(--aura-transition-time-point-three)
    var(--aura-transition-ease-in-out);
}

.aura-button--color-primary:hover {
  background-color: var(--aura-red-hover);
}

.aura-button--color-secondary {
  color: var(--aura-secondary);
  background-color: var(--aura-white);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-secondary);
}

.aura-button--color-secondary:hover {
  background-color: var(--aura-secondary);
  color: var(--aura-white);
}

.aura-button--color-transparent {
  color: var(--aura-secondary);
  background-color: var(--aura-none);
  border: var(--aura-border-type-none);
}

.aura-button--color-white {
  color: var(--aura-secondary);
  background-color: var(--aura-white);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid) var(--aura-white);
}

.aura-button--color-info {
  font-family: var(--aura-font-family-semibold);
  color: var(--aura-blue);
  background-color: var(--aura-white);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid) var(--aura-white);
}

.aura-button--color-danger {
  color: var(--aura-red-hover);
  background-color: var(--aura-white);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-red-hover);
}

.aura-button--color-warn {
  color: var(--aura-dark-orange);
  background-color: var(--aura-white);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-dark-orange);
}

.aura-button--color-success {
  color: var(--aura-medium-green);
  background-color: var(--aura-white);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-medium-green);
}

/* Button Size */

.aura-button--size-large {
  width: var(--aura-unit-315-px);
  height: var(--aura-unit-66-px);
}

.aura-button--size-medium {
  width: var(--aura-unit-315-px);
  height: var(--aura-unit-50-px);
}

.aura-button--size-small {
  width: var(--aura-unit-200-px);
  height: var(--aura-unit-50-px);
}

.aura-button--size-x-small {
  width: var(--aura-unit-145-px);
  height: var(--aura-unit-40-px);
}

.aura-button--size-fit-width {
  width: var(--aura-width-fit-content);
  height: var(--aura-none);
}

.aura-button--size-full-width {
  width: var(--aura-unit-100-percent);
  height: var(--aura-unit-48-px);
}

.aura-button--size-icon {
  width: var(--aura-unit-40-px);
  height: var(--aura-unit-40-px);
}

/* Button Outline Color */

.aura-button--outline-primary {
  border-color: var(--aura-primary);
}

.aura-button--outline-secondary {
  border-color: var(--aura-secondary);
}

.aura-button--outline-info {
  border-color: var(--aura-secondary);
}

.aura-button--outline-white {
  border-color: var(--aura-white);
}

.aura-button--outline-info {
  border-color: var(--aura-medium-gray);
}

.aura-button--outline-danger {
  border-color: var(--aura-red-hover);
}

.aura-button--outline-warn {
  border-color: var(--aura-dark-orange);
}

.aura-button--outline-success {
  border-color: var(--aura-medium-green);
}

/* Button Outline */

.aura-button--outline-squared {
  border-radius: var(--aura-unit-0-px);
}

.aura-button--outline-rounded {
  border-radius: var(--aura-unit-4-px);
}

.aura-button--outline-full-rounded {
  border-radius: var(--aura-unit-50-px);
}

.aura-button--outline-none {
  border: var(--aura-border-type-none);
}

/* Disabled Button */

.aura-button--disabled {
  color: var(--aura-label-color);
  background-color: var(--aura-white);
  filter: grayscale(var(--aura-unit-100-percent));
  pointer-events: none;
}

.aura-button--disabled:hover {
  color: var(--aura-label-color);
  background-color: var(--aura-white);
}

.aura-button--color-primary.aura-button--disabled {
  color: var(--aura-label-color);
  background-color: var(--aura-disabled-color);
  border: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-disabled-color);
}