@import "variables";

header
{
  background : $gradient; // linear-gradient(to right, $bg-body-tertiary 0%, $body-secondary-bg 100%);
  //display         : flex;
  //flex            : 0 0 auto;
  //flex-direction  : row;
  //align-items     : center;
  //justify-content : space-between;
  //position        : relative;
}

.navbar-material
{
  //background-color : $primary;
  box-shadow       : 0.31rem 0 0.625rem rgba(0, 0, 0, 0.5);
  padding          : 0.4rem 0.8rem;
}

#beta-stamp
{
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : px2Rem(74);
  height     : px2Rem(60);
  background : transparent url('#{$images-path}beta.png') no-repeat;
  z-index    : 1051;
  opacity    : .7;
}

.navbar-brand
{
  display : flex;
  padding : 0;
  //min-width : 18.75rem;
}

.brand-logo
{
  display     : flex;
  align-items : center;
  //padding     : 14px 8px;
  margin      : 0 0.625rem 0 0;
}

.logo-title
{
  font-size : 1.1em;
  //font-weight : 300;
}

.logo-title-shadow
{
  text-shadow : px2Rem(1) px2Rem(1) 0 rgba(0, 0, 0, 0.2);
}

.logo-subtitle
{
  font-size  : 0.5em;
  margin-top : -2px;
}

.logo-region
{
  font-size      : .6em;
  font-weight    : 600;
  text-shadow    : none;
  text-transform : uppercase;
  padding        : 0.2rem 0.5rem;
  margin-left    : 0.7rem;
  margin-top     : .4rem;
  min-width      : px2Rem(50);
}

.floating-user
{
  display                    : flex;
  flex-direction             : row;
  align-items                : center;
  justify-content            : center;

  position                   : absolute;
  top                        : 0;
  right                      : 15px;
  background-color           : #7E9EF1;
  color                      : lightgray;
  font-size                  : .8rem;
  padding                    : 2px 10px;
  border-bottom-left-radius  : 3px;
  border-bottom-right-radius : 3px;

  > img
  {
    margin-top : 2px;
    width      : 16px;
    height     : 16px;
  }
}

/** NAVIGATION ITEMS */

.nav-item:hover
{
  //color : $nav-link-hover-color;
  background-color : rgba(255, 255, 255, 0.2);
}

.nav-item
{
  text-transform : uppercase;
}

.nav-link:hover
{
  //color : $nav-link-hover-color;
}

.nav-link-button
{
  border           : none;
  background-color : transparent;
  text-transform   : uppercase;
}

.nav-link-profile
{
  @extend .nav-link-button;
  padding-bottom : 0;
  margin-left    : px2Rem(10);
}

.nav-link-profile:focus,
.nav-link-button:focus
{
  outline : none;
}

.nav-link-profile:hover
{
  opacity : .8;
}

.nav-link-profile > img
{
  background-color : rgb(100, 189, 245);
  margin-top       : -5px;
  width            : px2Rem(28);
  height           : px2Rem(28);
}