/* BASE LAYOUT */

/*
HTML Emmet's
1. div.base-layout>div.container
2. div.base-layout.thin>div.container
 */
.base-layout {
  @apply com-min-h-screen com-max-w-screen-xl com-mx-auto;

  &.thin {
    @apply com-max-w-screen-md;
  }

  &.medium {
    @apply com-max-w-screen-lg;
  }

  .container {
    @apply com-container;
  }
}

/* GRID LAYOUT */
@mixin grid-layout($grid) {
  @apply com-grid com-grid-cols-#{$grid};
}

/*
HTML Emmet's
1. div.three-column-layout>div*3
 */
.three-column-layout {
  @screen lg {
    @include grid-layout(24);

    & > *:nth-child(1) {
      @apply com-col-span-6;
    }

    & > *:nth-child(2) {
      @apply com-col-span-12;
    }

    & > *:nth-child(3) {
      @apply com-col-span-6;
    }

    &.medium {
      & > *:nth-child(1) {
        @apply com-col-span-5;
      }

      & > *:nth-child(2) {
        @apply com-col-span-12;
      }

      & > *:nth-child(3) {
        @apply com-col-span-7;
      }
    }

    &.thin {
      & > *:nth-child(1) {
        @apply com-col-span-7;
      }

      & > *:nth-child(2) {
        @apply com-col-span-9;
      }

      & > *:nth-child(3) {
        @apply com-col-span-8;
      }
    }
  }
}

/*
HTML Emmet's
1. div.two-column-layout>div.left-column+div.main-column
2. div.two-column-layout>div.main-column+div.right-column
3. div.two-column-layout.thin>div.left-column+div.main-column
4. div.two-column-layout.thin>div.main-column+div.right-column
5. div.two-column-layout.wide>div.left-column+div.main-column
6. div.two-column-layout.wide>div.main-column+div.right-column
 */
.two-column-layout {
  @include grid-layout(1);

  &.mobile-reverse {
    .main-column {
      @apply com-row-start-2;
    }
  }

  @screen lg {
    @include grid-layout(24);

    .left-column,
    .right-column {
      @apply com-col-span-5;
    }

    .main-column {
      @apply com-col-span-19;
    }

    &.thin {
      .left-column,
      .right-column {
        @apply com-col-span-4;
      }

      .main-column {
        @apply com-col-span-20;
      }
    }

    &.medium {
      .left-column,
      .right-column {
        @apply com-col-span-7;
      }

      .main-column {
        @apply com-col-span-17;
      }
    }

    &.wide {
      .left-column,
      .right-column {
        @apply com-col-span-6;
      }

      .main-column {
        @apply com-col-span-18;
      }
    }

    &.mobile-reverse {
      .main-column {
        @apply com-row-start-1;
      }
    }
  }
}

/*
HTML Emmet's
1. div.one-column-layout
 */
.one-column-layout {
  @include grid-layout(24);

  & > * {
    @apply com-col-span-full;
  }
}
