@import "./../theme/reboot";
@import "./../theme/buttons";
@import "breadcrumbs";
@import "./../theme/variables";

.main-nav {
  height: 54px;
  position: fixed;
  top: 0;
  left: 10px;
  right: 0;
  background-color: #fff;
  border-bottom: 1px solid $border-color;
  display: flex;
  z-index: 20;

  @media (max-width: 576px) {
    left: 5px;
  }

  .main-nav-left {
    height: 54px;
    display: flex;
    flex-grow: 1;

    .btn-square {
      border-top: none;
      border-left: none;
      border-bottom: none;

      &:hover, &:focus {
        border-color: $border-color;
      }
    }

    h1.page-title {
      font-size: 1.2rem;
      font-weight: 300;
      margin: 0;
      line-height: 2.8;
      padding: 0 0.5rem 0 1rem;

      @media (max-width: 576px) {
        font-size: 1rem;
        line-height: 3.5;
      }
    }
  }

  .main-nav-right {
    padding: 0 0.2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .main-nav-spinner {
      position: absolute;
      right: 10px;
      top: 7px;
      z-index: 4;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.4s;
    }

    .main-nav-apps {
      .btn {
        line-height: 0;
        padding: 0.5rem;
        margin: 0 0.5rem;
      }

      .dropdown-toggle::after {
        display: none;
      }
    }
  }

  &.loading {
    .main-nav-spinner {
      opacity: 1;
      transform: scale(1);
    }
  }
}

.content-wrapper {
  position: fixed;
  top: 54px;
  left: 10px;
  height: calc(100vh - 54px);
  width: calc(100% - 10px);
  overflow: hidden;

  @media (max-width: 576px) {
    left: 5px;
    width: calc(100% - 5px);
  }
}