AugurProject/augur-ui

@import (reference) '~assets/styles/shared';

.SideNav {
  background: @color-purple;
  display: flex;
  flex-flow: column nowrap;
}

.SideNav__nav {
  border: 1px solid @color-grayish-purple;
  border-left: none;
  border-right: none;
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    border-bottom: 1px solid #573980;

    &:last-child { border: none; }
  }

  .disabled {
    > a {
      &:hover {
        background: none;
        cursor: default;
      }

      &:active {
        pointer-events: none;
      }
    }

    > li,
    > a,
    > button {
      span {
        color: @color-gray;
      }

      svg {
        g {
          stroke: @color-gray;
        }
      }
    }
  }

  > li a,
  > li button {
    background: none;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.625rem;
    justify-content: center;
    margin: 0;
    padding: 0.95rem 0 1rem;
    text-align: center;
    width: 100%;

    &.selected {
      background: @color-lightpurple;
    }

    &:hover {
      background: @color-lightpurple;
      cursor: pointer;
    }

    &:last-child { border: none; }

    > span {
      color: @color-white;
      display: block;
      font-weight: 400;
      letter-spacing: 0.01875rem;
      text-align: center;
      text-transform: uppercase;
      width: 100%;
    }

    > svg {
      display: block;
      height: 1.5rem;
      margin-bottom: 0.4rem;
      width: 1.5rem;
    }

    svg.nav-create-icon {
      margin-top: 0.125rem;
      transform: translateY(0.5rem) scale(0.85);
    }

    svg.nav-portfolio-icon {
      transform: translateY(0.5rem) scale(0.95);
    }

    svg.nav-logout-icon {
      height: 1.2rem;
      margin-left: 0.2rem;
      width: 1.2rem;
    }
  }
}

.SideNav__item--selected {
  background: @color-lightpurple;
}

.SideNav__container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: min-content;
  overflow: auto;
}

.SideNav__hideForMidScreens {
  display: none;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-end;
}

@media @breakpoint-mobile {
  .SideNav {
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
    left: -12.5rem;
    overflow: auto;
    padding-top: 2.8125rem;
    position: absolute;
    transition: left 0.2s ease-in-out;
    width: 12.5rem;

    &.mobileShow {
      left: 0;
    }
  }

  .SideNav__nav__separator {
    background: @color-grayish-purple;
    height: 1px;
  }

  .SideNav__stat-label {
    color: @color-lightergray;
    display: flex;
    flex-direction: row;
    font-size: @font-size-extra-small;
    font-weight: 400;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 0.5rem;
    text-overflow: ellipsis;
  }

  .SideNav__stat-value {
    color: @color-white;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    font-size: @font-size-medium;
    font-weight: 700;
    justify-content: flex-end;
  }

  .SideName__placement {
    padding: 16px 24px;
  }

  .SideNav__stat-unit {
    align-items: flex-end;
    display: flex;
    font-size: @font-size-extra-small;
    margin-bottom: 2px;
    margin-left: 0.25rem;
  }

  .SideNav__amt {
    align-self: flex-end;
    border-bottom: 0.0625rem solid @color-lightpurple;
    display: none;
    font-size: 0.925rem;
    width: 100%;
  }

  .SideNav__nav {
    border: none;
    padding-top: 10px;

    > li {
      border: none;
      padding: 0;

      a,
      button {
        align-items: center;
        flex-wrap: nowrap;
        font-size: 0.75rem;
        justify-content: flex-start;
        padding: 1rem;

        &:hover { background: none; }

        > svg {
          display: inline-block;
          margin-bottom: 0;
        }

        > span {
          display: inline-block;
          font-weight: 500;
          margin-left: 1rem;
          text-align: left;
          width: auto;
        }
      }
    }
  }
}

@media @breakpoint-mobile-mid {
  .SideNav__hideForMidScreens {
    display: flex;
  }

  .SideNav__amt {
    display: block;
  }
}

@media @breakpoint-mobile-small-height {
  .SideNav__nav {
    > li {
      a {
        padding: 0.75rem;
      }
    }
  }
}

p.InnerTooltip {
  > a {
    display: inline;
    font-weight: bold;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: underline;

    &:hover {
      background: none;
    }
  }
}