:host {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    form {
        margin: 1em;
        max-width: 80em;
        width: 90%;
        border-radius: .5em;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);

        & > header {
            padding: 2em;
            background-color: #3f51b5;
            color: white;
            border-radius: .5em .5em 0 0;

            h1 {
                font-size: 2em;
                margin-bottom: .5em;
            }
        }

        footer {
            padding: 2em;
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: center;
        }
    }
}

.form-content {
    padding: 2em;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: .5em;

    mat-form-field {
        textarea {
            height: 20em;
        }
    }

    .first-part {
        display: flex;
        flex-direction: column-reverse;
        gap: 1em;

        @media screen and (min-width: 600px) {
            flex-direction: row;

            div {
                flex: 1 0;

                &.picture-container {
                    max-width: 20em;

                    img {
                        max-height: 15em;
                        max-width: 20em;
                    }
                }
            }
        }

        div {
            flex: 1 0 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            &.picture-container {
                img {
                    flex: 1;
                    object-fit: cover;
                    width: 100%;
                    cursor: pointer;
                    border-radius: 1em;
                    opacity: .9;
                    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
                    transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;

                    &:hover {
                        cursor: pointer;
                        opacity: 1;
                        box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
                    }
                }
            }
        }
    }

    .actions {
        display: flex;
        flex-direction: row;
        gap: .5em;

        button {
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3em;
            height: 3em;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
            font-weight: bold;
        }
    }
}

button, a.button {
    padding: .8em 1.2em;
    border-radius: 10em;
    border: none;
    background-color: #3f51b5;
    color: white;
    transition: background-color .2s ease-in-out;

    &:hover {
        background-color: #5b6ed8;
        cursor: pointer;
    }

    &:disabled {
        background-color: #5f6aa6;
        cursor: not-allowed;
    }

    &.secondary {
        color: #3f51b5;
        background-color: white;

        &:hover {
            background-color: #f2f4ff;
            cursor: pointer;
        }
    }
}

.preview {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow-y: auto;

    .preview-loading {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .illustration {
        flex: 1;
        height: 12em;
        object-fit: cover;
        transition: height .2s ease-in-out;

        @media screen and (min-width: 450px) {
            height: 15em;
        }

        @media screen and (min-width: 600px) {
            height: 20em;
        }

        @media screen and (min-width: 750px) {
            height: 25em;
        }
    }

    header {
        padding: 2em;
    }

    main {
        padding: 2em;
        text-align: justify;
    }
}