/* ---------------------------------------- */
/* -------- START Attendance Zones -------- */
/* ---------------------------------------- */

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.attendance-zones-section {
    width: 100%;
    padding-top: 35px;
    padding-bottom: 35px;
    --border-radius: 5px;
    --input-height: 50px;
}

.attendance-zones-input-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 15px;
}

.attendance-zones-input-left {
    width: 100%;
    flex: 1;
    position: relative;
    --element-height: 30px;

    .dom-autocomplete {
        position: absolute;
        background-color: #fff;
        height: calc(10 * var(--element-height));
        width: 100%;
        top: 100%;
        left: 0;
        padding-left: 0;
        list-style-type: none;
        border-radius: var(--border-radius);
        overflow: hidden;
        z-index: 9;
        box-shadow: 0 0 2px 0 #00000042;



        .autocomplete-item {
            &:hover {
                background-color: var(--primary-color);
                color: var(--primary-color-contrast);
            }

            cursor: pointer;
            font-size: 14px;
            padding: 7px 15px;
            height: var(--element-height);
        }

        &:not(:has(.autocomplete-item:hover)) {
            .autocomplete-item.active {
                background-color: var(--primary-color);
                color: var(--primary-color-contrast);
            }
        }
    }
}

.attendance-zones-input {
    min-height: var(--input-height);
    padding: 5px 15px;
    border: 1px solid #ccc;
    background-color: #f6f5f5;
    border-radius: var(--border-radius);
    font-size: 18px;
    width: 100%;
}

.attendance-zones-submit {
    min-height: var(--input-height);
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    color: var(--primary-color-contrast);
    padding-left: 15px;
    padding-right: 15px;
}

.feedback-text {
    margin-top: 1em;
}


#dom-results {
    .result-item {
        margin-top: 1em;

        .result-item-url {
            display: flex;
            border-radius: 4px;
            overflow: hidden;
            text-decoration: none;
            color: #fff;
            border: 1px solid var(--item-color-theme);
        }

        .result-item-left {
            color: inherit;
            text-align: center;
            padding: .5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: var(--item-color-theme);
            flex-shrink: 0;
            min-width: 80px;

            .grades-label {
                color: inherit;
            }

            .grades-value {
                color: inherit;
            }
        }

        .result-item-right {
            width: 100%;

            padding: .5rem;
            margin-left: 1rem;
            margin: auto 0;
            transition: background-color .25s linear;
        }

        .grades-value {
            font-size: 20px;
            color: var(--item-color-theme);
        }

        .school-name {
            font-size: 30px;
            color: var(--item-color-theme);
            transition: color .25s linear;
        }

        .school-address {
            transition: color .25s linear;
        }

        .result-item-url {
            &:hover {
                .result-item-right {
                    background-color: var(--item-color-theme);

                    .school-name {
                        color: #fff;
                    }

                    .school-address {
                        color: #fff;
                    }
                }
            }
        }
    }

    .no-results,
    .too-short {
        margin-top: 1em;
    }


    &:has(.no-results),
    &:has(.too-short) {
        .feedback-text {
            display: none;
        }
    }
}

/* ---------------------------------------- */
/* --------- END Attendance Zones --------- */
/* ---------------------------------------- */