@import '../styles/variables.css';

/* gutter_size is 36px */

.header {
  position: fixed;
  background-color: var(--white);
  height: var(--headerHeight);
  overflow-y: hidden;
  box-shadow: 0 0 4px 0 var(--shadowColor);
  width: 100%;
  z-index: 6;
  transition: all 500ms ease-in-out;

  /* Space between adjacent items in the header */
  & .header-spaced-out > * {
    & + * {
      margin-left: 10px;
    }
  }

  & .header-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    & > * + * {
      margin-left: 10px;
    }
  }

  & .full-width {
    width: 100% !important;
    max-width: var(--maxContainerWidth);

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (min--moz-device-pixel-ratio: 2),
      only screen and (-o-min-device-pixel-ratio: 2/1),
      only screen and (min-device-pixel-ratio: 2),
      only screen and (min-resolution: 192dpi),
      only screen and (min-resolution: 2dppx) {
      max-width: var(--maxContainerWidthRetina);
    }
  }

  & .small-logo-container {
    width: 36px; /* gutter_size */
  }

  & .user-info-container {
    min-width: 88px; /* No jitter on page load before login state is known */
    margin-right: -8px; /* eyeball align with right side of container */
  }
}

/* Take up as much height as the header, so that the content
 * below starts in the right place */
.header-spacer {
  height: var(--headerHeight);
}
