@import '../../../../_common/scss/main';
$input-width-tablet: 420px;
$input-width-small-tablet: 300px;
$input-width-credit: 120px; //ie and safari fixes

.SharedCredit {
    margin-top: $gutter;
    display: flex;
    flex-direction: column;
    padding: $gutter 0 #{$gutter-large + $gutter} 0;
    border-bottom: 1px solid $border-color-light;

    &:not(:nth-child(2)) {
        margin-top: $gutter-large;
        padding-top: $gutter;

        @include tablet-small-up {
            border-top: none;
            margin-top: $gutter;
            padding-top: 0;
        }
    }

    &__Autocomplete,
    &__emailContainer {
        flex: 0 0 100%;
        margin-bottom: $gutter;

        @include tablet-small-up {
            flex: 0 0 $input-width-small-tablet;
            margin-bottom: 0;
        }

        @include tablet {
            flex: 0 0 $input-width-tablet;
            flex-grow: 1;
        }

        @include desktop {
            margin-right: $gutter;
        }
    }

    &__email,
    &__credit,
    &__Autocomplete {
        &__label {
            font-size: 13px; // hate this, but will refactor with new checkout
            margin-bottom: $gutter-small;
            display: block;
        }
    }

    &__Autocomplete {
        position: relative;

        &__input {
            border: 1px solid $border-color;
            height: 40px;
        }

        &__results.AutocompleteResults {
            width: 100%;
            top: 64px; // to override the 100% top on AutocompleteResults

            @include tablet-small-up {
                width: $input-width-small-tablet;
            }

            @include tablet {
                width: $input-width-tablet;
            }
        }

        &__error {
            font-size: $font-size-small;
        }

        &__error,
        &__label--error {
            color: $error-color;
        }
    }

    &__Form {
        display: flex;
        flex-direction: column;

        @include desktop {
            flex-direction: row;
            flex-wrap: wrap;
        }

        &__container {
            display: flex;
            align-self: flex-end;
        }
    }

    &__email {
        &__input {
            width: 100%;
        }
    }

    &__creditContainer {
        flex: 0 0 $input-width-credit;
        width: $input-width-credit;
    }

    &__credit {
        width: $input-width-credit;
        &__input {
            text-align: right;
            width: $input-width-credit;
        }
        &__label {
            text-align: right;
        }
    }

    &__icon {
        margin-top: 37px;
        margin-right: 8px;
        cursor: pointer;
        color: $gray-legal-text;
        width: $gutter-large;
        text-align: center;
        &--disabled {
            cursor: not-allowed;
        }
    }
}

input.AutocompleteInput__input.SharedCredit__Autocomplete__input--error {
    border-color: $error-color;
}