/* Tileset */

.tileset {
    $gutter: 0;

    @include vendor('display', 'flex');
    @include vendor('flex-wrap', 'wrap');
    margin: 0 !important;
    width: 100%;

    .tile-container {
        @include vendor('flex-grow', '1');
        @include vendor('flex-shrink', '1');

        position: relative;
        margin: 0;
        padding: 0;
        min-height: 30vh;

        .tile {
            transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, background-color 0.4s;

            position: relative;
            top: 10%;
            left: 10%;
            padding: 0;
            width: 80%;
            height: 80%;

            border-radius: 0.5rem;
            border: 0;
            display: block;
            overflow: hidden;

            background-color: #336699 !important;

            div.on, div.off {
                position: absolute;
                width: 100%;
                padding: 1em;
                top: 50%;
                transform: translateY(-50%);
            }

            h3, p, div, .icon {
                margin: 0 !important;
                width: 100%;
                text-align: center;
                color: _palette(bg) !important;
            }

            .on {
                display: block;
            }

            .off {
                display: none;
            }


            .icon {
                z-index: 10;
                width: 100%;
                padding: 0;
                position: relative;
                color: _palette(accent);
                font-size: 3rem;
                text-align: center;

                &:before{
                    width: 100%;
                }
            }
        }
    }

    .tile-container:hover, .tile-container:active {
        .tile {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            background-color: _palette(accent) !important;

            h3, p, .icon {
                color: _palette(accent-cp) !important;
            }

            .on {
                display: none;
            }

            .off {
                display: block;
            }
        }
    }
}

/* Inverted */

.inverted .tileset .tile-container {
    .tile {
        background-color: rgba(0,100,140,0.6) !important;

        h3, p, icon {
            color: _palette(bg) !important;
        }
    }
}

.inverted .tileset .tile-container:hover, .inverted .tileset .tile-container:active {
    .tile {
        background-color: _palette(accent) !important;

        h3, p, icon {
            color: _palette(accent-cp) !important;
        }
    }
}