@import './../globals.less';

.header {
  display: table;
  width: 100%;
  height: @header-height;
  white-space: nowrap;
  border-top: 1px solid @header-border-color;
  margin-top: -1px;
  border-spacing: 0;
  border-collapse: collapse;

  &.content-container {
    margin-left: 0;
    margin-right: 0;
  }

  > * {
    vertical-align: middle;
    display: table-cell;
  }

  > div {
    width: @header-height;
    position: relative;

    &:last-child {
      // magic. don't ask.
      padding-right: 0.31em;
    }

    > .mw-ui-button {
      display: table-cell;
      vertical-align: middle;
      height: @header-height;
    }
  }

  > div a {
    display: block;
  }

  > div.main {
    width: 100%;
    vertical-align: middle;
    padding: .15em 1em .15em 0;

    h2 {
        display: table;
        width: 100%;
        font-size: 1em;
        > * {
          display: table-cell;
          padding-right: 0.4em;
          width: auto;
          max-width: 1em;
        }
      }
  }

  &.toolbar {
    > div.main {
      padding-right: 0;
    }
  }

  h1 {
    text-align: center;
    font-size: 22px;
    font-family: serif;
    line-height: 1;
    margin-top: 5px;
  }
}

.header-container {
  background-color: @header-bg-color;
  border-bottom: 1px solid transparent;
  z-index: @z-index-header;

  &.position-fixed {
    left: 0;
    right: 0;
    position: fixed;
    top: 0;
    border-bottom-color: @header-border-color;
  }
}

.search-header {
  height: @header-search-form-height;

  .search {
    text-align: center;
  }
}

.toolbar > div > div {
  padding-top: 5px;
}

@media (min-width: 62.5em) {
  .header {
    max-width: 57.8em;
  }
  .header.content-container {
    margin-left: auto;
    margin-right: auto;
  }
}