.df-like-button {
  --df-like-main-color: #cf3251;
  --df-like-border-radius: 18px;
  --df-like-hover-border: var(--df-like-main-color);
  --df-like-hover-color: var(--df-like-main-color);
  --df-like-liked-border: var(--df-like-main-color);
  --df-like-liked-bg: #fff2f5;
  --df-like-liked-bg: color-mix(in srgb, var(--df-like-main-color) 10%, #fff);
  --df-like-liked-color: var(--df-like-main-color);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #d8dee4;
  border-radius: var(--df-like-border-radius);
  background: #fff;
  color: #24292f;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.df-like-button:hover,
.df-like-button:focus {
  border-color: var(--df-like-hover-border);
  color: var(--df-like-hover-color);
}

.df-like-button.is-liked {
  border-color: var(--df-like-liked-border);
  background: var(--df-like-liked-bg);
  color: var(--df-like-liked-color);
}

.df-like-button:disabled {
  cursor: wait;
  opacity: .72;
}

.df-like-button.is-loading {
  pointer-events: none;
}

.df-like-button__icon {
  font-size: 15px;
}

.df-like-button__count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.df-like-button--count-hidden .df-like-button__count,
.df-like-button--count-zero .df-like-button__count {
  display: none;
}

.df-like-auto-insert,
.df-like-manual-insert {
  display: flex;
  margin: 24px 0;
}

.df-like-auto-insert--left {
  justify-content: flex-start;
}

.df-like-auto-insert--center {
  justify-content: center;
}

.df-like-auto-insert--right {
  justify-content: flex-end;
}