.f-button {
  display: inline-block;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;

  border: 1px solid var(--button-default-border);
  border-radius: 999px;
  padding: 0 18px;
  line-height: 36px;
  font-size: 14px;

  color: var(--button-default-text);
  background-color: var(--button-default-bg);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  pointer-events: all;

  &:hover {
    color: var(--button-default-hover-text);
    background-color: var(--button-default-hover-bg);
    border-color: var(--button-default-hover-border);
    transform: translateY(-1px);
  }

  &:active {
    color: var(--button-default-active-text);
    background-color: var(--button-default-active-bg);
    border-color: var(--button-default-active-border);
    transform: translateY(0);
  }

  &.primary {
    color: var(--button-primary-text);
    background-color: var(--button-primary-bg);
    border-color: var(--button-primary-border);

    &:hover {
      color: var(--button-primary-hover-text);
      background-color: var(--button-primary-hover-bg);
      border-color: var(--button-primary-hover-border);
    }

    &:active {
      color: var(--button-primary-active-text);
      background-color: var(--button-primary-active-bg);
      border-color: var(--button-primary-active-border);
    }
  }
}