// Grids
//
// PAM comes with 1ths to 5ths and 24ths based grid and to wield the grids power there are
// some concepts to keep in mind. PAM Grid consist of two types of attribute selectors:
// `pam-Grid` and `pam-Unit`. **All child elements of a grid must be units. Child elements
// contained within an grid element must be a grid unit. All content which is visible
// needs to be contained inside a grid unit.**
//
// To control adaptive grids, use the default breakpoints with their
// correspinding attribute selector `pam-Unit="[breakpointKey]:[size]"`. For more
// details on how to use, have a look at the adaptive grids section.
// <table pam-Table="striped">
//     <thead>
//         <tr>
//             <th>Key</th>
//             <th>Attribute</th>
//             <th>Applies</th>
//             <th>Media Query</th>
//         </tr>
//     </thead>
//     <tbody>
//         <tr>
//             <td>none</td>
//             <td>pam-Unit="[size]"</td>
//             <td>Always</td>
//             <td>None</td>
//         </tr>
//         <tr>
//             <td>small</td>
//             <td>pam-Unit="small:[size]"</td>
//             <td>≥ 480px</td>
//             <td>@media screen and (min-width: 480px)</td>
//         </tr>
//         <tr>
//             <td>medium</td>
//             <td>pam-Unit="medium:[size]"</td>
//             <td>≥ 768px</td>
//             <td>@media screen and (min-width: 768px)</td>
//         </tr>
//         <tr>
//             <td>large</td>
//             <td>pam-Unit="large:[size]"</td>
//             <td>≥ 960px</td>
//             <td>@media screen and (min-width: 960px)</td>
//         </tr>
//         <tr>
//             <td>xlarge</td>
//             <td>pam-Unit="xlarge:[size]"</td>
//             <td>≥ 1200px</td>
//             <td>@media screen and (min-width: 1200px)</td>
//         </tr>
//     </tbody>
// </table>
//
// Weight: 2
//
// Style guide: grids

// Fractions
//
// PAM grid supports 1th to 5th and 24th-based grid fractions. Use them
// with `pam-Unit="[1-X]-X"`.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1">
//         <div pam-Unit-Test>1</div>
//     </div>
// </div>
// <div pam-Grid>
//     <div pam-Unit="1-2">
//         <div pam-Unit-Test>2</div>
//     </div>
//     <div pam-Unit="1-2">
//         <div pam-Unit-Test>2</div>
//     </div>
// </div>
// <div pam-Grid>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>3</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>3</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>3</div>
//     </div>
// </div>
// <div pam-Grid>
//     <div pam-Unit="1-4">
//         <div pam-Unit-Test>4</div>
//     </div>
//     <div pam-Unit="1-4">
//         <div pam-Unit-Test>4</div>
//     </div>
//     <div pam-Unit="1-4">
//         <div pam-Unit-Test>4</div>
//     </div>
//     <div pam-Unit="1-4">
//         <div pam-Unit-Test>4</div>
//     </div>
// </div>
// <div pam-Grid>
//     <div pam-Unit="1-5">
//         <div pam-Unit-Test>5</div>
//     </div>
//     <div pam-Unit="1-5">
//         <div pam-Unit-Test>5</div>
//     </div>
//     <div pam-Unit="1-5">
//         <div pam-Unit-Test>5</div>
//     </div>
//     <div pam-Unit="1-5">
//         <div pam-Unit-Test>5</div>
//     </div>
//     <div pam-Unit="1-5">
//         <div pam-Unit-Test>5</div>
//     </div>
// </div>
// <div pam-Grid>
//     <div pam-Unit="4-24">
//         <div pam-Unit-Test>24</div>
//     </div>
//     <div pam-Unit="4-24">
//         <div pam-Unit-Test>24</div>
//     </div>
//     <div pam-Unit="4-24">
//         <div pam-Unit-Test>24</div>
//     </div>
//     <div pam-Unit="4-24">
//         <div pam-Unit-Test>24</div>
//     </div>
//     <div pam-Unit="4-24">
//         <div pam-Unit-Test>24</div>
//     </div>
//     <div pam-Unit="4-24">
//         <div pam-Unit-Test>24</div>
//     </div>
// </div>
//
// Weight: 1
//
// Style guide: grids.fractions

