.button-group {
  display: flex;
  flex-wrap: nowrap;

  .button:not(:last-child) {
    border-right: none;
    position: relative;
  }

  .button:not(:first-child) {
    border-left: none;
  }

  &.hidden-on-mobile {
    @media screen and (min-width: 1000px) {
      display: flex;
    }
  }
}

.button {
  --_bg: var(--bg, var(--clr-accent));
  --_padding: var(--pad, 0.4em 1em);
  --_border: var(--border, 1px solid var(--clr-slate));
  --_color: var(--color, var(--clr-ink-reversed));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1em;
  font-weight: var(--fw-bold);
  gap: 0.5em;
  border: var(--_border);
  padding: var(--_padding);
  background: var(--_bg);
  color: var(--_color);
  text-decoration: none;

  &:hover {
    background: var(--clr-selected);
    color: var(--clr-ink-reversed);
  }

  i {
    color: inherit !important;
  }

  &.secondary {
    --bg: var(--clr-selected);
    /* --pad: 0.25rem 0.75rem; */
    --border: 1px solid var(--clr-selected);
  }

  &.danger {
    --bg: var(--clr-danger);
    /* --pad: 0.25rem 0.75rem; */
    --border: 1px solid var(--clr-danger);
  }
}