/** @define MenuItem */

@import (reference) "shared/utilities/icons.less";

.MenuItem {
  display: flex;
  flex: none;
  padding: 0 1rem;
  min-height: 5.8rem;
  min-width: 9.2rem;
  color: black;
  margin-right: 2rem;
  align-items: center;

  &:hover {
      color: black;
  }

  &:last-child {
    margin-right: 0;
  }

  @media screen and (max-width: 570px) {
    flex: 1 1 0;
    padding: 0 1rem;
    margin-right: 0;
    border-bottom: solid thin rgb(202, 202, 202);

    .tooltip, &+.tooltip {
        display: none !important;
    }

    &--logo {
        position: relative;
        border: none;
    }
  }

  &--fixed {
      flex: none;
      min-width: 0;
      margin-right: 0;
      @media screen and (min-width: 571px) {
          padding: 0 0.75rem;
      }
  }

  &-helpTitle {
    @media screen and (min-width: 571px) {
      display: none;
    }
  }

  &-hoverIcon {
    width: 28px;
  }

  &--active {
    flex-direction: column !important;
    justify-content: center !important;
    background-color: rgba(255,255,255,0.35);
    .MenuItem-hoverIcon {
        display: flex;
        opacity: 1 !important;
        height: 22px !important;
    }
  }

  &--right {
    // Push this and all following elements to the right
    margin-left: auto;
    @media screen and (max-width: 570px) {
      margin-left: 0;
    }
  }

  &--setup {
    &:before {
      .icon(@fa-var-cogs);
      padding-right: 0.25rem;
    }
  }

  &--popup {
    // Make pseudo button
    background: transparent;
    border: 0;
    padding: 8px 0;

    outline: none;

    &:after {
        .icon(@fa-var-angle-down);
    }
  }

  &-logo {
    height: 34px;
    width: auto;
  }

  &-icon {
      height: 17px;
      width: auto;
      max-width: 18px;
      flex: none;
      box-sizing: initial;
      &--labelled {
          margin-right: 0.25rem;
      }
      @media screen and (max-width: 570px) {
          display: none;
        margin-right: 1.4rem;
      }
  }

  &-username {
      padding-right: 0.25rem;
      @media screen and (max-width: 570px) {
          order: 1; // moves this to the bottom
      }
      @media screen and (min-width: 571px) {
          max-width: 110px;
      }
  }

}