@import '../_base';

.recurring-orders {
    @include desktop {
        .side-nav {
            float: left;
            width: 150px;
        }
    }

    #main-content {
        @include desktop {
            min-height: 470px;
        }
    }

    .content {
        float: right;
        margin: 0 auto $gutter-large auto;
        width: 100%;
        border-top: 3px solid $primary-color;
        background: $module-background;

        @include desktop {
            max-width: 780px;
        }

        @media (min-width: $site-width-medium) {
            max-width: 1018px;
        }
    }

    .heading {
        border-bottom: 1px solid $border-color;
        color: $primary-color;
        background-color: $module-background;
        padding: 0 0 0 15px;
        h3 {
            margin: 0;
            padding: 0;
            color: $primary-color;
            font-size: 18px;
            line-height: 44px;
            font-weight: bold;
        }
    }

    .inner-content {
        padding: 0 $gutter;

        @include tablet {
            padding: 0 15px;
        }
    }

    form {
        margin-right: -$gutter-large;
    }

    .input-field {
        width: calc(100% - #{$gutter-large});
        @include tablet {
            width: calc((100% - #{$gutter-xxl})/4);
            &.address {
                width: calc(75% - #{$gutter-large});
            }
            &.tip {
                width: calc((((100% - #{$gutter-xxl}) / 4) * 2) + #{$gutter-large});
            }
        }
        &.datepicker {
            height: 70px;
            input {
                position: absolute;
                background-color: transparent;
            }
        }
        &.tip {
            margin-right: -#{$gutter-small};
            input,
            button {
                width: calc(20% - #{$gutter-small});
            }
            input {
                text-align: center;
                padding: 0;
            }
            button {
                margin-left: 2px;
                height: 40px;
                padding: 0;
                line-height: 40px;
                border: none;
                font-weight: bold;
                color: #fff;
                background: $disabled-color;
                &.active {
                    background: $primary-color-lighter;
                }
            }
        }
        margin-right: $gutter-large;
        display: block;
        float: left;
        margin-top: $gutter;
        position: relative;
        label {
            display: block;
            font-size: 13px;
            color: $gray-legal-text;
            line-height: 30px;
            @include tablet {
                min-height: 30px;
            }
            width: 100%;
        }
        select,
        input {
            width: 100%;
        }
        [class^='icon-'] {
            color: $primary-text-color;
            position: absolute;
            right: $gutter;
            bottom: $gutter;
            font-size: 20px;
        }
    }

    textarea {
        width: calc(100% - #{$gutter-large});
        margin: $gutter-large 0;
    }

    .create-container {
        display: block;
        width: calc(100% - 20px);
        button {
            width: 100%;
            padding: 9px;
            //@extend .button.secondary; //todo put the classes on the stupid button
        }
        @include tablet {
            display: inline-block;
            width: auto;
            button {
                width: auto;
                padding: 9px $gutter-extra-large;
            }
        }
    }

    .cancel {
        vertical-align: top;
        text-align: center;
        display: block;
        width: calc(100% - 20px);
        padding-bottom: 20px;
        @include tablet {
            display: inline;
            text-align: left;
            line-height: 42px;
            padding: 0 0 $gutter-large $gutter-extra-large;
        }
    }

    .pause-cancel-copy {
        display: block;
        margin: $gutter 0;
        font-size: 11px;
        color: $secondary-text-color;
        text-align: center;
    }

    .react-datepicker__input-container {
        width: 100%;
        height: 40px;
        border: 1px solid $border-color;
        flex: 1;
        input {
            width: 100%;
            border: none;
            background-image: none !important; // remove random icon associated with date picker
        }
    }
}

// fill form icon with the date picker
#__lpform_input_idx_5_icon {
    visibility: hidden;
}