// Nested
//
// Grids can be nested. This examples shows a two level nested grid...
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-2">
//         <div pam-Unit-Test>
//         <div pam-Grid>
//             <div pam-Unit="1-2">
//                 <div pam-Unit-Test>1-2</div>
//             </div>
//             <div pam-Unit="1-2">
//                 <div pam-Unit-Test>1-2</div>
//             </div>
//         </div>
//     </div>
// </div>
// <div pam-Unit="1-2">
//         <div pam-Unit-Test>
//             <div pam-Grid>
//                 <div pam-Unit="1-3">
//                     <div pam-Unit-Test>1-3</div>
//                 </div>
//                 <div pam-Unit="1-3">
//                     <div pam-Unit-Test>1-3</div>
//                 </div>
//                 <div pam-Unit="1-3">
//                     <div pam-Unit-Test>1-3</div>
//                 </div>
//             </div>
//         </div>
//     </div>
// </div>
//
// Weight: 2
//
// Style guide: grids.nested

// Adaptive
//
// `pam-Unit="1-1 small:1-2 large:1-4"` Creates a adaptive grid. On small devices it will
// have width: 100%, then it will shrink to width: 50% on small-sized screens and
// shrink to 25% on large-sized screens and above.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//         <div pam-Unit-Test>1 &#10141; 2 &#10141; 4</div>
//     </div>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//         <div pam-Unit-Test>1 &#10141; 2 &#10141; 4</div>
//     </div>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//         <div pam-Unit-Test>1 &#10141; 2 &#10141; 4</div>
//     </div>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//         <div pam-Unit-Test>1 &#10141; 2 &#10141; 4</div>
//     </div>
// </div>
//
// Weight: 3
//
// Style guide: grids.adaptive

// Landscape
//
// `pam-Unit="1-1 small:1-2 small:landscape:1-3"` Creates a adaptive grid which has the
// additional landscape state. On a small device and in landscape the unit width will shrink to 33%.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 small:1-2 small:landscape:1-3">
//         <div pam-Unit-Test>1 &#10141; 2 &#10141; landscape 3</div>
//     </div>
//     <div pam-Unit="1-1 small:1-2 small:landscape:1-3">
//         <div pam-Unit-Test>1 &#10141; 2 &#10141; landscape 3</div>
//     </div>
//     <div pam-Unit="1-1 small:1-2 small:landscape:1-3">
//         <div pam-Unit-Test>1 &#10141; 2 &#10141; landscape 3</div>
//     </div>
// </div>
//
// Style guide: grids.adaptive.landscape

// Nested
//
// As with the regular grid the adaptive grid can be nested. This example shows
// two units `pam-Unit="1-1 medium:1-2"` that each contain a adaptive grid.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 medium:1-2">
//         <div pam-Unit-Test>
//             <div pam-Grid>
//                 <div pam-Unit="1-1 large:1-2">
//                     <div pam-Unit-Test>1 &#10141; 2</div>
//                 </div>
//                 <div pam-Unit="1-1 large:1-2">
//                     <div pam-Unit-Test>1 &#10141; 2</div>
//                 </div>
//             </div>
//         </div>
//     </div>
//     <div pam-Unit="1-1 medium:1-2">
//         <div pam-Unit-Test>
//             <div pam-Grid>
//                 <div pam-Unit="1-3 large:1-2">
//                     <div pam-Unit-Test>3 &#10141; 2</div>
//                 </div>
//                 <div pam-Unit="1-3 large:1-4">
//                     <div pam-Unit-Test>3 &#10141; 4</div>
//                 </div>
//                 <div pam-Unit="1-3 large:1-4">
//                     <div pam-Unit-Test>3 &#10141; 4</div>
//                 </div>
//             </div>
//         </div>
//     </div>
// </div>
//
// Style guide: grids.adaptive.nested

