/**
 * Account controls.
 */
.account-controls {
  font-size: var(--font-size);
  line-height: var(--line-height);

  @media (min-width: 768px) {
    position: absolute;
    right: 15px;
    top: 0;
  }

  /* TODO: Refactor into component styles */
  & .account-logged-in,
  & .account-logged-out {
    display: flex;
    justify-content: flex-end;
    margin: 1em 0 .5em;

    @media (min-width: 768px) {
      float: none;
      margin: 1.5em 0 0;
    }
  }

  & ul {
    margin: 0;
  }
  /* TODO: Refactor global nav styles to avoid these button overrides */
  & .nav-pills {
    & > li + li {
      margin-left: .5em;
    }
    & > li > a {
      border-radius: var(--border-radius);
    }
  }
  & .nav > li > a {
    padding: var(--padding);
  }
  & .nav > li > .btn-primary:focus,
  & .nav > li > .btn-primary:hover {
    background: color(var(--color-button-primary-background) blackness(+ 10%));
  }
}

/**
 * Account controls: logged in
 *
 * TODO: Refactor into 'account-logged-in' component styles.
 */
.account-controls .account-logged-in {
  & p {
    display: none;

    @media (min-width: 360px) {
      border-top: thin solid transparent;
      display: inline-block;
      margin: .5em .75em 0 0;
    }
  }
}