header .widgets {
  display: none;
}

header .widgets:first-of-type {
  flex-wrap: nowrap;
  align-items: right;
  flex-direction: row;
  justify-content: flex-end;
  color: var(--color-text);
}

header .widget {
  margin-left: calc(var(--spacing-horizontal)/2);
}

@media (min-width: 45rem) {
  header .widgets {
    display: flex;
  }
  header .widgets {
    float: right;
    /* Logo Width */
    width: calc(100% - var(width-logo));
    height: calc((var(--height-header) - (var(--spacing-vertical) * 2)) / 2);
    line-height: calc((var(--height-header) - (var(--spacing-vertical) * 2)) / 2);
  }

  /* shrink the nav when there is a widget present */
  header .widgets ~ ul {
    line-height: calc(
      (var(--height-header) - (var(--spacing-vertical) * 2)) / 2
    );
  }
}