// Media items
//
// `pam-Image` elements can easily be used with the grid. This example shows a `pam-Unit="1-1 small:1-2 large:1-4"` grid with `pam-Image` elements.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//         <img pam-Image src="kss-assets/img/icon-60@3x.png">
//     </div>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//         <img pam-Image src="kss-assets/img/icon-60@3x.png">
//     </div>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//         <img pam-Image src="kss-assets/img/icon-60@3x.png">
//     </div>
//     <div pam-Unit="1-1 small:1-2 large:1-4">
//        <img pam-Image src="kss-assets/img/icon-60@3x.png">
//     </div>
// </div>
//
// Weight: 4
//
// Style guide: grids.media

// ==================================================================
//  Grid
// ==================================================================

[pam-Grid] {
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
    font-family: Arial, sans-serif;
    display: -webkit-box; // fallback to old flexbox spec
    display: flex;
    flex-flow: row wrap;

    .hook-grid;
}

//  Sub-object: Unit
// ==================================================================

[pam-Grid] [pam-Unit] {
    display: inline-block;
    font-family: @font-family;
    letter-spacing: normal;
    position: relative;
    text-rendering: auto;
    vertical-align: top;
    word-spacing: normal;

    .hook-unit;
}

//  Generate grid columns
// ------------------------------------------------------------------

// 1th-based units
.grid-units(1);

// 2th-based units
.grid-units(2);

// 3th-based units
.grid-units(3);

// 4th-based units
.grid-units(4);

// 5th-based units
.grid-units(5);

// 24th-based units
.grid-units(24);

// Small device breakpoint
// ------------------------------------------------------------------

@media screen and (min-width: @breakpoint-small) {
    // 1th-based units
    .grid-units(1, 1, "small:");

    // 2th-based units
    .grid-units(2, 1, "small:");

    // 3th-based units
    .grid-units(3, 1, "small:");

    // 4th-based units
    .grid-units(4, 1, "small:");

    // 5th-based units
    .grid-units(5, 1, "small:");

    // 24th-based units
    .grid-units(24, 1, "small:");
}

@media screen and (min-width: @breakpoint-small) and (orientation: landscape) {
    // 1th-based units
    .grid-units(1, 1, "small:landscape:");

    // 2th-based units
    .grid-units(2, 1, "small:landscape:");

    // 3th-based units
    .grid-units(3, 1, "small:landscape:");

    // 4th-based units
    .grid-units(4, 1, "small:landscape:");

    // 5th-based units
    .grid-units(5, 1, "small:landscape:");

    // 24th-based units
    .grid-units(24, 1, "small:landscape:");
}

// Medium device breakpoint
// ------------------------------------------------------------------

@media screen and (min-width: @breakpoint-medium) {
    // 1th-based units
    .grid-units(1, 1, "medium:");

    // 2th-based units
    .grid-units(2, 1, "medium:");

    // 3th-based units
    .grid-units(3, 1, "medium:");

    // 4th-based units
    .grid-units(4, 1, "medium:");

    // 5th-based units
    .grid-units(5, 1, "medium:");

    // 24th-based units
    .grid-units(24, 1, "medium:");
}

@media screen and (min-width: @breakpoint-medium) and (orientation: landscape) {
    // 1th-based units
    .grid-units(1, 1, "medium:landscape:");

    // 2th-based units
    .grid-units(2, 1, "medium:landscape:");

    // 3th-based units
    .grid-units(3, 1, "medium:landscape:");

    // 4th-based units
    .grid-units(4, 1, "medium:landscape:");

    // 5th-based units
    .grid-units(5, 1, "medium:landscape:");

    // 24th-based units
    .grid-units(24, 1, "medium:landscape:");
}

// Large device breakpoint
// ------------------------------------------------------------------

@media screen and (min-width: @breakpoint-large) {
    // 1th-based units
    .grid-units(1, 1, "large:");

    // 2th-based units
    .grid-units(2, 1, "large:");

    // 3th-based units
    .grid-units(3, 1, "large:");

    // 4th-based units
    .grid-units(4, 1, "large:");

    // 5th-based units
    .grid-units(5, 1, "large:");

    // 24th-based units
    .grid-units(24, 1, "large:");
}

