.button {
  display: flex;
  align-items: center;
  gap: 0.5em;

  font-family: inherit;
  font-size: 1em;

  padding: 0.5em 1em;
  border-radius: 0.5em;

  color: var(--primary-s-3);
  border-color: var(--border);
  background-color: var(--surface-0);
  border: 0.125em solid transparent;

  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
  transition-timing-function: ease-in-out;

  iconify-icon {
    display: inline-block;
    font-size: 1.2em;
    width: 1em;
    height: 1em;
  }

  &:hover {
    color: var(--primary-s-6);
    border-color: var(--primary-s-6);
    background-color: var(--surface-1);
  }

  &:active {
    border-color: var(--primary-s-4);
    background-color: var(--background);
  }

  outline: none;

  &:focus {
    outline: 0.125em solid var(--primary-b);
    outline-offset: 0.125em;
  }

  &.icon {
    padding: 0.5em;
  }

  &.rounded {
    border-radius: 2em;
  }

  &:disabled {
    background-color: transparent;
    border: 2px solid var(--border);
    color: var(--text);
    opacity: 0.66;
  }

  &.variant {
    color: var(--variant-o);
    border-color: var(--variant-b);
    background-color: var(--variant-b);
    &:hover {
      border-color: var(--variant-s-6);
      background-color: var(--variant-s-6);
    }
    &:active {
      border-color: var(--variant-s-4);
      background-color: var(--variant-s-4);
    }
    &:focus {
      outline-color: var(--variant-b);
    }
  }
}