@import '../../mixins', '../../includes', '../../variables';

@if (
    $mm_include_tileview_xs or
        $mm_include_tileview_s or
        $mm_include_tileview_m or
        $mm_include_tileview_l or
        $mm_include_tileview_xl
) {
    .mm-menu_tileview,
    .mm-panel_tileview {
        .mm-listview {
            margin: 0 !important;

            @include mm_clearfix;
        }

        .mm-listitem {
            padding: 0;
            float: left;
            position: relative;

            &:after {
                left: 0;
                top: 0;
                border-right-width: 1px;
                border-right-style: solid;
                z-index: -1;
            }

            @if ($mm_include_tileview_xs) {
                &.mm-tile-xs {
                    width: 12.5%;
                    padding-top: 12.5%;
                }
            }

            @if ($mm_include_tileview_s) {
                &.mm-tile-s {
                    width: 25%;
                    padding-top: 25%;
                }
            }

            @if ($mm_include_tileview_m) {
                width: 50%;
                height: 0;
                padding-top: 50%;
            }

            @if ($mm_include_tileview_l) {
                &.mm-tile-l {
                    width: 75%;
                    padding-top: 75%;
                }
            }

            @if ($mm_include_tileview_xl) {
                &.mm-tile-xl {
                    width: 100%;
                    padding-top: 100%;
                }
            }
        }

        .mm-listitem__text {
            line-height: 1px;
            text-align: center;
            padding: 50% $mm_padding 0 $mm_padding;
            margin: 0;
            position: absolute;
            top: 0;
            right: 1px;
            bottom: 1px;
            left: 0;
        }

        .mm-listitem__btn {
            width: auto;

            &:before,
            &:after {
                content: none;
                display: none;
            }
        }

        .mm-divider {
            display: none;
        }
    }

    .mm-menu_tileview .mm-panel,
    .mm-panel_tileview {
        padding-left: 0;
        padding-right: 0;

        &:before,
        &:after {
            content: none;
            display: none;
        }
    }
}