<div id="app">
    <div class="component-container">
        <mds-stepper>
            <mds-stepper-step title="Account" has-items complete>
                <mds-stepper-item title="1.1" complete></mds-stepper-item>
                <mds-stepper-item title="1.2" complete></mds-stepper-item>
            </mds-stepper-step>
            <mds-stepper-step title="Personal" active></mds-stepper-step>
            <mds-stepper-step title="Payment"></mds-stepper-step>
        </mds-stepper>
        <div class="form-container">
            <mds-form>
                <mds-fieldset horizontal legend="Your Name" hidden-legend>
                    <mds-input disabled label="First Name" value="Morningstar"></mds-input>
                    <mds-input disabled label="Last Name" value="Inc."></mds-input>
                </mds-fieldset>
                <mds-date-picker label="Date of Birth" disabled :min-max-dates="{min: new Date(2015, 0, 1), max: new Date()}" :labels="{month: 'short'}" :date-format="{month: 'short'}" :value="new Date(1984, 5, 14)"></mds-date-picker>
                <mds-fieldset legend="Your address" hidden-legend>
                    <mds-select label="Country" disabled :options="[
            { text: 'United States', value: 'united_states' }
        ]"></mds-select>
                    <mds-input label="Street Address" value="22 W Washington St. #7" disabled></mds-input>
                    <mds-fieldset horizontal>
                        <mds-input label="City" value="Chicago" disabled></mds-input>
                        <mds-input label="State" value="Illinois" disabled></mds-input>
                        <mds-input label="Zipcode" value="60602" disabled></mds-input>
                    </mds-fieldset>
                </mds-fieldset>
            </mds-form>
            <div class="btn-container">
                <mds-button variation="secondary">Back</mds-button>

                <mds-button variation="primary" @click="fin = !fin">Next</mds-button>
            </div>
        </div>
    </div>
</div>

// All mixins and constants are available for use

#app {
    // Custom Component Styles
    .component-container {
        margin: $mds-space-2-x;
        display: flex;
    }

    .form-container {
        margin: $mds-space-3-x;
        display: flex;
        flex-direction: column;
    }

    .btn-container {
        margin-top: $mds-space-2-and-a-half-x;
        align-self: end;
    }

    // MDS Component Overrides
    .mds-stepper {
        width: 150px;
        min-width: 150px;

        &__step-indicator {
            transform: rotate(-90deg);
        }
        &__list {
            transform: rotate(90deg) translate(170px, 200px);
            width: 500px;

            &-item-label {
                transform: rotate(-90deg) translate(10px, 15px);
                text-align: initial;
            }
        }
    }
}

// Add data or methods here
// ------------------------

const app = new Vue({
    el: "#app"
});