.root {
}

.heading {
    composes: heading from './flow.module.css';
}

.body {
    composes: body from './flow.module.css';

    @apply h-[30rem];
}

.footer {
    composes: footer from './flow.module.css';
}

.textInput {
    composes: bg-white from global;
    composes: border from global;
    composes: border-solid from global;
    composes: border-input from global;
    composes: flex-textInput from global;
    composes: h-[2.25rem] from global;
    composes: inline-flex from global;
    composes: rounded-sm from global;
    composes: text-colorDefault from global;
    composes: text-sm from global;
    composes: w-full from global;
    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */

    composes: focus_border-strong from global;
    composes: focus_outline-none from global;
}

/* Fields. */

.city,
.postcode,
.region_code {
    composes: col-end-span1 from global;
}

.address_check,
.email,
.braintree,
.street0 {
    composes: col-end-span2 from global;
}

.postcode {
    composes: mb-1.5 from global;
}

.braintree {
    min-height: 356px;
}

.validation {
    composes: col-end-span2 from global;
    composes: text-error from global;
    composes: text-sm from global;
}

/* Braintree-specific styles. */

/*
 * On error, the Braintree container increases in height
 * in order to show an error message.
 *
 * Unfortunately because of a z-index on an internal element (the one
 * selected below), it overlaps and displays above the legacy minicart heading.
 *
 * Here we unset the z-index on the braintree internal element to cause it
 * to scroll behind the legacy minicart heading, as intended.
 */
[data-braintree-id='upper-container'] {
    z-index: unset;
}

:global .braintree-placeholder {
    @apply hidden;
}