@import './../variables.scss';

article {
    display: block;
    color: #000;
    font-size: 0;
    border: 1px solid #666;
    background: #F1F1F1;
    margin: 0 auto 1rem auto;
    box-sizing: border-box;

    .description {
        display: block;
        font-weight: normal;
        font-size: 1.2rem;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
    }

    .step {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;

        .test {
            display: block;
            color: #FFFFFF;
            background-color: #999999;
            width: calc(70% - 0.75rem);
            font-size: 1rem;
            margin: 0 0.25rem 0.5rem 0.5rem;
            padding: 0.5rem;
            box-sizing: border-box;
            overflow: auto;

            .field {
                display: flex;
                margin: 0.25rem 0;

                input[type="text"], input[type="number"] {
                    width: 100%;
                    box-sizing: border-box;
                    border: 1px solid #333;
                    font-size: 1rem;
                    padding: 0.3rem;
    
                }
    
                input[type="button"] {
                    display: inline-block;
                    width: auto;
                    box-sizing: border-box;
                    border: 1px solid #333;
                    background-color: #EDEDED;
                    font-size: 1rem;
                    padding: 0.3rem 1rem;
                }

                textarea {
                    width: 100%;
                    height: 10rem;
                    box-sizing: border-box;
                    border: 1px solid #333;
                    font-size: 1rem;
                    padding: 0.3rem;
                }
            }
        }

        .output {
            display: block;
            background-color: #FFFFFF;
            border: 1px solid #999999;
            width: calc(30% - 0.75rem);
            font-size: 1rem;
            margin: 0 0.5rem 0.5rem 0.25rem;
            padding: 0.5rem;
            box-sizing: border-box;
            word-break: break-word;
            white-space: pre-wrap;
            overflow: auto;

            &.true {
                background-color: #CCFFCC;
            }
            &.false {
                background-color: #FFCCCC;
            }
        }

        .process {
            display: none;
        }

        @include bp-l {
            display: block;

            .test {
                width: 96%;
                margin: 0.5rem auto;

                .field {
                    display: block;
                }
            }

            .output {
                width: 96%;
                margin: 0.5rem auto;
            }
        }

    }
}