/**
* Name: App Sidebar
* Author: Symbiosys
*/

.os-app {
  &__sidebar {
    background: $white;
    border-top: .1rem solid $os-light;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 200;
    height: 5rem;

    nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 2rem;

      a {
        color: $os-dark;
        transition: all .3s;
        text-decoration: none;

        &:hover, &.active {
          color: $os-primary;
        }

        @include breakpoint(md) {
            margin: 1.5rem 0;
            &:last-child {
              margin-bottom: 0;
            }
        }
      }

      @include breakpoint(md) {
        height: 100%;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 2.5rem;
      }
    }
    
    @include breakpoint(md) {
      padding: 1rem 0;
      top: $navbar-height;
      bottom: inherit;
      height: calc(100vh - #{$navbar-height});
      width: $sidebar-width;
      border-top: 0;
      border-right: .1rem solid $os-light;
    }
  }
}