@media screen and (min-width: @breakpoint-large) and (orientation: landscape) {
    // 1th-based units
    .grid-units(1, 1, "large:landscape:");

    // 2th-based units
    .grid-units(2, 1, "large:landscape:");

    // 3th-based units
    .grid-units(3, 1, "large:landscape:");

    // 4th-based units
    .grid-units(4, 1, "large:landscape:");

    // 5th-based units
    .grid-units(5, 1, "large:landscape:");

    // 24th-based units
    .grid-units(24, 1, "large:landscape:");
}

// Xlarge device breakpoint
// ------------------------------------------------------------------

@media screen and (min-width: @breakpoint-xlarge) {
    // 1th-based units
    .grid-units(1, 1, "xlarge:");

    // 2th-based units
    .grid-units(2, 1, "xlarge:");

    // 3th-based units
    .grid-units(3, 1, "xlarge:");

    // 4th-based units
    .grid-units(4, 1, "xlarge:");

    // 5th-based units
    .grid-units(5, 1, "xlarge:");

    // 24th-based units
    .grid-units(24, 1, "xlarge:");
}

@media screen and (min-width: @breakpoint-xlarge) and (orientation: landscape) {
    // 1th-based units
    .grid-units(1, 1, "xlarge:landscape:");

    // 2th-based units
    .grid-units(2, 1, "xlarge:landscape:");

    // 3th-based units
    .grid-units(3, 1, "xlarge:landscape:");

    // 4th-based units
    .grid-units(4, 1, "xlarge:landscape:");

    // 5th-based units
    .grid-units(5, 1, "xlarge:landscape:");

    // 24th-based units
    .grid-units(24, 1, "xlarge:landscape:");
}

//  Grid controls
// ==================================================================

// Controls
//
// Sometimes the grid needs to be adjusted to it´s context. Use the
// `pam-Grid-Control` attribute to adjust different
// aspects of the grid such as alignment, order and direction. To better
// understand how it all works visit
// <a href="https://codepen.io/enxaneta/full/adLPwv" target="_blank">flexbox playground</a>.
//
// Weight: 6
//
// Style guide: grids.controls

// Direction
//
// Use `pam-Grid-Control="direction:[row|row-reverse|column|column-reverse]"`
// to control the direction of the grid.
//
// Markup:
// <div pam-Grid pam-Grid-Control="direction:column">
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
// </div>
//
// Weight: 1
//
// Style guide: grids.controls.direction

[pam-Grid][pam-Grid-Control~="direction:row"] {
    flex-direction: row;
}

[pam-Grid][pam-Grid-Control~="direction:row-reverse"] {
    flex-direction: row-reverse;
}

[pam-Grid][pam-Grid-Control~="direction:column"] {
    flex-direction: column;
}

[pam-Grid][pam-Grid-Control~="direction:column-reverse"] {
    flex-direction: column-reverse;
}

// Wrap
//
// Use `pam-Grid-Control="wrap:[wrap|wrap-reverse|nowrap]"`
// to control the wrapping of the grid.
//
// Markup:
// <div pam-Grid pam-Grid-Control="wrap:nowrap">
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Nowrap</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Nowrap</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Nowrap</div>
//     </div>
// </div>
//
// Weight: 2
//
// Style guide: grids.controls.wrap

[pam-Grid][pam-Grid-Control~="wrap:wrap"] {
    flex-wrap: wrap;
}

[pam-Grid][pam-Grid-Control~="wrap:wrap-reverse"] {
    flex-wrap: wrap-reverse;
}

[pam-Grid][pam-Grid-Control~="wrap:nowrap"] {
    flex-wrap: nowrap;
}

// Justify content
//
// Use `pam-Grid-Control="justify:[start|center|end|between|around|evenly]"`
// to justify content of a grid.
//
// Markup:
// <div pam-Grid pam-Grid-Control="justify:start" pam-skin="lighter">
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Start</div>
//     </div>
// </div>
// <div pam-Grid pam-Grid-Control="justify:center" pam-skin="light">
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Center</div>
//     </div>
// </div>
// <div pam-Grid pam-Grid-Control="justify:end" pam-skin="hint">
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>End</div>
//     </div>
// </div>
//
// Weight: 3
//
// Style guide: grids.controls.justify

