:root {
  --aunt-button-text-default-color: var(--aunt-text-color);
  --aunt-button-text-primary-color: var(--aunt-primary-color);
  --aunt-button-text-success-color: var(--aunt-success-color);
  --aunt-button-text-warning-color: var(--aunt-warning-color);
  --aunt-button-text-danger-color: var(--aunt-danger-color);
  --aunt-button-background-default-color: var(--aunt-white-color);
  --aunt-button-background-primary-color: var(--aunt-primary-color);
  --aunt-button-background-success-color: var(--aunt-success-color);
  --aunt-button-background-warning-color: var(--aunt-warning-color);
  --aunt-button-background-danger-color: var(--aunt-danger-color);
  --aunt-button-disabled-opacity: var(--aunt-disabled-opacity);
  --aunt-button-border-radius: var(--aunt-border-radius-md);
  --aunt-button-border-width: var(--aunt-border-width-base);
  --aunt-button-border-width-hairline: calc(0.5 * var(--aunt-hd));
  --aunt-button-border-style: solid;
  --aunt-button-border-default-color: var(--aunt-border-color);
  --aunt-button-border-primary-color: var(--aunt-primary-color);
  --aunt-button-border-success-color: var(--aunt-success-color);
  --aunt-button-border-warning-color: var(--aunt-warning-color);
  --aunt-button-border-danger-color: var(--aunt-danger-color);
  --aunt-button-padding-base: var(--aunt-padding-base);
  --aunt-button-font-size-md: var(--aunt-font-size-md);
  --aunt-button-font-size-lg: var(--aunt-font-size-lg);
  --aunt-button-font-size-sm: var(--aunt-font-size-sm);
  --aunt-button-font-size-xs: var(--aunt-font-size-xs);
  --aunt-button-line-height-xs: var(--aunt-line-height-xs);
  --aunt-button-line-height-sm: var(--aunt-line-height-sm);
}
.aunt-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: auto;
  margin: 0;
  text-align: center;
  border-width: var(--aunt-button-border-width);
  border-style: var(--aunt-button-border-style);
  cursor: pointer;
  transition: opacity ease 0.15s;
  user-select: none;
}
.aunt-button:focus {
  outline: none;
}
.aunt-button::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(calc(var(--aunt-button-border-width) * -1), calc(var(--aunt-button-border-width) * -1));
  background-color: #000;
  border: var(--aunt-button-border-width) var(--aunt-button-border-style) #000;
  border-radius: inherit;
  opacity: 0;
  content: ' ';
  box-sizing: content-box;
}
.aunt-button:active::before {
  opacity: 0.08;
}
.aunt-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.aunt-button__icon--left {
  margin-right: var(--aunt-button-padding-base);
}
.aunt-button__icon--right {
  margin-left: var(--aunt-button-padding-base);
}
.aunt-button__loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: not-allowed;
}
.aunt-button__loading:active::before {
  opacity: 0;
}
.aunt-button--default {
  color: var(--aunt-button-text-default-color);
  background-color: var(--aunt-button-background-default-color);
  border-color: var(--aunt-button-border-default-color);
}
.aunt-button--primary {
  background-color: var(--aunt-button-background-primary-color);
  color: var(--aunt-white-color);
  border-color: var(--aunt-button-border-primary-color);
}
.aunt-button--success {
  background-color: var(--aunt-button-background-success-color);
  color: var(--aunt-white-color);
  border-color: var(--aunt-button-border-success-color);
}
.aunt-button--warning {
  background-color: var(--aunt-button-background-warning-color);
  color: var(--aunt-white-color);
  border-color: var(--aunt-button-border-warning-color);
}
.aunt-button--danger {
  background-color: var(--aunt-button-background-danger-color);
  color: var(--aunt-white-color);
  border-color: var(--aunt-button-border-danger-color);
}
.aunt-button--plain {
  background-color: var(--aunt-white-color);
}
.aunt-button--plain.aunt-button--primary {
  color: var(--aunt-button-text-primary-color);
}
.aunt-button--plain.aunt-button--success {
  color: var(--aunt-button-text-success-color);
}
.aunt-button--plain.aunt-button--danger {
  color: var(--aunt-button-text-danger-color);
}
.aunt-button--plain.aunt-button--warning {
  color: var(--aunt-button-text-warning-color);
}
.aunt-button--hairline {
  border-width: var(--aunt-button-border-width-hairline);
}
.aunt-button__text {
  line-height: var(--aunt-button-line-height-xs);
}
.aunt-button--large {
  padding: var(--aunt-padding-sm) var(--aunt-padding-xl);
}
.aunt-button--large .aunt-button__text {
  font-size: var(--aunt-button-font-size-lg);
  line-height: var(--aunt-button-line-height-sm);
}
.aunt-button--normal {
  padding: var(--aunt-padding-xs) var(--aunt-padding-md);
}
.aunt-button--normal .aunt-button__text {
  font-size: var(--aunt-button-font-size-md);
}
.aunt-button--small {
  padding: calc(6*var(--aunt-hd)) var(--aunt-padding-s);
}
.aunt-button--small .aunt-button__text {
  font-size: var(--aunt-button-font-size-sm);
}
.aunt-button--mini {
  padding: var(--aunt-padding-base) calc(6*var(--aunt-hd));
}
.aunt-button--mini .aunt-button__text {
  font-size: var(--aunt-button-font-size-xs);
}
.aunt-button__shape--default {
  border-radius: var(--aunt-button-border-radius);
}
.aunt-button__shape--square {
  border-radius: 0;
}
.aunt-button__shape--round {
  border-radius: var(--aunt-border-radius-max);
}
.aunt-button--block {
  display: block;
  width: 100%;
}
.aunt-button--disabled {
  cursor: not-allowed;
  opacity: var(--aunt-button-disabled-opacity);
}
.aunt-button--disabled::before {
  display: none;
}
.aunt-button__group {
  display: inline-flex;
  overflow: hidden;
  border-width: var(--aunt-button-border-width);
  border-style: solid;
}
.aunt-button__group .aunt-button {
  border-radius: 0;
  border-width: 0;
  border-right-width: var(--aunt-button-border-width);
  flex: 1;
}
.aunt-button__group .aunt-button__text {
  white-space: nowrap;
}
.aunt-button__group .aunt-button:last-child {
  border-width: 0;
}
.aunt-button__group--default {
  border-color: var(--aunt-button-border-default-color);
}
.aunt-button__group--default .aunt-button {
  border-color: var(--aunt-button-border-default-color);
}
.aunt-button__group--primary {
  border-color: var(--aunt-button-border-primary-color);
}
.aunt-button__group--primary .aunt-button {
  border-color: var(--aunt-button-border-primary-color);
}
.aunt-button__group--success {
  border-color: var(--aunt-button-border-success-color);
}
.aunt-button__group--success .aunt-button {
  border-color: var(--aunt-button-border-success-color);
}
.aunt-button__group--warning {
  border-color: var(--aunt-button-border-warning-color);
}
.aunt-button__group--warning .aunt-button {
  border-color: var(--aunt-button-border-warning-color);
}
.aunt-button__group--danger {
  border-color: var(--aunt-button-border-danger-color);
}
.aunt-button__group--danger .aunt-button {
  border-color: var(--aunt-button-border-danger-color);
}
.aunt-button__group__shape--default {
  border-radius: var(--aunt-button-border-radius);
}
.aunt-button__group__shape--square {
  border-radius: 0;
}
.aunt-button__group__shape--round {
  border-radius: var(--aunt-border-radius-max);
}
.aunt-button__group--disabled {
  cursor: not-allowed;
  opacity: var(--aunt-button-disabled-opacity);
}
.aunt-button__group--disabled .aunt-button {
  --aunt-button-disabled-opacity: 1;
}