@import url('https://fonts.googleapis.com/css?family=Spicy+Rice');
@import '{}/imports/client/stylesheets/variables.scss';

$nav-item-hover-color: rgba(0,0,0,.6) !important;
$nav-item-hover-transition: color .15s ease;

#main-menu {
  height: $menu-height;
  padding: 0 24px;
  background: $menu-background;
  color: $menu-color;
  font-size: .9em;
  font-weight: 300;
  justify-content: flex-end; // ensures there is a space between left and right navs
  z-index: 999;

  .nav {
    height: 100%; // get main-menu height

    .nav-link {
      position: relative;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 100%;
      color: #fff !important;
      transition: $nav-item-hover-transition;

      &::after {
        display: block;
        content: '';
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        border-bottom: 3px solid #fff;
        transform: scaleX(0);
        transition: transform .15s ease-in-out; // border-bottom transition
      }

      &.active, &:hover {

        &::after {
          transform: scaleX(1);
        }

        &.active {
          font-weight: bold;
        }
      }


      & > * { // Link children (title and icon)
        position: relative;
      }

      & > div { // Link title
        top: 2px;
      }


      &:active, &:focus {
        outline: 0;
      }

      .fas { // Icons
        position: relative;

        top: 4px;
        margin-bottom: 2px;
        text-align: center;
        font-size: 1.3em;

        &.inline {
          position: absolute;
          right: -15px;
          top: 0;
        }
      }
    }

    .dropdown {
      height: 100%;

      .dropdown-menu {
        position: relative;
        top: -2px !important;
      }

      .dropdown-item {
        color: #e65100;
        cursor: pointer;
        font-weight: 300;
      }
    }

    &#right-links {
      margin-right: -12px;

      #add-event {
        display: flex;
        align-items: center;

        button {
          background: transparent !important;
          border: 1px solid #fff;
          font-size: 1em;
          transition: $nav-item-hover-transition;

          &:hover {
            color: $nav-item-hover-color;
            border-color: $nav-item-hover-color;
          }
        }
      }

      #user-item {
        height: 100%;
        font-size: 2.3em;
        cursor: pointer;

        .nav-link {
          cursor: pointer;

          &::after {
            display: none; // remove border-bottom transition
          }

          .fas {
            position: relative;
            top: 2px;
            transition: $nav-item-hover-transition;

            &:hover, &.active {
              color: $nav-item-hover-color;
              background: transparent !important;
            }

            &.fa-caret-down { // Hide caret for this item
              display: none;
            }
          }
        }

        .dropdown-menu {
          // a hack to prevent the dropdown from being cut by the edge of the screen.
          top: -2px !important;
          left: -35px !important;
        }
      }
    }

    &#menu-items {
      flex: 1;
      padding-left: 8px;
      border-left: 1px rgba(255, 255, 255, 0.25) solid;
    }
  }

  #sidebar-toggle {
    display: none;
    flex: .8;
    font-size: 1.4em;
    align-self: center;
    cursor: pointer;
    transition: color .2s ease;
  }

  @media screen and (max-width: 1035px) {
    & {

      #menu-items {
        display: none;
      }

      #right-links {
        padding-left: 0 !important;
        border-left: 0 !important;
      }

      #sidebar-toggle {
        display: block;
        flex: 15;
      }

      #brand-logo {
        flex: 1.1;
      }
    }
  }

  @media screen and (max-width: 700px) {

    & {

      #sidebar-toggle {
        flex: .5;
      }
    }
  }

  @media screen and (max-width: 500px) {

    & {

      #brand-logo {
        display: none;
      }

      #sidebar-toggle {
        flex: 1;
      }
    }
  }
}
