//
// Head bar
// ------------------------------------------------------------

.head-bar {
  position: fixed;
  top: 0;
  z-index: $head-zindex;
  width: 100%;
  height: $header-height;
  background-color: $head-color;
  border-bottom: 1px solid darken($head-color, 5%);
  transition: $base-transition;
}

.head-bar__toggle {
  display: none;
  width: $header-height;
  height: $header-height;
  line-height: $header-height;
  text-align: center;
  cursor: pointer;

  &::after {
    @include fontawesome("\f0c9");

    font-size: 18px;
    color: $white;
  }
}

.user-dropdown {
  position: relative;
  float: right;
  height: $header-height - 1;
  padding: 0 16px;
  line-height: $header-height - 1;
  cursor: pointer;
  border-left: 1px solid lighten($head-color, 8%);
  transition: $base-transition;

  &:active {
    background-color: darken($head-color, 8%);
  }
}

.user-avatar {
  $avatar-size: 38px;

  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  background-color: $white;
  border-radius: $base-radius;

  img {
    width: $avatar-size;
    height: $avatar-size;
    padding: 1px;
    border-radius: $base-radius;
  }
}

.user-name {
  position: relative;
  top: -1px;
  display: inline-block;
  padding-right: 10px;
  margin: 0;
  font-size: 12px;
  color: $white;
  vertical-align: middle;
}

.user-menu {
  position: absolute;
  top: $header-height + 5;
  right: 12px;
  display: none;
  min-width: 200px;
  padding: 8px 0;
  background-color: $white;
  border: 1px solid darken($border-color, 5%);
  border-radius: $base-radius;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .08);

  .user-menu__content {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .caret {
    position: absolute;
    top: -10px;
    right: 32px;
  }

  .caret-outer,
  .caret-inner {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    content: "";
    border: solid transparent;
  }

  .caret-inner {
    top: 1px;
    left: 2px;
    border-color: transparent transparent $white;
    border-width: 0 8px 9px;
  }

  .caret-outer {
    border-color: transparent transparent darken($border-color, 5%);
    border-width: 0 10px 10px;
  }
}

.is-open .user-menu {
  display: block;
}

.user-menu__list {
  line-height: $base-line-height;

  a {
    display: block;
    padding: 8px 15px;
    font-size: 13px;
    color: $text-color;

    &:hover {
      text-decoration: none;
      background-color: $gray-white;
    }
  }

  .fa {
    margin-right: 8px;
  }
}

@include tablet {
  .head-bar {
    left: 0;
  }

  .head-bar__toggle {
    display: inline-block;
  }

  .is-sidebar-open {
    .head-bar {
      left: $sidebar-width;
    }
  }
}