

// TODO:
//      - padding v moblinich rozlisenich u jednotlivejch sirek

.xprez-grid-boxes {
    &.full-width {  @include full-width; }
    &.mid-width {   @include m-width; }
    &.text-width {  @include s-width; }

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 0 !important;

    // basic box style

    .xprez-grid-box {
        width: 25%;
        box-sizing: border-box;
        display: flex;
    }

    .xprez-grid-box-inner {
        flex: 1;
        overflow: hidden;
    }

    // box margins switch

    &.margin-m {
        padding-left: $gridbox-margin-m*.5;
        padding-right: $gridbox-margin-m*.5;

        &.mid-width { max-width: $m-width + $gridbox-margin-m*2; }
        &.text-width { max-width: $s-width + $gridbox-margin-m*2; }
        .xprez-grid-box { padding: $gridbox-margin-m*.5; }
    }

    &.margin-l {
        padding-left: $gridbox-margin-l*.5;
        padding-right: $gridbox-margin-l*.5;

        &.mid-width     { max-width: $m-width + $gridbox-margin-l*2; }
        &.text-width    { max-width: $s-width + $gridbox-margin-l*2; }
        .xprez-grid-box { padding: $gridbox-margin-l*.5; }

        @media screen and (max-width: 1150px) {
            padding-left: $gridbox-margin-m*.5;
            padding-right: $gridbox-margin-m*.5;

            .xprez-grid-box { padding: $gridbox-margin-m*.5; }
        }
    }

    &.margin-l, &.margin-m {
        @media only screen and (max-width: (600px)) {
            padding-left: $gridbox-margin-s*.5;
            padding-right: $gridbox-margin-s*.5;

            .xprez-grid-box { padding: $gridbox-margin-s*.5; }
        }
    }

    // box backgound switch

    &.boxes_filled .xprez-grid-box-inner {
        background: var(--x-gridbox-bg);
        border-radius: $gridbox-border-radius;
    }

    // box border switch

    &.border .xprez-grid-box-inner {
        border: 1px solid var(--x-gridbox-border-color);
        border-radius: $gridbox-border-radius;
    }

    // box padding switch

    &.padded {
        .xprez-grid-box-inner {
            padding: $gridbox-padding;

            @media (max-width: $break-s) {
                padding: $gridbox-padding * .5;
            }
        }

        &.columns-6, &.columns-8 {
            &.textsize-s, &.textsize-s {
                .xprez-grid-box-inner {
                    padding: $gridbox-padding * .5;
                }
            }
        }
    }

    // Image sizing based on settings

    &.image-sizing-edge.padded {
        .medium-insert-images-center {
            margin-left: - $gridbox-padding;
            margin-right: - $gridbox-padding;

            &:first-child {
                margin-top: - $gridbox-padding;
            }
        }

        &.columns-6, &.columns-8 {
            .medium-insert-images-center {
                margin-left: - ($gridbox-padding * .5);
                margin-right: - ($gridbox-padding * .5);

                &:first-child {
                    margin-top: -($gridbox-padding * .5);
                }
            }
        }

        img {
            width: 100%;
        }
    }

    &.image-sizing-icon {
        img {
            display: block;
            max-width: var(--xprez-gridbox-item-image-width, 50%);
        }

        &.centered {
            img {
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    // grid sizes

    &.columns-2 {
        .xprez-grid-box { width: 50%; }
    }

    &.columns-3 {
        .xprez-grid-box { width: 33.3%; }
    }
    &.columns-4 {
        .xprez-grid-box { width: 25%; }
    }
    &.columns-6 {
        .xprez-grid-box { width: 16.6%; }
    }
    &.columns-8 {
        .xprez-grid-box { width: 12.5%; }
    }

    // sizes - mobile modifications

    &.full-width, &.mid-width {
        &.columns-2 .xprez-grid-box {
            @media screen and (max-width: 800px) { width: 100% }
        }

        &.columns-3 .xprez-grid-box {
            @media screen and (max-width: 900px) { width: 50% }
            @media screen and (max-width: 600px) { width: 100% }
        }

        &.columns-4 .xprez-grid-box {
            @media screen and (max-width: 1000px) { width: 50% }
            @media screen and (max-width: 500px) { width: 100% }
        }

        &.columns-6 .xprez-grid-box {
            @media screen and (max-width: 1000px) { width: 33.3% }
            @media screen and (max-width: 600px) { width: 50% }
        }

        &.columns-8 .xprez-grid-box {
            @media screen and (max-width: 900px) { width: 25% }
            @media screen and (max-width: 450px) { width: 50% }
        }
    }

    &.text-width {

        &.columns-2 .xprez-grid-box {
            @media screen and (max-width: 600px) { width: 100% }
        }

        &.columns-3 .xprez-grid-box {
            @media screen and (max-width: 600px) { width: 50% }
            @media screen and (max-width: 400px) { width: 100% }
        }

        &.columns-4 .xprez-grid-box {
            @media screen and (max-width: 650px) { width: 50% }
            @media screen and (max-width: 500px) { width: 100% }
        }

        &.columns-6 .xprez-grid-box {
            @media screen and (max-width: 650px) { width: 33.3% }
            @media screen and (max-width: 400px) { width: 50% }
        }

        &.columns-8 .xprez-grid-box {
            @media screen and (max-width: 650px) { width: 25% }
            //@media screen and (max-width: 30px) { width: 50% }
        }
    }

    // text size and adjustments

    .xprez-grid-box, .xprez-grid-boxes-admin-wrapper {
        h2 {
            font-size: $gridbox-h2-size;
            margin-top: 0.5em;
            margin-bottom: 0.2em;

            &:first-child {
                margin-top: 0;}
        }

        h3 {
            font-size: $gridbox-h3-size;
            margin-top: 0.4em;
            margin-bottom: 0.4em;

            &:first-child {
                margin-top: 0;}
        }

        p {
            font-size: $gridbox-base-relative-size;
            margin-bottom: 0.5em;

            &:last-child {
                margin-bottom: 0.2em;}
        }

        ul, li, ol, blockquote {
            font-size: $gridbox-base-relative-size;
        }

        .btn {
            margin-top: 0.5em;
            font-size: $gridbox-button-size;

            @if $gridbox-use-small-buttons and $use-xprez-button-styles {
                padding: 0.75em 1.25em;
            }
        }
    }

    &:not(.padded):not(.centered) {
        p, ul, ol, h3, h2 {
            padding-right: 15%;}
    }

    &.textsize-m .xprez-grid-box {
        font-size: $gridbox-m-scale * $gridbox-base-size;

        //p, ul, li  {
        //    line-height: 1.7;
        //}
    }

    &.textsize-s .xprez-grid-box {
        font-size: $gridbox-s-scale * $gridbox-base-size;

        //p, ul, li  {
        //    line-height: 1.7;
        //}
    }

    &.textsize-xs .xprez-grid-box {
        font-size: $gridbox-xs-scale * $gridbox-base-size;

        //p, ul, li  {
        //    line-height: 1.5;
        //}
    }

    figure {
        margin-bottom: $gridbox-media-margin-bottom;
    }

    // centering

    &.centered .xprez-grid-box * {
        text-align: center;
    }
}

//
//  Medium editor specific Grid boxes tweaks
//

.xprez-grid-box {
    .medium-insert-images {
        figure {
            margin-top: 1.25em;
            //margin-bottom: 1.25em;
        }

        &:first-child figure {
            margin-top: 0;
        }
    }
}

.nothing {
    color: inherit;
}