.Component {
  background-color: var(--navigator-bg-color) !important;
  color: var(--navigator-color);
  box-shadow: 0 1px 2px 0 #000;
  border-bottom: 1px solid #343434;
  height: 90px;

  @media (max-width: 992px) {
    height: 60px;
  }

  .Logo {
    height: 60px;
    margin: 16px 0;
    float: left;

    @media (max-width: 992px) {
      height: 30px;
    }
  }

  .Nav {
    line-height: 32px;
    padding: 16px 0;

    .NavItem {
      display: inline-block;
      margin: 0 16px 0 0;
      font-weight: bold;
      font-size: 16px;
    }
  }

  .Actions {
    line-height: 32px;
    padding: 16px 0;

    .ActionItem {
      display: inline-block;

      .AuthItem {
        display: block;
        height: 43px;
        margin: 0 0 0 16px;
      }

      .CartItem {
        margin: 0 16px 0 0;
        letter-spacing: 1px;
        color: var(--primary-tint-color);

        &:hover {
          color: var(--primary-tint-color);
        }

        i {
          font-size: 16px;
        }
      }
    }

    .SearchActionItem {
      width: calc(100% - 60px);

      .SearchInlineItem {
        display: block;
        margin: 0;

        :global(.ant-select-selection) {
          height: 32px;
        }
      }
    }
  }

  .SearchItem {
    width: 100%;

    :global(.ant-select-selection) {
      height: 35px;
    }
  }

  .Popover {
    i {
      margin: 24px 0;
      float: right;
      font-size: 24px;
      cursor: pointer;
    }
  }
}

.PopoverMenu {
  width: 400px;

  :global(.ant-menu-inline) {
    border-right: 0;
  }
}