.header {
  background-color: $background-secondary;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 100;
}

.theme .header {
  height: 100%;
  padding: 0 2em;
  width: 14em;

  > ul {
    margin-top: 2em;
  }
}

.theme-light {
  .header {
    border-bottom: solid 1em $background-primary;
    box-sizing: border-box;
    padding: .5em 1em 0;
    width: 100%;
  }

  .header-wrapper {
    display: table;
    margin-bottom: .5em;
    width: 100%;
  }

  .header-title {
    color: $color-secondary;
    font-size: 1.6rem;
    font-weight: 400;
    padding: .65em 1.15em .65em 0;
  }

  .header-title,
  .header-actions {
    display: table-cell;
    vertical-align: middle;
  }

  .header-actions {
    text-align: right;
  }

  .header + .tab-content {
    padding-top: 0;
  }

  // If the .header is NOT followed by a .tab-content element,
  // we assume that the related .nav-tabs are NOT located in the header (see _components.scss),
  // and that the .header contains a single element (.header-wrapper, .header-title...)
  .header + *:not(.tab-content) {
    box-sizing: border-box;
    // Size of the header:
    // - .header-title is 2.08rem height (1.6rem font-size x 1.3 line-height)
    // - .header-title have 2.08rem vertical padding (2 x 0.65em vertical padding x 1.6rem font-size)
    // - .header has .5em padding-top
    // - .header has 1em border-bottom
    // - .header-wrapper has .5em margin-bottom
    padding: calc(4.16rem + 2em) 1em .5em;
  }

  // If the .header is followed by a .tab-content element,
  // we assume that the related .nav-tabs are located in the header (see _components.scss)
  .header + .tab-content .tabpane {
    // Size of the header:
    // - .header-title is 4.16rem height + vertical padding (same as above)
    // - .nav-tabs has is 4.16rem height + vertical padding (same as above)
    // - .header has .5em padding-top
    // - .header has 1em border-bottom
    // - .header-wrapper has .5em margin-bottom
    padding-top: calc(8.32rem + 2em);
  }
}

.connection {
  background: $background-primary;
  border-radius: 2em;
  color: $color-primary;
  padding: .65em 1.5em;

  li {
    display: inline-block;
    vertical-align: middle;
  }
}

.connection-user {
  width: calc(100% - 1.3em);

  span {
    background: url('../images/screen/user-connected.svg') no-repeat left center;
    background-size: 1.69em 1.69em;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    padding-left: 2.1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
}

.connection-logout {
  text-align: right;

  .icon-logout {
    fill: #666;
    height: 1.3em;
    vertical-align: middle;
    width: 1.3em;
  }
}

.nav {
  font-family: 'ITC Avant Garde Std XLt';
  font-size: 1.6rem;
  font-weight: 700;

  a {
    color: #fff;
    display: inline-block;
    padding: .2em 0;

    &:focus,
    &:hover {
      color: #35b2e8;
    }

    &.icon-google-drive {
      background-position: left center;
      background-size: 1.8rem auto;
      padding-left: 2.4rem;
    }
  }

  > ul > li {
    margin: .3em 0;
  }

  li ul {
    font-size: 1.4rem;
    padding-left: 1em;

    li {
      margin: .1em 0;
    }
  }
}

#copyright {
  bottom: 2em;
  color: #fff;
  left: 2em;
  position: absolute;
  text-align: center;
  width: inherit;

  #logo img {
    height: 3em;
  }
}

// Container
.container {
  position: relative;

  > * ~ * {
    margin-top: 1em;
  }
}

.theme .container {
  margin-left: 18em; // .theme .header width: 14em width + 2 x 2em horizontal padding
  padding: 2em;
}

// Notifications
.notices {
  left: 50%;
  margin: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: 200;

  .notice {
    border-radius: 3px;
    left: -50%;
    padding: .5em 2em;
    pointer-events: auto;
    position: relative;
    text-align: center;
  }

  .notice + .notice {
    margin-top: .1em;
  }

  .notice-error {
    background-color: $notice-background-error;
    color: $notice-color-error;
  }

  .notice-info {
    background-color: $notice-background-info;
    color: $notice-color-info;
  }

  .notice-success {
    background-color: $notice-background-success;
    color: $notice-color-success;
  }

  .notice-warning {
    background-color: $notice-background-warning;
    color: $notice-color-warning;
  }
}

.theme .notices {
  // Allows notices to be centered in the .container, without taking into account the .header width
  margin-left: 9em;
}

.notices + * {
  margin-top: 0;
}
