@layer views{
    #retailer-map{
        aspect-ratio:1;
        width:100%;

        @container (max-width: 1024px) {
            margin-bottom: calc(var(--spacer) * 2);
        }
    }

    body > main{
        background-color: rgb(var(--color-lt-gray));
    }

    main > header{
        background-color: rgb(var(--color-dk-blue));
        color: rgb(var(--color-white));
        padding-bottom: calc(var(--spacer) * 3);

        a{
            color: rgb(var(--color-white));
        }
    }

    .retailer-search{
        --column-gap: calc(var(--spacer) * 2);

        h2{
            margin-bottom: 0;
        }

        form{
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: calc(var(--spacer) * 2);

            @container (max-width: 1024px) {
                flex-direction: column;
                gap: var(--spacer);
            }

            > div {
                display: flex;
                gap: var(--spacer);
                align-items: center;

                @container (max-width: 1024px) {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 0;
                }
            }
        }

        header{
            margin-bottom: calc(var(--spacer) * 1.25);
        }

        .location-wrapper{
            flex: 1;
            max-width: 645px;
        }

        .retailers-autocomplete-container{
            flex: 1;
        }

        select{
            padding: var(--spacer) calc(var(--spacer) * 3) var(--spacer) var(--spacer);
            font-family: var(--font-family-content);
            font-size: 1em;
            background-color: rgb(var(--color-white));
            border: 1px solid rgba(var(--color-md-gray));
            font-weight: 500;
            width: 100%;
            max-width: 280px;
            background-image: url(/images/select-arrow.png);
			background-repeat: no-repeat;
			background-position: calc(100% - 20px) calc(50% + 2px);
            appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;

            @container (max-width: 1024px) {
                width: 100%;
                max-width: none;
            }
        }

        button{
            padding-block: 1em;
        }
    }

    .retailers-container{
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacer) * 1.25);

        header{
            display: flex;
            justify-content: space-between;
            align-items: center;

            > div{
                background-color: rgb(229, 231, 235);
                font-size: .875em;
                padding: calc(var(--spacer) * .5);
                line-height: 1;
                white-space: nowrap;
            }
        }

        address{
            margin-bottom: calc(var(--spacer) * 1.25);
        }

        h3{
            color: rgb(var(--color-blue));
            margin: 0;
        }
    }

    .retailer{
        background-color: rgb(var(--color-white));
        border: 1px solid rgb(var(--color-md-gray));
        padding: calc(var(--spacer) * 1.25);
    }

    .retailer-actions{
        display: flex;
        align-items: center;
        gap: calc(var(--spacer) * 1.25);
    }
}