* {
  box-sizing: var(--air-box-sizing, border-box);
}

/** Primary button */
/** Secondary button */
/** Tertiary button */
/** Mobile */
:host {
  display: var(--air-button-host-display, inline-flex);
  vertical-align: var(--air-button-host-vertical-align, top);
}

.button {
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: var(--air-button-font-size, var(--air-body-font-size, 1rem));
  font-weight: var(--air-button-font-weight, 500);
  font-family: var(--air-button-font-family, var(--air-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  line-height: var(--air-button-line-height, var(--air-body-line-height, 1.5));
  padding-top: var(--air-button-padding-top, var(--air-spacing-03, 1rem));
  padding-left: var(--air-button-padding-left, var(--air-spacing-03, 1rem));
  padding-bottom: var(--air-button-padding-bottom, var(--air-spacing-03, 1rem));
  padding-right: var(--air-button-padding-right, var(--air-spacing-03, 1rem));
  border-width: var(--air-button-border-width, 2px);
  border-style: var(--air-button-border-style, solid);
  border-radius: var(--air-button-border-radius, var(--air-form-element-border-radius, var(--air-border-radius, 4px)));
  cursor: pointer;
  margin: 0px;
}
.button:focus {
  outline: none;
  box-shadow: 0 0 0 var(--air-button-focus-outline-width, var(--air-focus-outline-width, 2px)) var(--air-button-focus-outline-color, var(--air-focus-outline-color, var(--air-color-primary-outline, var(--air-color-denim, #2e71bd))));
}
.button-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: var(--air-button-margin-top, var(--air-spacing-01, 0.25rem));
  margin-left: var(--air-button-margin-left, var(--air-spacing-01, 0.25rem));
  margin-bottom: var(--air-button-margin-bottom, var(--air-spacing-01, 0.25rem));
  margin-right: var(--air-button-margin-right, var(--air-spacing-01, 0.25rem));
  border-radius: var(--air-button-border-radius, var(--air-form-element-border-radius, var(--air-border-radius, 4px)));
  box-shadow: var(--air-button-box-shadow, var(--air-box-shadow-01, 0 1px 2px rgba(34, 34, 34, 0.33)));
}
.button-primary {
  color: var(--air-button-primary-color, var(--air-color-white, #ffffff));
  background-color: var(--air-button-primary-background-color, var(--air-color-eclipse, #3a3a3a));
  border-color: var(--air-button-primary-border-color, var(--air-color-eclipse, #3a3a3a));
}
.button-primary:hover {
  color: var(--air-button-primary-hover-color, var(--air-color-white, #ffffff));
  background-color: var(--air-button-primary-hover-background-color, var(--air-color-matterhorn, #4e4e4e));
  border-color: var(--air-button-primary-hover-border-color, var(--air-color-matterhorn, #4e4e4e));
}
.button-primary:focus {
  color: var(--air-button-primary-focus-color, var(--air-color-white, #ffffff));
  background-color: var(--air-button-primary-focus-background-color, var(--air-color-matterhorn, #4e4e4e));
  border-color: var(--air-button-primary-focus-border-color, var(--air-color-matterhorn, #4e4e4e));
}
.button-primary:active {
  color: var(--air-button-primary-active-color, var(--air-color-white, #ffffff));
  background-color: var(--air-button-primary-active-background-color, var(--air-color-denim, #2e71bd));
  border-color: var(--air-button-primary-active-border-color, var(--air-color-denim, #2e71bd));
}
.button-primary[disabled] {
  color: var(--air-button-primary-disabled-color, var(--air-color-dim-grey, #717171));
  background-color: var(--air-button-primary-disabled-background-color, var(--air-color-gainsboro, #d8d8d8));
  border-color: var(--air-button-primary-disabled-border-color, var(--air-color-gainsboro, #d8d8d8));
  cursor: default;
}
.button-secondary {
  color: var(--air-button-secondary-color, var(--air-color-eclipse, #3a3a3a));
  background-color: var(--air-button-secondary-background-color, var(--air-color-white, #ffffff));
  border-color: var(--air-button-secondary-border-color, var(--air-color-eclipse, #3a3a3a));
}
.button-secondary:hover {
  color: var(--air-button-secondary-hover-color, var(--air-color-eclipse, #3a3a3a));
  background-color: var(--air-button-secondary-hover-background-color, var(--air-color-snow, #fbfafa));
  border-color: var(--air-button-secondary-hover-border-color, var(--air-color-matterhorn, #4e4e4e));
}
.button-secondary:focus {
  color: var(--air-button-secondary-hover-color, var(--air-color-eclipse, #3a3a3a));
  background-color: var(--air-button-secondary-hover-background-color, var(--air-color-snow, #fbfafa));
  border-color: var(--air-button-secondary-hover-border-color, var(--air-color-matterhorn, #4e4e4e));
}
.button-secondary:active {
  color: var(--air-button-secondary-active-color, var(--air-color-white, #ffffff));
  background-color: var(--air-button-secondary-active-background-color, var(--air-color-denim, #2e71bd));
  border-color: var(--air-button-secondary-active-border-color, var(--air-color-denim, #2e71bd));
}
.button-secondary[disabled] {
  color: var(--air-button-secondary-disabled-color, var(--air-color-gainsboro, #d8d8d8));
  background-color: var(--air-button-secondary-disabled-background-color, var(--air-color-white, #ffffff));
  border-color: var(--air-button-secondary-disabled-border-color, var(--air-color-gainsboro, #d8d8d8));
  cursor: default;
}
.button-tertiary {
  color: var(--air-button-tertiary-color, var(--air-color-valencia, #e55451));
  background-color: var(--air-button-tertiary-background-color, var(--air-color-white, #ffffff));
  border-color: var(--air-button-tertiary-border-color, var(--air-color-valencia, #e55451));
}
.button-tertiary:hover {
  color: var(--air-button-tertiary-hover-color, var(--air-color-valencia, #e55451));
  background-color: var(--air-button-tertiary-hover-background-color, var(--air-color-tutu, #f9e9e9));
  border-color: var(--air-button-tertiary-hover-border-color, var(--air-color-valencia, #e55451));
}
.button-tertiary:focus {
  color: var(--air-button-tertiary-hover-color, var(--air-color-valencia, #e55451));
  background-color: var(--air-button-tertiary-hover-background-color, var(--air-color-tutu, #f9e9e9));
  border-color: var(--air-button-tertiary-hover-border-color, var(--air-color-valencia, #e55451));
}
.button-tertiary:active {
  color: var(--air-button-tertiary-active-color, var(--air-color-dark-red, #961b19));
  background-color: var(--air-button-tertiary-active-background-color, var(--air-color-white, #ffffff));
  border-color: var(--air-button-tertiary-active-border-color, var(--air-color-dark-red, #961b19));
}
.button-tertiary[disabled] {
  color: var(--air-button-tertiary-disabled-color, var(--air-color-dim-grey, #717171));
  background-color: var(--air-tertiary-disabled-background-color, var(--air-color-gainsboro, #d8d8d8));
  border-color: var(--air-button-tertiary-disabled-border-color, var(--air-color-gainsboro, #d8d8d8));
  cursor: default;
}
.button-icon-placement-left .button-icon {
  margin-right: var(--air-spacing-02, 0.5rem);
}
.button-icon-placement-right .button-icon {
  margin-left: var(--air-spacing-02, 0.5rem);
}
.button-progress-line {
  height: var(--air-button-progress-line, 4px);
  background-color: var(--air-button-progress-line, var(--air-color-denim, #2e71bd));
}
.button-progress-line-wrapper {
  width: 100%;
  position: absolute;
  overflow: hidden;
  border-top-left-radius: var(--air-button-border-radius, var(--air-form-element-border-radius, var(--air-border-radius, 4px)));
  border-top-right-radius: var(--air-button-border-radius, var(--air-form-element-border-radius, var(--air-border-radius, 4px)));
  top: 0;
  left: 0;
  z-index: 1;
}

@media (max-width: 992px) {
  :host {
    display: var(--air-mobile-button-host-display, inline-flex);
    vertical-align: var(--air-mobile-button-host-vertical-align, top);
    width: var(--air-mobile-button-host-width, 100%);
  }
  .button-wrapper {
    margin-top: var(--air-mobile-button-margin-top, var(--air-spacing-01, 0.25rem));
    margin-left: var(--air-mobile-button-margin-left, 0);
    margin-bottom: var(--air-mobile-button-margin-bottom, var(--air-spacing-01, 0.25rem));
    margin-right: var(--air-mobile-button-margin-right, 0);
  }
}