dev/scss/header/header.scss

@charset "utf-8";
@use 'sass:math';
@import "../util";
@import "hint";          // Hint specific menu list
@import "containermenu"; // Container menu specific
@import "searchbar";     // The search bar
@import "vc";            // Virtual corpus builder
@import "statistics";    // Statistics for VCs
@import "datepicker";    // Datepicker
@import "querylanguage"; // Query language
@import "pipe";          // Pipe
@import "state";         // State

header {
  @include box-sizing-box();
  position:         relative;
  background-color: $light-green;
  padding:          $base-padding 0 0 $base-padding;
  font-size:        10pt;
  color:            $nearly-white;
  
  span.select {
    display:     inline-block;
    cursor:      pointer;
    line-height: 1.8em;

    > span {
      font-weight: bold;
    }

    border: {
      width:        0;
      bottom-width: 3px;
      style:        solid;
      color:        transparent;
    }

    &:hover {
      color:        $dark-green;
      border-color: $dark-green;
    }

    &::after {
      @include icon-font;
      pointer-events: none;
      text-align:     center;
      content:        $fa-down;

      padding: {
	      left:  4pt;
	      right: 4pt;
      }
    }

    &.active {
      border-color: $dark-orange;
      &::after {
        content: $fa-up;
      }
    }
  }

  form {
    position:     relative;
    display:      block;
    padding-left: $logo-left-distance;
    min-height:   2.7em;
    margin:       0px;
  }

  input {
    @include input-field;
  }

  .button {
    color:        $nearly-white;
    line-height:  2em;
    margin-right: $right-distance;

    &.right {
      float:   right;
      display: inline-block;
      >.tutorial{
        margin-left: 10px;
      }
    }

    &.top {
      position:         absolute;
      display:          block;
      top:              0;
      right:            0;
      margin-right:     0;
      width:            math.div($standard-margin,2);
      background-color: $dark-green;
      text-align:       center;
      height:           100%;
      z-index:          20;

      > a:hover {
	      color: $nearly-white
      }
    }

    > a {
      color:     $nearly-white;
      cursor:    pointer;
      position:  relative;
      font-size: 120%;

      > span {
	      @include blind;
      }
    }

    > a::after {
      @include icon-font;
    }

    // Icons for buttons
    > a.tutorial::after {
      content: $fa-tutorial;
    }

    > a.question::after {
      content: $fa-question;
    }

    > a.login::after {
      content: $fa-login;
    }

    > a.logout::after {
      content: $fa-logout;
    }
  }
}


.query.button-group > span {
  border-top-width: 0;
  border-color: white;
  
  &:first-child {
    border-top-left-radius: 0;
  }
  &:last-child {
    border-top-right-radius: 0;
  }
}