@import "_main";

html,
body {
    @include row();
    position: relative;
    width: 100%;
    height: 100%;
    @include body();
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
.header,
.main,
.footer {
    @include column(12);
    &__wrapper {
        @include flex();
        @include space-between();
        position: relative;
        width: 100%;
        padding: 0 32px;
        margin: 0 auto;
    }
}

.header {
    @include header();
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.main {
    display: table;
    width: 100%;
    padding-top: 136px;
    padding-bottom: 90px;
    z-index: 1;

    &__wrapper {
        @include flex-wrap();
        padding-top: 46px;
    }

    &__content {
        @include column(8);

        @include breakpoint(small) {
            width: 100%;
            padding: 0 14px;
        }
    }

    aside {
        @include column(4);
    }
}

.footer {
    @include footer();
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;

    @include breakpoint(small) {
        border: 0;

        .button {
            min-width: 50%;
            height: 100%;
            border-radius: 0;
        }
    }
}

.anchor {
    @include anchor();
}

.button {
    @include button();
    max-width: 200px;
}

.title {
    @include title();
    margin-top: 46px;
    margin-bottom: 20px;

    @include breakpoint(small) {
        margin-top: 46px;
    }
}

.subheader {
    @include subheader();
    margin-top: 46px;
    margin-bottom: 20px;

    @include breakpoint(small) {
        margin-top: 46px;
    }
}

.subtitle {
    @include subtitle();
    margin-bottom: 24px;
    margin-top: -16px;//never use negative margins this is just for demo
}

.input-container {
    @include input-container();
    @include column(6);
    margin-bottom: 24px;
}

.input {
    @include input();
    @include height-modifiers();
    display: block;
}

.input-button {
    @include input-button();
    display: inline-flex;
}

.button--secondary {
    margin-bottom: 46px;
}

.checkbox {
    @include checkbox();
}

.radio-button {
    @include radio-button();
}

.textarea {
    @include textarea();
    width: 100%;

    &-counter {
        margin-bottom: 46px;
    }
}

.modal {
    @include modal();

    &__wrapper {
        @include column(6);

        &--signup,
        &--login {
            @include column(4);
        }
    }
}

.alert {
    @include alert();
    margin-top: 16px;
}

.steps-wrapper {
    @include flex();
    @include flex-wrap();
    @include space-between();
    @include limited-full-width();
    margin-bottom: 46px;

    &__title {
        @include headline();
        width: 100%;
        margin-bottom: 16px;
    }

    &__message {
        width: 100%;
        margin-bottom: 68px;

        p {
            @include subtitle();
            max-width: 490px;
            line-height: 21px;
        }
    }

    &__title,
    &__message {
        @include breakpoint(small) {
            padding: 0 14px;
        }
    }
}

.image-gallery {
    @include image-gallery();
    margin-bottom: 46px;
}

.dropdown {
    @include dropdown();
}

.mobile-number {
    @include mobile-number();
    margin-bottom: 64px;
}

::selection {
    background-color: color('text', 'highlight');
    color: color('primary');
}

.input-price {
    @include input-price();
    @include column(5);
    margin-bottom: 64px;
    margin-left: 0;
    margin-right: auto;

    @include breakpoint(small) {
        margin-bottom: 64px;
    }
}

.pill {
    @include pill();
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 46px;
}

.toggle {
    @include toggle();
    margin-right: 16px;
}

.information {
    @include message();
}

.signup {
    @include signup();
}

.login {
    @include login();
}

.tabs {
    @include tabs();
    position: fixed;
    top: 65px;
    left: 0;
}

.nav-tabs {
    @include nav-tabs();
}

.banner {
    @include banner();
}

.tooltip {
    @include tooltip();
    position: relative;

    &__content {
        width: 200px;
    }
}

.tooltip-container {
    height: 200px;
}

.multi-selector {
    @include multi-selector();
}

.select {
  @include select();
}