.container {
  --button-outline-font-family: var(--font-family);
  --button-outline-size-normal-space: var(--space-small)
    calc(var(--space) * 1.25);
  --button-outline-size-normal-font-size: 12px;
  --button-outline-size-normal-line-height: 16px;
  --button-outline-color-accent: var(--color-default);
  --button-outline-text-color-hover: #fff;
  --button-outline-border-radius: var(--border-radius-large);

  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: var(--button-outline-size-normal-space);
  font-family: var(--button-outline-font-family);
  font-size: var(--button-outline-size-normal-font-size);
  line-height: var(--button-outline-size-normal-line-height);
  color: var(--button-outline-color-accent);
  border-radius: var(--button-outline-border-radius);
  border: 1px solid var(--button-outline-color-accent);
  background-color: transparent;
  transition: background var(--transition-duration) ease,
    border var(--transition-duration) ease,
    color var(--transition-duration) ease;
  outline: none;

  &:hover {
    color: var(--button-outline-text-color-hover);
    background-color: var(--button-outline-color-accent);
    border-color: transparent;
  }

  &:active {
    opacity: 0.9;
  }

  &.primary {
    --button-outline-color-accent: var(--color-primary);
  }

  &.success {
    --button-outline-color-accent: var(--color-success);
  }

  &.warning {
    --button-outline-color-accent: var(--color-warning);
  }

  &.danger {
    --button-outline-color-accent: var(--color-danger);
  }

  &.info {
    --button-outline-color-accent: var(--color-info);
  }

  &.disabled {
    opacity: 0.7;
    cursor: not-allowed !important;

    &:hover {
      background-color: transparent;
      border-color: var(--button-outline-color-accent);
      color: var(--button-outline-color-accent);
    }
  }

  &.pending {
    cursor: progress !important;

    &:hover {
      background-color: transparent;
      border-color: var(--button-outline-color-accent);
    }
  }

  &.fill {
    width: 100%;
  }
}

.spinner {
  pointer-events: none;
  margin-right: var(--button-pending-margin);
}