.cb-button-guard { --cb-button-guard: 1; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cb-button-gap, 8px);
  padding: calc(var(--cb-button-padding, 16px) - var(--cb-button-border-width, 1px));
  border: var(--cb-button-border-width, 1px) solid var(--cb-text-inverse);
  border-radius: var(--cb-button-radius, 2px);
  background-color: var(--cb-fill-primary);
  color: var(--cb-text-inverse);
  font-family: var(--cb-font-sans);
  font-size: var(--cb-type-button-size);
  font-weight: var(--cb-font-weight-demi);
  line-height: var(--cb-type-button-leading);
  letter-spacing: var(--cb-type-button-tracking);
  text-transform: uppercase;
  text-decoration: none;

  max-width: 100%;
}

.cb-button--arrow::after {
  content: '';
  flex: none;
  width: var(--cb-arrow-width, 10px);
  height: var(--cb-arrow-height, 8.75px);
  margin-inline: calc((var(--cb-arrow-box-width, 10px) - var(--cb-arrow-width, 10px)) / 2);
  background-color: currentColor;
  mask-image: var(--cb-arrow-icon, url('cb-icon-arrow-right.svg'));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.button--outline {
  background-color: transparent;
  border-color: var(--cb-text-primary);
  color: var(--cb-text-primary);
}

.button-unstyled {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-button-gap, 8px);
  font-family: var(--cb-font-sans);
  font-size: var(--cb-type-button-size);
  font-weight: var(--cb-font-weight-demi);
  line-height: var(--cb-type-button-leading);
  letter-spacing: var(--cb-type-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

.button-unstyled:not(.header-actions__action):not(.header__icon):not(.slideshow-control):not(.menu-list__disclosure):not(.product-media-container__zoom-button):not(.predictive-search__reset-button)::after {
  content: '';
  flex: none;
  width: var(--cb-arrow-width, 10px);
  height: var(--cb-arrow-height, 8.75px);
  margin-inline: calc((var(--cb-arrow-box-width, 10px) - var(--cb-arrow-width, 10px)) / 2);
  background-color: currentColor;
  mask-image: var(--cb-arrow-icon, url('cb-icon-arrow-right.svg'));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}