@import "../../variables.less";

.underborder() {
  .border-box();
  border-top: @border-width solid transparent;
  border-bottom: @border-width solid transparent;
}

.underborderShow() {
  border-bottom: @border-width solid @top-bar-text;
}

@{prefix}top-bar {
  background-color: @top-bar-bg;
  color: @top-bar-text;
  position: fixed;
  width: 100%;
  height: @top-bar-height;
  top: 0;
  .flex();
  .flex-direction(row);
  .border-box();
  .top-bar-drop();
  z-index: @z-index-top-bar;

  > ul {
    list-style-type: none;
    .display-flex();
    .align-items(center);

    > li[role='menuitem'] {
      .underborder();
      height: @top-bar-height;
      cursor: pointer;
      position: relative;

      &:not(@{prefix}menu-trigger) {
        padding: @space-medium;
        font-size: @text-small;
        height: @top-bar-height;
        .display-flex();
        .align-items(center);
      }

      &@{prefix}account-item {
        .display-flex();
        padding: 0 @space-small;

        @{prefix}avatar {
          border: 1px solid @tile-bg;
          background-color: @disabled;
          color: @header;
          width: 32px;
          height: 32px;
          .display-flex();
          .justify-content(center);
          .align-items(center);
          font-size: @text-medium;
          margin-right: 14px;
        }

        @{prefix}account-info {
          @{prefix}name {
            font-size: @text-small;
            color: @tile-bg;
          }

          @{prefix}company {
            font-size: @text-smaller;
            color: @top-bar-text;
          }
        }

        .fa-caret-down {
          margin-left: @space-small;
        }

        @{prefix}dropdown {
          width: 100%;
          .border-box();
        }

        &[data-dropdown-expanded="true"]:hover {
          border-bottom: @border-width solid transparent;
        }
      }

      &:focus, &:hover {
        .underborderShow();
        outline: 0;
      }

      .fa {
        font-size: @text-small-medium;
      }

      a {
        &:focus {
          outline: 0;
        }
      }
    }
  }

  a {
    color: @top-bar-text;
    text-decoration: none;
  }

  @{prefix}right-aligned {
    margin-left: auto;
  }

  li@{prefix}active {
    background-color: @top-bar-bg-active;

    &:hover {
      border-bottom: @border-width solid transparent !important;
    }
  }

  @{prefix}menu-trigger {
    .display-flex();
    .align-items(center);
    background-color: @top-bar-bg;
    color: @top-bar-text;
    font-size: @text-medium;
    padding: 0 @space-small;
    .align-self(flex-start);
    .underborder();
  }
}


@{prefix}skip-container {
  min-width: 173px;
  height: 58px;
  background-color: @top-bar-bg-active-scrim;
  position: absolute;
  .border-box();
  padding: @space-half;
  top: -999px;
  left: 11px;
  opacity: 0;
  .animate(250ms opacity);
  .border-radius(2px);
  z-index: (@z-index-top-bar + 1);

  &@{prefix}skip-container-active {
    top: 11px;
  }

  &@{prefix}skip-fade {
    opacity: 1;
    .animate(250ms opacity);
  }

  a {
    display: block;
    color: @text-light;
    text-decoration: none;
    padding: @space-three-quarters;
  }

  span {
    display: block;
  }

  @{prefix}skip-one {
    font-size: @text-small;
    font-weight: @weight-light;
    color: @text-light;
  }

  @{prefix}skip-two {
    font-size: @text-normal;
    font-weight: @weight-medium;
    color: @text-light;
  }

  &@{prefix}child-focused {
    .focusRing();
  }

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    li {
      padding: @space-quarter;

      a {
        padding: 0;

        span {
          display: inline-block;
          margin-right: 3px;
        }

        &:before {
          font-family: 'FontAwesome';
          content: "\f0da";
          margin: 0 2px;
          display: inline-block;
          color: transparent;
        }

        &:after {
          font-family: 'FontAwesome';
          content: "\f0d9";
          margin: 0 2px;
          display: inline-block;
          color: transparent;
        }

        &:focus {
          outline: 0;

          &:before, &:after {
            color: @text-light;
          }
        }
      }
    }
  }
}
