/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2021 Adobe
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.root {
}

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

.body {
    composes: body from './flow.css';
    min-height: 21rem;
}

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

.button {
    text-transform: capitalize;
}

.textInput {
    background: white;
    border: 1px solid rgb(var(--venia-text-alt));
    border-radius: 2px;
    color: rgb(var(--venia-text));
    display: inline-flex;
    flex: 0 0 100%;
    font-size: 0.9375rem;
    height: 2.25rem;
    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
    width: 100%;
}

.textInput:focus {
    border-color: rgb(var(--venia-text));
    outline: 0 none;
}

/* Fields. */

.city,
.postcode,
.region_code {
    grid-column-end: span 1;
}

.address_check,
.address_select,
.email,
.braintree,
.save_in_address_book,
.street0 {
    grid-column-end: span 2;
}

.validation {
    color: rgb(var(--venia-error));
    font-size: 0.8125rem;
    grid-column-end: span 2;
}

/* 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 minicart heading.
 *
 * Here we unset the z-index on the braintree internal element to cause it
 * to scroll behind the minicart heading, as intended.
 */
[data-braintree-id='upper-container'] {
    z-index: unset;
}

:global .braintree-placeholder {
    display: none;
}
