/* ==========================================================================
   Button.
   ========================================================================== */
.button,
.btn {
  color: var(--button-fg-color);
  font-family: var(--font-family);
  background-color: var(--button-bg-color);

  a:focus &,
  a:hover &,
  &:active,
  &.is-active,
  &:focus,
  &:hover {
    background-color: var(--color-bg-primary);
  }
}

/* ==========================================================================
   Primary button.
   ========================================================================== */
.btn--primary,
.button--primary {
  border-color: transparent;

  a:focus &,
  a:hover &,
  &:active,
  &.is-active,
  &:focus,
  &:hover {
    border-color: var(--color-fg-primary);
  }
}

/* ==========================================================================
   Secondary button.
   ========================================================================== */
.btn--secondary,
.button--secondary {
  color: var(--color-text-dark);
  border-color: var(--color-fg-primary);

  .icon:before {
    background-color: var(--color-fg-primary);
  }

  a:focus &,
  a:hover &,
  &:active,
  &.is-active,
  &:focus,
  &:hover {
    color: var(--color-white);
    background-color: var(--color-fg-primary);
    border-color: var(--color-fg-primary);

    .icon:before {
      background-color: var(--color-white);
    }
  }
}

/* ==========================================================================
   Button with icon.
   ========================================================================== */
.button--icon {
  padding: var(--space-s);
  color: var(--color-bg);
  background-color: var(--color-fg-primary);

  .icon {
    --icon-size: 18px;
    line-height: 18px;

    &:before {
      background-color: var(--color-bg);
    }
  }

  a:focus &,
  a:hover &,
  &:active,
  &.is-active,
  &:focus,
  &:hover {
    background-color: var(--color-bg-primary);
    border-color: var(--color-fg-primary);

    .icon:before {
      background-color: var(--color-fg-primary);
    }
  }
}

/* ==========================================================================
   Link.
   ========================================================================== */
.button--link,
.btn--link {
  color: var(--color-white);
}