[pam-Grid][pam-Grid-Control~="justify:start"] {
    justify-content: flex-start;
}

[pam-Grid][pam-Grid-Control~="justify:center"] {
    justify-content: center;
}

[pam-Grid][pam-Grid-Control~="justify:end"] {
    justify-content: flex-end;
}

[pam-Grid][pam-Grid-Control~="justify:between"] {
    justify-content: space-between;
}

[pam-Grid][pam-Grid-Control~="justify:around"] {
    justify-content: space-around;
}

[pam-Grid][pam-Grid-Control~="justify:evenly"] {
    justify-content: space-evenly;
}

// Align items
//
// Use `pam-Grid-Control="align:[start|center|end|basline|stretch]"`
// to align grid items along the cross axis on the current line.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-4" pam-skin="lighter">
//         <div pam-Grid pam-Grid-Control="align:start" sg-Height="150">
//             <div pam-Unit="1-1">
//                 <div pam-Unit-Test="stretch">Top</div>
//             </div>
//         </div>
//     </div>
//     <div pam-Unit="1-4" pam-skin="light">
//         <div pam-Grid pam-Grid-Control="align:center" sg-Height="150">
//             <div pam-Unit="1-1">
//                 <div pam-Unit-Test="stretch">Center</div>
//             </div>
//         </div>
//     </div>
//     <div pam-Unit="1-4" pam-skin="lighter">
//         <div pam-Grid pam-Grid-Control="align:end" sg-Height="150">
//             <div pam-Unit="1-1">
//                 <div pam-Unit-Test="stretch">End</div>
//             </div>
//         </div>
//     </div>
//     <div pam-Unit="1-4">
//         <div pam-Grid pam-Grid-Control="align:stretch" sg-Height="150">
//             <div pam-Unit="1-1">
//                 <div pam-Unit-Test="stretch">Stretch</div>
//             </div>
//         </div>
//     </div>
// </div>
//
// Weight: 4
//
// Style guide: grids.controls.align

[pam-Grid][pam-Grid-Control~="align:start"] {
    align-items: flex-start;
}

[pam-Grid][pam-Grid-Control~="align:center"] {
    align-items: center;
}

[pam-Grid][pam-Grid-Control~="align:end"] {
    align-items: flex-end;
}

[pam-Grid][pam-Grid-Control~="align:baseline"] {
    align-items: baseline;
}

[pam-Grid][pam-Grid-Control~="align:stretch"] {
    align-items: stretch;
}

// Align content
//
// Use `pam-Grid-Control="align-content:[start|center|end|space-between|space-around|stretch]"`
// to align flex containers lines within.
//
// Markup:
// <div pam-Grid pam-Grid-Control="align-content:space-between" pam-skin="lighter" sg-Height="150">
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
//     <div pam-Unit="1-3">
//         <div pam-Unit-Test>Column 1</div>
//     </div>
// </div>
//
// Weight: 5
//
// Style guide: grids.controls.align-content

[pam-Grid][pam-Grid-Control~="align-content:start"] {
    align-content: flex-start;
}

[pam-Grid][pam-Grid-Control~="align-content:center"] {
    align-content: center;
}

[pam-Grid][pam-Grid-Control~="align-content:end"] {
    align-content: flex-end;
}

[pam-Grid][pam-Grid-Control~="align-content:space-between"] {
    align-content: space-between;
}

[pam-Grid][pam-Grid-Control~="align-content:space-around"] {
    align-content: space-around;
}

[pam-Grid][pam-Grid-Control~="align-content:stretch"] {
    align-content: stretch;
}

// Hooks
// ==================================================================

// Hooks
//
// `.hook-grid`
// `.hook-unit`
//
// Weight: 10
//
// Style guide: grids.hooks

/* stylelint-disable block-no-empty */
.hook-grid() {
}
.hook-unit() {
}
/* stylelint-enable */