/* Default button styles */
.button {
  padding: 16px 24px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 4px;
  border-width: 0;
  border-style: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

a.button {
  text-decoration: none;
}

/* Default Label styles */
.button .Label {
  text-align: center;
  font-weight: 700;
  word-wrap: break-word;
}

/* Padding variations */
.button.SizeXs {
  padding: 8px 16px;
}

.button.SizeSm {
  padding: 8px 20px;
}

/* Font styles */
.button.FontAvenir .Label {
  /* font-family: "Avenir LT Std"; Not enabled currently in theme */
  font-family: "Avenir", sans-serif;
}

.button.FontKapra .Label {
  font-family: "KapraNeuePro", sans-serif;
  font-weight: 500;
}

/* Background colors */
.button.HierarchyPrimary {
  background: #e76127;
}

.button.HierarchySecondary {
  background: #006680;
  border: 1px solid #006680;
}

.button.HierarchyPrimaryLight {
  background: #fff7ec;
  border: 1px solid #e76127;
}

.button.HierarchySecondaryLight {
  background: #f1fdfd;
  border: 1px solid #006680;
}

.button.HierarchySecondaryWhite {
  background: white;
  border: 1px solid #cccccc;
}

.button.HierarchySecondaryGrey {
  background: #f7f7f7;
  border: 1px solid #cccccc;
}

.button.HierarchyLink {
  background: none;
  box-shadow: inherit;
}

/* State default */
.button.StateDefault {
  transition: background-color 300ms ease-out, border-color 300ms ease-out,
    color 300ms ease-out;
}

/* Hover State Background Colors */
.button.HierarchyPrimary.StateDefault:hover,
.button.HierarchyPrimary.StateHover {
  background: #d75226;
}

.button.HierarchySecondary.StateDefault:hover,
.button.HierarchySecondary.StateHover {
  background: #004750;
}

.button.HierarchyPrimaryLight.StateDefault:hover,
.button.HierarchyPrimaryLight.StateHover {
  background: #fdefdb;
}

.button.HierarchySecondaryLight.StateDefault:hover
  .button.HierarchySecondaryLight.StateHover {
  background: #e0f2f5;
}

.button.HierarchySecondaryWhite.StateDefault:hover,
.button.HierarchySecondaryWhite.StateHover,
.button.HierarchyLink.StateDefault:hover,
.button.HierarchyLink.StateHover {
  background: #f7f7f7;
}

.button.HierarchySecondaryGrey.StateDefault:hover,
.button.HierarchySecondaryGrey.StateHover {
  background: #e5e5e5;
}

/* Label text sizes */
.button.SizeXs .Label {
  font-size: 14px;
  line-height: 16px;
}

.button.SizeSm .Label {
  font-size: 14px;
  line-height: 20px;
}

.button.SizeMd .Label {
  font-size: 16px;
  line-height: 16px;
}

.button.SizeLg .Label {
  font-size: 18px;
  line-height: 24px;
}

/* Icon-only buttons */
.button.IconsOnly .Circle {
  width: 20px;
  height: 20px;
  position: relative;
}

.button.IconsOnly .Vector {
  width: 18.33px;
  height: 18.33px;
  position: absolute;
  background: #1a1a1a;
  left: 0.83px;
  top: 0.83px;
}

/* Button colors for text */
.button .Label {
  color: white;
}

.button.HierarchyPrimaryLight .Label {
  color: #e76127;
}

.button.HierarchySecondaryWhite .Label,
.button.HierarchySecondaryGrey .Label,
.button.HierarchyLink .Label {
  color: #1a1a1a;
}

.button.HierarchySecondaryColor .Label {
  color: white;
}

.button.HierarchySecondaryLight .Label {
  color: #006680;
}