.btn-group {
  display: flex;
  gap: 0.5rem;

  &.align-center {
    justify-content: center;
  }
}

button {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  padding: 0;
  color: var(--text-color);
  background: transparent;
  border: none;
  outline: none;
  gap: 0.25rem;

  &:hover {
    color: var(--text-color-strong);
    background: var(--hover-color);
  }
  &:focus {
    color: var(--text-color-strong);
    background: var(--hover-color);
  }
  &:active {
    color: var(--text-color-strong);
    background: var(--hover-color-alt);
  }
  &[aria-checked='true'] {
    color: var(--text-color-strong);
  }
  &[aria-pressed='true'] {
    color: var(--text-color-strong);
  }
  &[aria-disabled='true'],
  &:disabled {
    color: var(--text-color-muted);
    cursor: not-allowed;
    background: transparent;
  }
}

.btn-filled {
  background: var(--accent-color) !important;
  --text-color: #e2e2e2;
  --text-color-strong: white;
  --text-color-muted: var(--text-color);
}

.btn-outlined {
  border: 1px solid var(--accent-color);
  --text-color: var(--accent-color);
  --text-color-strong: var(--accent-color);
}

.btn-filled,
.btn-outlined {
  &:hover {
    filter: brightness(90%);
  }
  &:active {
    filter: brightness(80%);
  }
  &[aria-disabled='true'],
  &:disabled {
    filter: grayscale(50%);
  }
}

.btn-minimal,
.btn-filled,
.btn-outlined {
  border-radius: 0.25rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0 0.75rem;
}

.btn-icon {
  border-radius: 0.25rem;
  color: currentColor;
  height: fit-content;
  width: fit-content;
}
