//** Layout | Admin

// Override for body font-size on large screens
body {
  @include media-breakpoint-up(wd) {
    font-size: $font-size-largescreen;
  }
}

// Main Layout Grid
.admin {
  margin-top: $admin-toolbar-height;
  min-height: inherit;

  @include media-breakpoint-up(md) {
    margin-top: $admin-toolbar-height-wide;
  }

  &__toolbar {
    -webkit-backface-visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    height: $admin-toolbar-height;
    width: 100vw;
    z-index: 5;

    @include media-breakpoint-up(sm) {
      height: $admin-toolbar-height-wide;
    }
  }

  &__header {
    padding: 0;

    @include media-breakpoint-up(lg) {
      margin-left: $admin-sidebar-width;
    }

    @include media-breakpoint-up(wd) {
      margin-left: $admin-sidebar-width-wide;
      max-width: 100rem;
    }
  }

  &__sidebar {
    position: absolute;
    top: $admin-toolbar-height;
    left: 0;
    transition: all 200ms;
    width: auto;
    min-width: 224px;
    box-shadow: 5px 0 15px rgba(40, 40, 40, 0.2);

    @include media-breakpoint-up(md) {
      top: $admin-toolbar-height-wide;
    }
    // the sidebar comes into view on larger screens
    @include media-breakpoint-up(lg) {
      left: 0;
      width: $admin-sidebar-width;
      min-width: auto;
      box-shadow: 0 0 0 rgba(255, 255, 255, 100%);
    }

    @include media-breakpoint-up(wd) {
      width: $admin-sidebar-width-wide;
    }

    &--is-collapsed {
      left: -100%;
      // the sidebar comes into view on larger screens, even on initially on smaller screens collapsed sidebar
      @include media-breakpoint-up(lg) {
        left: 0;
      }
    }

    &--is-expanded {
      left: 0;
      z-index: 2;
    }
  }

  &__body {
    padding-top: 0;
    position: relative;
    z-index: 1;

    @include media-breakpoint-up(lg) {
      margin-left: $admin-sidebar-width;
    }

    @include media-breakpoint-up(wd) {
      margin-left: $admin-sidebar-width-wide;
      max-width: 100rem;
    }

    &--container {
      padding: $spacer*0.625; //do not just change this as it's tied to the main grid and other paddings/gutters

      @include media-breakpoint-up(sm) {
        padding: $spacer*1; //do not just change this as it's tied to the main grid and other paddings/gutters
      }

      @include media-breakpoint-up(md) {
        padding: $spacer*1.25; //do not just change this as it's tied to the main grid and other paddings/gutters
      }

      @include media-breakpoint-up(xl) {
        display: grid;
        //grid with autofit to make columns expand full width if other column(s) not present
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-column-gap: 3rem;
        padding: $spacer $spacer*2 $spacer $spacer*3; //do not just change this as it's tied to the main grid and other paddings/gutters
      }

      @include media-breakpoint-up(xw) {
        grid-column-gap: 4rem;
        padding: $spacer $spacer*3 $spacer $spacer*4; //do not just change this as it's tied to the main grid and other paddings/gutters
      }

      &--has-sidebar {
        // grid-template-columns: 3fr 1fr;
        .admin__body--main {
          @include media-breakpoint-up(xl) {
            grid-column: 1/9;
          }

          textarea {
            font-size: 1rem;
          }
        }
      }

      > * {
        grid-column: 1/-1;
      }
    }

    &--main {
      @include media-breakpoint-up(xl) {
        grid-column: 1/13;
        width: 100%;
      }
    }

    &--aside {
      @include media-breakpoint-up(xl) {
        grid-column: 9/13;
        // max-width: 300px;
      }
    }
  }
}

.fa,
.fas,
.far,
.fal,
.fab {
  margin-right: 0.25em;
}
