$overview-height: 64px;

$link-width: 48px;

$path-height: 48px;

$file-height: 42px;

$file-path-padding: 24px;

$files-anim: 0.2s;

@mixin hoverable() {
  @include clickable();

  transition: background-color 0.1s ease;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  
  &:hover {
    background-color: hsl($hue, $saturation, 97%);
  }
  
}

@mixin header() {
  
  #header {

    @include font-mono();
    
    .comment {
      padding-bottom: 0 !important;
    }

    header {

      .file-path {

        position: relative;

        #project-overview {
          @include hoverable();
          font-weight: bold;
        }
        
        #project-overview,
        .files-menu #filename {
          display: block;
          
          border-bottom: 1px solid $code-border-color;
        }

        #project-overview {
          height: $overview-height + 1px;
          line-height: $overview-height + 1px;
        }

        #filename {
          display: block;
          height: $path-height;
          line-height: $path-height;
        }
        
        .files-menu .file a {
          display: block;
          height: $file-height;
          line-height: $file-height;
        }
        
        .files-menu .files {
          background-color: $comment-bg;
          width: 100%;
        }

        .file.separator {
          border-top: 1px solid $comment-border-color;
        }

        .files-menu .file a {

          @include hoverable();

          position: relative;
          overflow: hidden;

          .language {
            $language-size: 14px;
            
            display: inline-block;
            
            width: $language-size;
            height: $language-size;
            border-radius: $language-size;
            font-size: 0;

            position: absolute;
            right: 8px;
            top: ($file-height - $language-size) * 0.5;
          }

          .filename {
            display: inline-block;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
        }
        
      }

      .links {
        position: absolute;
        top: 0;
        right: 0;
        height: $overview-height;
        display: block;

        padding: 0 ($overview-height - $link-width) * 0.5;
        .link {
          list-style-type: none;
          display: inline-block;

          padding: ($overview-height - $link-width) * 0.5 0;
        }

        .link a {
          background-image: url('links.png');
          font-size: 0;
          display: block;
          width: $link-width;
          height: $link-width;
          opacity: 0.5;

          &:hover {
            opacity: 0.7;
          }
          
          &:active {
            opacity: 0.3;
          }
          
        }

        .link a.github {
          background-position: 0 0;
        }
        
        .link a.home {
          background-position: 48px 0;
        }
        
        .link a.twitter {
          background-position: 96px 0;
        }
        
      }
      
    }
    
  }
  
}

@mixin header-comment-padding($vert, $left, $right) {

  #project-overview,
  .files-menu #filename,
  .files-menu .file a {
    padding-right: $right;
    padding-left: $left;
  }

}

@mixin header-single-column() {
  
}

@mixin header-two-column() {
  
  #header {

    .files-path {
      position: fixed;

      @include comment-width();
      padding-right: 1px;
    }
    
    #filename {
      @include hoverable();

      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      padding-right: $path-height !important;
      
      position: relative;

      &:after {
        display: block;
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: $path-height;
        height: $path-height;
        background-image: url('dropdown.png');
        background-size: $path-height $path-height;
      }
      
    }
    
    .files-menu .files {
      position: absolute;
      border-bottom: 1px solid $code-border-color;

      overflow-y: auto;
      max-height: calc(100vh - #{$path-height} - #{$overview-height} - 1px);

      transition: opacity $files-anim ease;

    }
    
    &.files-hidden {
      
      .files-menu .files {
        opacity: 0;
        pointer-events: none;
      }
      
    }
    
  }
  
}

@mixin header-code() {

}

@mixin header-index() {

  #header {

    #project-overview {

      width: auto;
      
      .name {
        font-size: 24px;
      }

      #version {
        font-weight: 700;
        float: none;
        margin-left: 2em;
      }
      
    }

    #filename {
      display: none !important;
    }
    
    .files-menu .files {
      border-bottom: none !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
    }
    
  }

}