/* BUTTON BLOCK */

.btn {
  --background: var(--color-primary-100);
  --color: var(--color-white);
  --border-color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding: .6rem var(--space-16) .75em;
  max-height: 2.5rem;
  text-align: center;
  text-decoration: none;
  font-size: var(--text-sm);
  line-height: var(--leading-md);
  font-weight: 500;
  border-radius: var(--rounded-lg);
  cursor: pointer;
  background-color: var(--background, var(--color-primary-100));
  color: var(--color, var(--color-white));
  border: 1px solid var(--border-color);
}

.btn[disabled] {
  cursor: not-allowed;
  background: var(--color-black-10);
  color: var(--color-black-20);
}

.btn--primary {
  --background: transparent;
  --border-color: var(--color-primary-10);
  --color: var(--color-primary);
}
.btn--primary:hover {
  --background: var(--color-primary-10);
  --border-color: var(--color-primary-20);
}
.btn--primary.active,
.btn--primary:active,
.btn--primary[aria-pressed="true"],
input[type="checkbox"]:checked + .btn--primary {
  --background: var(--color-primary-100);
  --border-color: var(--color-primary-100);
  --color: var(--color-white);
}
.btn--primary.active:hover,
.btn--primary[aria-pressed="true"]:hover {
  --background: var(--color-primary-hover);
  --border-color: var(--color-primary-hover);
}

.btn--black {
  --background: var(--color-black);
  --color: var(--color-white);
}
.btn--black-10 {
  --background: var(--color-black-10);
  --color: var(--color-black);
}

.btn--grey,
.btn--grey-700 {
  --background: var(--color-grey-700);
  --color: var(--color-white);
}

.btn--white {
  --background: var(--color-white);
  --color: var(--color-grey-700);
}
.btn--white-10 {
  --background: var(--color-white-10);
  --color: var(--color-white);
}

.btn--sm {
  padding: .375rem var(--space-12) .5rem;
}

@media (hover: hover) {
  .btn:hover {
    --background: var(--color-primary-hover);
  }
  .btn--primary:hover {
    --background: var(--color-primary-10);
  }
  .btn--white:hover {
    --background: var(--color-white);
  }
  .btn--grey:hover {
    --background: var(--color-grey-800);
  }
}

.btn:focus-visible {
  
}

.btn:active {
  
}
