/* TODO: Remove all uses of `em`s for `font-size`. */

:root {
    height: 100%;
    font-family: "Segoe UI", sans-serif;
    text-wrap: nowrap;
}

body {
    --line-color: #939393;;

    display: flex;
    gap: 1px;
    margin: 0;
    height: 100%;
    background-color: var(--line-color);

    & > .content {
        --max-width: 40rem;
        /*
        --color: black;
        --color: #0d2828;
        */
        --color: #2d2d2d;

        display: flex;
        flex-direction: column;
        gap: 1px;
        flex: var(--max-width);
        max-width: var(--max-width);
        height: 100%;
        /* background-color: var(--line-color); */
        background-color: #b3b3b3;
        background-color: #cacaca;
        background-color: #c4c4c4;

        & > header {
            display: flex;
            justify-content: space-between;
            background-color: #f1f1f1;
            background-color: #f5f5f5;

            & > .title {
                flex: 1;
                display: flex;
                gap: .75rem;
                align-items: center;
                padding: 1rem;
                font-size: calc(1rem + 3px);

                & > svg {
                    width: calc(1em + 7px);
                    height: calc(1em + 7px);
                }

                & > h1 {
                    margin: 0;
                    font-size: 1em;
                    font-weight: 600;
                    color: var(--color);
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            & > .timestamp {
                display: flex;
                gap: .5rem;
                align-items: baseline;
                padding-inline: 1rem;
                padding-block: .75rem;

                & > #date {
                    font-size: calc(1rem - 1px);
                    font-weight: 600;
                    color: rgb(163, 163, 163);
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                & > .clock {
                    align-content: center;
                    font-size: calc(1rem + 7px);
                    font-weight: 600;
                    color: #333461;
                    color: #4e4e4e;

                    & > #clock-hour {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    & > .separator {
                        animation: 1s steps(2, jump-none) infinite alternate blink;
                    }

                    & > #clock-minute {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

        }
    }

    & > .whitespace {
        flex: 1;
        background-color: white;
    }
}

main {
    --background-color: #f9f9f9;
    --line-color: #dcdcdc;

    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    background-color: var(--line-color);
    overflow-y: hidden;

    & > header > nav > ol {
        display: flex;
        align-items: baseline;
        margin: 0;
        padding: .75rem;
        /*
            TODO: It would be more correct to put the
            background to the `nav`.
        */
        background-color: var(--background-color);

        & > li {
            font-size: 1rem;
            font-weight: 600;
            list-style: none;
        }

        & > .parent {
            color: #737373;
            color: rgb(163, 163, 163);

            & > a {
                color: #737373;
                text-decoration-line: none;
                overflow: hidden;
                text-overflow: ellipsis;

                &:hover {
                    color: #005b5e;
                    text-decoration-line: underline;
                }
            }

            &::after {
                margin-inline: .5rem;
                content: "/";
            }
        }

        & > .stop {
            color: var(--color);
            color: #737373;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    & > div {
        --background-color: #fdfdfd;

        display: flex;
        flex-direction: column;
        /* gap: 1px; */
        flex: 1;
        margin: 0;
        padding-inline-start: 0;
        background-color: var(--background-color);
        overflow-y: hidden;


        & > .summary {
            display: flex;
            gap: .75rem;
            align-items: flex-start;
            padding: 1rem;
            padding-block-end: .75rem;

            & > .icon {
                width: calc(1rem + 41px);
                height: calc(1rem + 41px);
                color: var(--color);
            }

            & > .information {
                display: flex;
                flex-direction: column;
                gap: .25rem;

                & > .name {
                    font-size: calc(1rem + 5px);
                    font-weight: 600;
                    color: var(--color);
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                & > .zone {
                    display: flex;
                    gap: .25em;
                    align-items: center;
                    color: #737373;

                    & > .icon {
                        width: 1em;
                        height: 1em;
                    }

                    & > .name {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }


        & > .services {
            display: flex;
            flex-direction: column;
            gap: 1px;
            flex: 1;
            background-color: #c2c2c2;
            background-color: var(--line-color);
            background-color: #d3d3d3;
            background-color: #d6d6d6;
            overflow-y: hidden;

            & > .key {
                padding: 1rem;
                padding-block-start: .25rem;
                padding-block-end: .75rem;
                font-size: calc(1rem + 2px);
                font-weight: 600;
                color: var(--color);
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: white;
                background-color: var(--background-color);
            }

            & > #services-value.loading {
                flex: 1;
                text-align: center;
                align-content: center;
                font-weight: 600;
                color: #005b5e;
                background-color: #fbfbfb;
                background-color: white;
            }

            & > ol#services-value {
                display: flex;
                flex-direction: column;
                /*gap: 1px;*/
                flex: 1;
                margin: 0;
                padding-inline-start: 0;
                background-color: white;
                overflow-y: auto;
                overflow-y: hidden;

                & > li {
                    display: flex;
                    gap: 1rem;
                    border-bottom: 1px solid #e7e7e7;
                    padding: 1rem;
                    list-style: none;
                    justify-content: space-between;
                    /* align-items: flex-start; */
                    background-color: white;


                    & > .information {
                        display: flex;
                        flex-direction: column;
                        gap: .5rem;
                        align-items: flex-start;

                        & > .line {
                            display: flex;
                            gap: .5rem;
                            align-items: flex-start;
                            font-weight: 600;

                            & > .number {
                                border-radius: 0.15em;
                                padding: .5em;
                                font-size: calc(1rem + 7px);
                                font-size: calc(1rem + 9px);
                                color: white;
                                overflow: hidden;
                                text-overflow: ellipsis;

                                &.first-group {
                                    /* TODO: Use hex format for the color. */
                                    background-color: rgb(218, 89, 192);
                                }

                                &.second-group {
                                    background-color: rgb(218, 113, 89);
                                }

                                &.third-group {
                                    background-color: rgb(233, 66, 66);
                                }

                                &.fourth-group {
                                    background-color: rgb(191, 137, 78);
                                }
                            }

                            & > .itinerary {
                                display: flex;
                                flex-direction: column;
                                gap: .15rem;
                                align-items: flex-start;

                                & > .origin {
                                    display: flex;
                                    gap: .25rem;
                                    align-items: baseline;
                                    font-size: calc(1rem - 3px);

                                    & > .name {
                                        color: #737373;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }

                                    & > .departure {
                                        color: #737373;
                                        color: rgb(163, 163, 163);
                                        overflow: hidden;
                                        text-overflow: ellipsis;

                                        &::before {
                                            margin-inline-end: .25rem;
                                            content: "·";
                                        }
                                    }
                                }

                                & > .icon {
                                    font-size: calc(1rem - 1px);
                                    width: 1em;
                                    height: 1em;
                                    transform: rotate(270deg);
                                }

                                & > .destination {
                                    display: flex;
                                    gap: .25rem;
                                    align-items: baseline;

                                    & > .name {
                                        font-size: calc(1rem + 5px);
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        color: var(--color);

                                        /* TODO: Find a better way to make
                                           this shrink.
                                        */
                                        max-width: 20rem;
                                    }

                                    & > .departure {
                                        font-size: calc(1rem - 3px);
                                        color: #737373;
                                        color: rgb(163, 163, 163);
                                        overflow: hidden;
                                        text-overflow: ellipsis;

                                        &::before {
                                            margin-inline-end: .25rem;
                                            content: "·";
                                        }
                                    }
                                }
                            }
                        }

                        & > .vehicle {
                            display: flex;
                            align-items: center;
                            border-radius: .15em;
                            border: 1px solid #bcbcbc;
                            font-size: calc(1rem - 2px);
                            font-size: calc(1rem - 1px);
                            background-color: white;

                            & > .icon {
                                margin-inline: .2rem;
                                width: 1.30em;
                                height: 1.30em;
                            }

                            & > .number {
                                align-content: center;
                                padding: .325em;
                                color: var(--color);
                                background: #e4ebf4;
                            }
                        }
                    }

                    & > .status {
                        display: flex;
                        flex-direction: column;
                        gap: .25rem;
                        align-items: flex-end;
                        font-weight: 600;

                        & > .variant {
                            display: flex;
                            gap: .25rem;
                            align-items: center;
                            font-size: calc(1rem - 1px);

                            & > .icon {
                                animation: 1.25s steps(2, jump-none) infinite alternate blink;
                                width: .8rem;
                                height: .8rem;
                                margin-block-start: .1rem;
                            }
                        }

                        & > .departure {
                            display: flex;
                            gap: .15rem;
                            align-items: baseline;

                            & > .theoretical {
                                font-size: calc(1rem - 1px);
                                font-size: 1rem;
                                text-decoration: line-through;
                                color: #737373;
                                color: rgb(163, 163, 163);
                            }

                            & > .icon {
                                font-size: calc(1rem - 3px);
                                width: 1em;
                                height: 1em;
                                transform: rotate(180deg);
                            }

                            & > .predicted {
                                /* font-size: calc(1rem + 13px); */
                                font-size: calc(1rem + 15px);
                            }
                        }

                        & > .duration {
                            display: flex;
                            gap: .15rem;
                            align-items: center;
                            font-size: calc(1rem - 1px);
                            font-size: 1rem;

                            & > .icon {
                                padding-block-start: .1rem;
                                height: 1em;
                                width: 1em;
                            }

                            & > .value {
                            }
                        }



                        &.on-time {
                            color: #039903;
                        }

                        &.slightly-delayed {
                            color: #c4a600;
                        }

                        &.delayed {
                            color: #ac2929;
                        }
                    }

                    &.due {
                        animation: 1s linear infinite alternate fade;
                    }
                }
            }

            & > #services-value.empty {
                flex: 1;
                padding-block-start: 3rem;
                font-size: calc(1rem + 1px);
                text-align: center;
                /* align-content: center; */
                /* font-weight: 600; */
                color: #737373;
                color: rgb(163, 163, 163);
                color: var(--color);
                background-color: white;
            }
        }
    }
}



@keyframes blink {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade {
    from {
        background-color: white;
    }

    to {
        background-color: #deffd8;
    }
}