.bl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bl-space-2);
  min-height: 2.75rem;
  padding: 0 var(--bl-space-4);
  border: var(--bl-line-width) solid var(--bl-color-border);
  border-radius: var(--bl-radius-button);
  background-color: var(--bl-color-surface);
  color: var(--bl-color-text);
  font-size: var(--bl-text-small);
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--bl-motion-fast) var(--bl-easing), border-color var(--bl-motion-fast) var(--bl-easing);
}

.bl-btn:hover {
  border-color: var(--bl-color-text);
  color: var(--bl-color-text);
}

.bl-btn[disabled],
.bl-btn[aria-disabled="true"] {
  opacity: 0.55;
}

.bl-btn-primary {
  border-color: var(--bl-color-accent);
  background-image: linear-gradient(90deg, var(--bl-color-accent) 0%, var(--bl-color-accent-strong) 100%);
  color: var(--bl-color-on-accent);
}

.bl-btn-primary:hover {
  color: var(--bl-color-on-accent);
}

.bl-btn-quiet {
  border-color: var(--bl-color-border);
  background-color: var(--bl-color-surface-sunken);
}

.bl-btn-ghost {
  border-color: transparent;
  background-color: transparent;
  color: var(--bl-color-text-muted);
}

.bl-btn-ghost:hover {
  border-color: var(--bl-color-border-soft);
  background-color: var(--bl-color-surface);
}

.bl-btn-block {
  width: 100%;
  min-height: 3.125rem;
  font-size: var(--bl-text-body);
  font-weight: 600;
}

.bl-btn-icon {
  min-width: 2.75rem;
  padding: 0;
}

.bl-btn-tiny {
  min-height: 2.75rem;
  padding: 0 var(--bl-space-3);
  font-size: var(--bl-text-tiny);
}

@media (min-width: 48em) {
  .bl-btn {
    min-height: 2.25rem;
  }

  .bl-btn-icon {
    min-width: 2.25rem;
  }

  .bl-btn-tiny {
    min-height: 1.875rem;
  }
}

.bl-btn-add {
  --bl-icon-size: var(--bl-icon-2xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--bl-line-width) solid var(--bl-area-deep);
  border-radius: 10%;
  background-color: var(--bl-area-deep);
  color: var(--bl-color-on-accent);
  cursor: pointer;
  transition: opacity var(--bl-motion-fast) var(--bl-easing);
}

.bl-btn-add:hover {
  opacity: 0.9;
}

.bl-btn-add .bl-icon,
.bl-btn-go .bl-icon {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.bl-btn-go {
  --bl-icon-size: var(--bl-icon-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bl-space-1);
  flex: none;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--bl-area-deep);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--bl-motion-fast) var(--bl-easing);
}

.bl-btn-go:hover {
  opacity: 0.7;
  color: var(--bl-area-deep);
}

.bl-btn-go .bl-icon:last-child {
  --bl-icon-size: var(--bl-icon-md);
}