.root,
.container {
  height: 64px;
  line-height: 64px;
  text-align: center;
  position: relative;
}

/* smaller on mobile */
@media (max-width: 480px) {
  .container {
    height: 32px;
    line-height: 32px;
    margin-top: 8px;
  }

  .root {
    height: calc(32px + 8px + 8px);
    padding: 8px 0;
    border-bottom: solid 1px var(--dark-line-color);
    margin-bottom: 8px;
  }
}

.container {
  & {
    @extend %gutter-padding-left;
  }
  & {
    @extend %gutter-padding-right;
  }
  max-width: var(--area-width);
  margin: 0 auto;
}

.container {
  display: flex;
  align-items: center;
  position: relative;
}

.left {
  flex: 0 0 auto;
  line-height: 32px;
}

.brand {
  flex: 1 1 auto;
}

.actions {
  flex: 0 0 auto;
  display: flex;
}

.brand {
  @include font-size(-1);
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;

  &,
  &:visited {
    color: var(--text-body);
  }

  &:hover {
    color: var(--brand-a);
  }
}

/* mobile */
@media (max-width: 480px) {
  .brand {
    display: none;
  }

  .actions {
    margin-left: auto;
  }
}

/* desktop: absolute the actions */
@media (min-width: 481px) {
  .actions {
    position: absolute;
    right: var(--gut);
    top: calc((64px - 32px) / 2);
    line-height: 1em;
  }

  .left {
    position: absolute;
    left: var(--gut);
    top: calc((64px - 32px) / 2);
  }
}

/* offset so it doesn't look misasligned */
/* (min-width: $area-width) */
@media (min-width: 1232px) {
  .home {
    position: relative;
    left: -16px;
  }
}
