@import '@legends/styles/base.scss';

.wrapper {
  display: flex;
  height: 100vh;

  .scroll {
    overflow-y: auto;
    background-color: $primaryBackground;
    flex: 1;


    .container {
      padding: 1rem;
      @include container;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include container;


        .sidebarButton {
          font-size: 1.25rem;
          color: $secondaryText;
        }

        .account {
          margin-left: auto;
          max-width: 18.75rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .content {
        padding-top: 2.5rem;
      }
    }

    .containerlg {
      @include containerLg;
    }
    .containerfull {
      max-width: 100%;
    }
  }

  @include breakpoint-from(large-tablet) {
    .scroll {
      .container {
        padding: 3.375rem 0;

        .header {
          .account {
            max-width: unset;
          }
          .sidebarButton {
            display: none;
          }
        }
      }
    }
  }

  @include breakpoint-down-from(medium-desktop) {
    .scroll {
      padding: 0 3rem;

      &.containerfull {
        padding: 0;
      }
    }
  }

  @include breakpoint-down-from(tablet) {
    .scroll {
      padding: 0;

    }
  }
}

.bannerContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
