.field_wrapper[data-type='address'] {
    width: unset !important;
}
.traxxus_field[data-type='address'].--empty:before {
    content: "Not Entered";
    color: var(--theme-generic-3);
}
.traxxus_field[data-type='address'] {
    display: grid;
    grid-template-areas:
        "label    label    label"
        "address1 address1 address1"
        "address2 address2 address2"
        "address3 address3 address3"
        "country  country  country"
        "city     state    postal-code";
    grid-template-columns: repeat(3, min-content)
}
.traxxus_field[data-type='address'][data-view] {
    grid-template-areas:
        "label    label    label"
        "address1 address1 address1   "
        "address2 address2 address2   "
        "address3 address3 address3   "
        "city     state    postal-code"
        "country  country  country    ";

    gap: var(--std-unit-x1);
}
.traxxus_field[data-type='address'] > [data-segment*='address'] > .field_wrapper {
    width: 100% !important;
}
.traxxus_field[data-type='address'] > [data-segment*='address'] .traxxus_field {
    white-space: nowrap;
}
.traxxus_field[data-type='address'] > [data-segment='label'] {
    grid-area: label;
    font-weight: bold;
    font-style: italic;
}
.traxxus_field[data-type='address'] > [data-segment='address1'] {
    grid-area: address1;
}
.traxxus_field[data-type='address'] > [data-segment='address2'] {
    grid-area: address2;
}
.traxxus_field[data-type='address'] > [data-segment='address3'] {
    grid-area: address3;
}
.traxxus_field[data-type='address'] > [data-segment='city'] {
    grid-area: city;
}
.traxxus_field[data-type='address'] > [data-segment='city'] .traxxus_field:not(:empty):after {
    content: ",";
}

.traxxus_field[data-type='address'] > [data-segment='state'] {
    grid-area: state;
}
.traxxus_field[data-type='address'] > [data-segment='postal-code'] {
    grid-area: postal-code;
}
.traxxus_field[data-type='address'] > [data-segment='country'] {
    grid-area: country;
}