//
// Crafting Guide - mod_tile.scss
//
// Copyright © 2014-2017 by Redwood Labs
// All rights reserved.
//

.view__mod_tile {
    display: flex;

    .tile {
        flex: 1 1 auto;

        @include floating-panel;
        min-width : $size-minecraft-block * 9;

        display: flex;
        flex-direction: column;

        border : $size-border-medium solid $color-background-panel;

        a {
            flex: 1 1 auto;
            color           : $color-text;
            text-decoration : none;

            display : flex;
            padding : $size-margin-medium;

            & > .left {
                flex: 0 0 $size-minecraft-block * 4;
                margin-right: $size-margin-medium;

                img {
                    width: $size-minecraft-block * 4;
                    max-height: $size-minecraft-block * 4;
                }
            }

            & > .right {
                flex : 1 1 100%;

                overflow : hidden;

                .title {
                    max-width: 0;
                    margin-bottom : $size-margin-medium;

                    font-family : $font-family-header;
                    font-size   : $font-size-xlarge;
                }

                .description {
                    font-family : $font-family-text;
                    font-size   : $font-size-medium;
                    line-height : $font-size-medium * 1.5;
                }
            }
        }

        &:hover {
            background: $color-blue-faint;
            border-color: $color-link-normal;

            & a > .right {
                .title {
                    color: $color-link-normal;
                    text-decoration: underline;
                }
            }
        }

        .view__mod_version_selector {
            margin: 0;
            padding: $size-margin-small $size-margin-medium;
        }
    }

    &.disabled {
        a {
            & > .left {
                img {
                    @include grayscale;
                    opacity: 0.25;
                }
            }

            & > .right {
                .title {
                    color: $color-gray-light;
                }

                .description {
                    color: $color-gray-light;
                }
            }
        }
    }
}

@include screen-size(mobile) {
    .view__mod_tile {
        min-width: 0;

        a {
            & > .left {
                flex: 0 0 $size-minecraft-block * 2;

                img {
                    width: $size-minecraft-block * 2;
                    max-height: $size-minecraft-block * 2;
                }
            }
        }
    }
}
