@import "../../../../_common/scss/main";

.LoginModal {
    &.Modal__wrapper {
        max-width: 400px;
        overflow-y: auto;

        &--fullScreen {
            max-width: 100%;
        }
    }

    &__Header {
        //white-space: nowrap; -- not sure why this exists - looks like doodoo on mobile
        padding-bottom: 0;

        @include tablet {
            padding-left: $gutter-large;
            padding-right: $gutter-large;
        }

        &__Logo {
            font-size: 45px;
            color: $primary-color;
            margin-bottom: $gutter;
            display: block;
        }
    }

    &__Content {
        overflow: visible;

        &__LoginSubmit {
            width: 100%;
        }

        &__Buttons {
            &__Google,
            &__Facebook,
            &__Guest {
                width: 100%;
                margin-bottom: $gutter;
            }
        }

        &__SignUp {
            text-align: center;
        }

        &__Separator {
            padding: 0;

            &__Content {
                padding: 0 $gutter-large;
            }
        }
    }

	&__Terms {
		text-align: center;
		margin: 0 auto $gutter-large;
	}

	&__Subheader {
		text-align: center;
		padding: $gutter calc(#{$gutter-extra-large} + #{$gutter-large});
	}
}