/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_cmsform/Components/FormElement/OpenGemeentenCmsForm-FormElement.css
 * - opengemeenten_cmsform/Components/FormGroup/OpenGemeentenCmsForm-FormNavigation.css
 * - opengemeenten_linkhandling/Partials/Button/OpenGemeentenLinkHandling-Button.css
 *
 * Variables can be set there globally or override them here!
 */

.sewer-maps {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.sewer-maps__intro-item {
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-weight: var(--root-font-weight--normal);
    --font-style: normal;
    --line-height: inherit;
}

.sewer-maps__intro-item:before {
    --color-background: var(--root-color--primary);
    --color: var(--root-color--white);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-weight: var(--root-font-weight--normal);
    --font-style: normal;
    --line-height: inherit;
}

.sewer-maps__remark {
    --color-background: var(--root-color-background--grey);
    --border-width: 0.125rem 0 0 0;
    --color-border: var(--root-color--primary);
}

.sewer-maps__remark__icon {
    --color-background: var(--root-color--primary);
    --color: var(--root-color--white);
}

.sewer-maps__remark__text {
    --color: var(--root-color-text);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-weight: var(--root-font-weight--normal);
    --font-style: normal;
    --line-height: inherit;
}

#sewer-maps__q__result-list {
    --color-background: var(--root-color--white);
    --color-border: var(--root-color-border);
}

.sewer-maps__q__result-list__item {
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-weight: var(--root-font-weight--normal);
    --font-style: normal;
    --color-background: var(--root-color--white);
    --color: var(--root-color-text);
    --color-border: var(--root-color-border);
}

.sewer-maps__q__result-list__item:hover,
.sewer-maps__q__result-list__item[aria-selected="true"] {
    --color-background: var(--root-color-background--grey);
}

.sewer-maps__change-button {
    --height: 2.375em;
}

.sewer-maps__card-title {
    --color: var(--root-heading-4-color);
    --font-family: var(--root-heading-4-family);
    --font-size: var(--root-heading-4-size);
    --font-style: var(--root-heading-4-style);
    --font-weight: var(--root-heading-4-weight);
    --line-height: var(--root-heading-4-line-height);
}

.sewer-maps__card-description {
    --color: var(--root-color-text);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-weight: var(--root-font-weight--normal);
    --font-style: normal;
    --line-height: inherit;
}

.sewer-maps .card__footer {
    --color-border: var(--root-color-border);
    --width-border: var(--root-border-width);
}

.sewer-maps__link {
    --color: var(--root-color-text-link);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-weight: var(--root-font-weight--normal);
    --font-style: normal;
    --line-height: inherit;
    --text-underline-offset: var(--root-text-underline-offset);
    --text-decoration-thickness: var(--root-text-decoration-thickness);
    --text-decoration-color: inherit;
}

.sewer-maps__link:active,
.sewer-maps__link:focus,
.sewer-maps__link:hover {
    --color: var(--root-color-text-link--hover);
    --text-decoration-thickness: var(--root-text-decoration-thickness--hover);
}

.sewer-maps__intro {
    counter-reset: intro-bullet-list;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.sewer-maps__intro-item {
    align-items: baseline;
    position: relative;
    display: flex;
    gap: 1rem;
}

.sewer-maps__intro-item:not(:first-child) {
    margin-top: 1rem;
}

.sewer-maps__intro-item:before {
    border-radius: 50%;
    content: counter(intro-bullet-list);
    counter-increment: intro-bullet-list;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5em;
    width: 2.5em;
    flex-shrink: 0;
}

.sewer-maps__remark {
    border-style: solid;
    display: flex;
    align-items: stretch;
    margin-top: 2rem;
    min-height: 3em;
    gap: 1em;
}

.sewer-maps__remark__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    flex-shrink: 0;
}

.sewer-maps__remark__icon svg {
    fill: currentColor;
    width: 2em;
}

.sewer-maps__remark__text {
    margin: 0;
    display: flex;
    align-items: center;
    padding-right: 1rem;
}

.sewer-maps__form {
    margin-top: 2rem;
}

.sewer-maps__form-row {
    align-items: end;
}

.sewer-maps__input {
    position: relative;
    z-index: 1;
}

#sewer-maps__q__result-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    margin: 0;
    list-style: none;
    padding: 0;
    border-width: 0 0.125rem 0.125rem;
    border-style: solid;
}

.sewer-maps__q__result-list__item {
    padding: 0.5rem 5.5rem 0.5rem 0.5rem;
    border-bottom-width: 0.125rem;
    border-bottom-style: solid;
    cursor: pointer;
}

.sewer-maps__q__result-list__item:last-child {
    border-bottom-width: 0;
}

.sewer-maps__change-button {
    height: 2.375em;
}

.sewer-maps__change-button .button__body .icon {
    height: 50%;
}

.form-navigation .btn-group.next:not(.submit) .btn.sewer-maps__submit {
    padding-right: 1em;
}

.sewer-maps__result {
    margin-top: 3rem;
}

.sewer-maps .card__footer {
    border-top-style: solid;
    justify-content: unset;
}

.sewer-maps .cards[data-maximum-columns="2"] .card__footer {
    padding: 0;
}

.sewer-maps__link {
    flex: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

.sewer-maps__link:not(:first-child) {
    border-left-style: solid;
}


.sewer-maps {
    font-size: var(--font-size, 1rem);
}

.sewer-maps__intro-item {
    font-family: var(--font-family, sans-serif);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

.sewer-maps__intro-item:before {
    background-color: var(--color-background, black);
    color: var(--color, white);
    font-family: var(--font-family, sans-serif);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

.sewer-maps__remark {
    background-color: var(--color-background, lightgrey);
    border-width: var(--border-width, 0.125rem 0 0 0);
    border-color: var(--color-border, black);
}

.sewer-maps__remark__icon {
    background-color: var(--color-background, grey);
    color: var(--color, black);
}

.sewer-maps__remark__text {
    color: var(--color, black);
    font-family: var(--font-family, sans-serif);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

#sewer-maps__q__result-list {
    background-color: var(--color-background, white);
    border-color: var(--color-border, grey);
}

.sewer-maps__q__result-list__item {
    font-family: var(--font-family, sans-serif);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    background-color: var(--color-background, white);
    color: var(--color-text, black);
    border-color: var(--color-border, grey);
}

.sewer-maps__card-title {
    color: var(--color, black);
    font-family: var(--font-family, sans-serif);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    line-height: var(--line-height, inherit);
}

.sewer-maps__card-description {
    color: var(--color, black);
    font-family: var(--font-family, sans-serif);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

.sewer-maps .card__footer {
    border-color: var(--color-border, hsla(0, 0%, 0%, 0.2));
    border-top-width: var(--width-border, 0.063rem);
}

.sewer-maps__link {
    color: var(--color, black);
    font-family: var(--font-family, sans-serif);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
    text-underline-offset: var(--text-underline-offset, 0.1875rem);
    text-decoration-color: var(--text-decoration-color, inherit);
    text-decoration-thickness: var(--text-decoration-thickness, 0.125rem);
}

.sewer-maps__link:not(:first-child) {
    border-color: inherit;
    border-left-width: var(--width-border, 0.063rem)
}