/*
Copyright (C) 2017 Draios inc.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License version 2 as
published by the Free Software Foundation.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

.wsd-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;

    &__hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10vh;

        img {
            width: 80vw;
            max-width: 620px;
        }
    }

    &__body {
        flex: 1;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding-top: 10vh;

        overflow: auto;
    }

    &__card-list {
        display: flex;
        justify-content: center;

        padding: @layout-padding-xl;
    }

    &__card {
        flex: 1;

        max-width: 310px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        font-size: @font-size-xl;
        line-height: @font-line-height-xl;
        font-weight: @font-weight-light;
        color: @color-text-lighter;
    }

    &__card + &__card {
        margin-left: @layout-spacing-xl;
    }

    &__card-header {
        font-size: @font-size-xxl;
        line-height: @font-line-height-xxl;
        margin-bottom: @layout-spacing-lg;
    }
    &__card-content {
        flex: 1;
        margin-bottom: @layout-spacing-lg;
    }
    &__card-footer {
        display: flex;
        height: 48px;
        line-height: 48px;
    }
    &__card-extra-footer {
        height: 48px;
        line-height: 48px;

        color: @color-text-muted;
        font-size: @font-size-sm;
    }

    &__code {
        display: block;
        margin-top: @layout-spacing-md;
        padding: @layout-padding-sm;
        background-color: @color-primary-lighten-5;
        border: 1px solid @color-primary-lighten-4;
        border-radius: 3px;

        font-family: @font-monospace-family;
        font-size: @font-size-md;
        line-height: @font-line-height-md;
    }

    @media screen and (max-width: 950px) {
        &__card-list {
            display: block;
        }
        &__card {
            width: 80vw;
            max-width: 80vw;
        }

        &__card + &__card {
            margin-left: 0;
            margin-top: @layout-spacing-xl;
        }
    }
}
