.btn,
.button {
  text-transform: uppercase;
  border-radius: 0;
}

/* ==========================================================================
   Primary.
   ========================================================================== */
.btn--primary,
.button--primary {
  a:focus &,
  a:hover &,
  &:active,
  &.is-active,
  &:focus,
  &:hover {
    color: var(--color-white);
    background-color: var(--color-fg-primary);
  }
}

/* ==========================================================================
   Nav.
   ========================================================================== */
.button--nav {
  .button-icon {
    border-radius: 0;
  }
}

/* ==========================================================================
   Icon.
   ========================================================================== */
.btn--icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background: none;
  color: var(--color-fg-tertiary);
  text-transform: none;
  font-weight: normal;
  padding-left: calc(var(--button-padding-horizontal) / 2);
  padding-right: calc(var(--button-padding-horizontal) / 2);

  .icon {
    margin-bottom: var(--space-s);
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--color-fg-tertiary);
    border-radius: 50%;

    &:before {
      color: inherit;
      font-size: 27px;
    }
  }
}

/* ==========================================================================
   More.
   ========================================================================== */
.button--more {
  display: flex;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  background: none;
  border: none;
  font-family: var(--font-family);
  color: var(--color-fg-tertiary);
  text-transform: none;

  .icon {
    margin-left: var(--space-xs);
  }
  .button-icon {
    --icon-size: 34px;
    line-height: 18px;

    &:before {
      transition: var(--button-transition);
      background-color: var(--color-fg-tertiary);
    }
  }

  a:focus &,
  a:hover &,
  &:active,
  &.is-active,
  &:focus,
  &:hover {
    background: none;

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