.bk-button,
.bk-btn-primary,
.bk-btn-outline,
.bk-bookshelf-button,
.bk-about-button,
.bk-series-button,
.bk-series-card__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bk-button-min-height, 48px);
  padding: var(--bk-button-padding, 14px 24px);
  border: 2px solid transparent;
  border-radius: var(--bk-radius-pill);
  font-size: var(--bk-button-font-size, 15px);
  font-weight: var(--bk-button-font-weight, 800);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.bk-button:hover,
.bk-button:focus-visible,
.bk-btn-primary:hover,
.bk-btn-primary:focus-visible,
.bk-btn-outline:hover,
.bk-btn-outline:focus-visible,
.bk-bookshelf-button:hover,
.bk-bookshelf-button:focus-visible,
.bk-about-button:hover,
.bk-about-button:focus-visible,
.bk-series-button:hover,
.bk-series-button:focus-visible,
.bk-series-card__link:hover,
.bk-series-card__link:focus-visible {
  text-decoration: none;
}

.bk-button--primary,
.bk-btn-primary,
.bk-bookshelf-button--primary,
.bk-series-button--primary {
  border-color: var(--bk-orange);
  background: var(--bk-orange);
  color: var(--bk-white) !important;
  -webkit-text-fill-color: var(--bk-white);
}

.bk-button--secondary,
.bk-bookshelf-button--secondary,
.bk-series-button--secondary,
.bk-series-card__link {
  border-color: var(--bk-dark);
  background: transparent;
  color: var(--bk-dark) !important;
  -webkit-text-fill-color: var(--bk-dark);
}

.bk-button--outline,
.bk-btn-outline {
  border-color: var(--bk-dark);
  background: transparent;
  color: var(--bk-dark) !important;
  -webkit-text-fill-color: var(--bk-dark);
}

.bk-button--light,
.bk-bookshelf-button--light {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: var(--bk-white) !important;
  -webkit-text-fill-color: var(--bk-white);
}

.bk-button--small {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 13px;
}

.bk-button--icon {
  width: var(--bk-button-icon-size, 44px);
  min-width: var(--bk-button-icon-size, 44px);
  height: var(--bk-button-icon-size, 44px);
  min-height: var(--bk-button-icon-size, 44px);
  padding: 0;
}