.button {
  composes: reset from '../../reset.module.css';

  padding: 8px 16px;
  text-decoration: none;
  line-height: 20px;
  transition: box-shadow .3s ease, background-color .1s ease;
  border-radius: 2px;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.button:hover {
  text-decoration: none;
}

.button:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

.button > span {
  flex: 1;
}

.secondary {
  composes: button;

  background-color: var(--color-background-light-transparent);
  box-shadow: inset 0 0 0 1px var(--color-border-dark);
}

.secondary:hover:not(:disabled) {
  background-color: var(--color-background);
}

.primary {
  composes: secondary;

  font-weight: 500;
}

.tertiary {
  composes: button;

  background-color: var(--color-background);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.tertiary:hover:not(:disabled) {
  background-color: var(--color-background-light);
  box-shadow: inset 0 0 0 1px var(--color-border-dark);
}

.menu {
  composes: button;

  background-color: transparent;
  box-shadow: inset 0 0 0 1px transparent;
  text-align: left;
}

.menu:hover:not(:disabled) {
  background-color: var(--color-background-light-transparent);
}

.iconOnly {
  padding: 8px;
  line-height: 16px;
}

.flex {
  flex: 1;
}

.delete {
  color: var(--color-error);
}