/* 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;
    }
}

}