/* Lines */

.line-link {
    display: block;
}

.line-link .line-name-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.line-link .description-row {
    width: 100%;
}

.line-link .line-name {
    background-color: red;
    color: white;
    margin: 0 6px 0 0;
    padding: 1px 9px;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: bold;
}

.line-link .description {
    display: block;
    font-size: 1rem;
    margin: 0 8px 0 0;
}

.line-link .agency-name {
    font-size: 0.8rem;
    margin: 2px 0 0 0;
}

/* Stop Link */

.stop-link {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.stop-link .stop-glyph {
    display: block;
    background: linear-gradient(to bottom, #f96298, #db1639);
    font-size: 0.9rem;
    font-weight: bold;
    width: 32px;
    height: 32px;
    flex: 0 0 32px; /* Do not grow, do not shrink, fixed basis */
    line-height: 30px;
    border-radius: 16px;
    text-align: center;
    margin-right: 12px;
    color: white;
    border: solid 2px white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.stop-link .tram-stop-glyph {
    background: linear-gradient(to bottom, #f3ad5e, #ea7635);
}

.stop-link .station-glyph {
    background: linear-gradient(to bottom, #8ca4ef, #5a6abf);
}

.stop-link .ferry-terminal-glyph {
    background: linear-gradient(to bottom, #70a9f7, #3565db);
}

.stop-link .stop-glyph-image {
    display: block;
    width: 20px;
    height: 20px;
    margin: 4px 0 0 4px;
    background-size: 20px 20px;
}

.stop-link .stop-glyph .tram {
    background-image: url("/images/live-bus-times/tram-icon-white-20px.png");
}

.stop-link .stop-glyph .train {
    background-image: url("/images/live-bus-times/train-icon-white-20px.png");
}

.stop-link .stop-glyph .ferry {
    background-image: url("/images/live-bus-times/ferry-icon-white-20px.png");
}

.stop-link .stop-details-container {
    width: 100%;
}

.stop-link .name-row {
    display: flex;
    justify-content: space-between;
}

.stop-link .name {
    display: block;
    font-size: 1rem;
    margin: 0;
}

.stop-link .subtitle {
    font-size: 0.8rem;
}

.stop-link .line-name {
    background-color: red;
    color: white;
    margin: 0 1px 0 0;
    padding: 1px 6px;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: bold;
}

/* Real-time indicators */

.radio-waves-real-time {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("/images/live-bus-times/radiowaves-live.png");
    background-size: 14px 14px;
}

.radio-waves-cancelled {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("/images/live-bus-times/radiowaves-cancelled.png");
    background-size: 14px 14px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .stop-link .stop-glyph .tram {
        background-image: url("/images/live-bus-times/tram-icon-white-20px@2x.png");
    }

    .stop-link .stop-glyph .train {
        background-image: url("/images/live-bus-times/train-icon-white-20px@2x.png");
    }

    .stop-link .stop-glyph .ferry {
        background-image: url("/images/live-bus-times/ferry-icon-white-20px@2x.png");
    }

    .radio-waves-real-time {
        background-image: url("/images/live-bus-times/radiowaves-live@2x.png");
    }

    .radio-waves-cancelled {
        background-image: url("/images/live-bus-times/radiowaves-cancelled@2x.png");
    }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
    .stop-link .stop-glyph .tram {
        background-image: url("/images/live-bus-times/tram-icon-white-20px@3x.png");
    }

    .stop-link .stop-glyph .train {
        background-image: url("/images/live-bus-times/train-icon-white-20px@3x.png");
    }

    .stop-link .stop-glyph .ferry {
        background-image: url("/images/live-bus-times/ferry-icon-white-20px@3x.png");
    }

    .radio-waves-real-time {
        background-image: url("/images/live-bus-times/radiowaves-live@3x.png");
    }

    .radio-waves-cancelled {
        background-image: url("/images/live-bus-times/radiowaves-cancelled@3x.png");
    }
}

@media (prefers-color-scheme: dark) {
    .stop-link .stop-glyph {
        background: linear-gradient(to bottom, #f89598, #b74353);
        color: black;
        border: solid 2px #262e3d;
    }

    .stop-link .tram-stop-glyph {
        background: linear-gradient(to bottom, #e1a770, #b05b35);
    }

    .stop-link .station-glyph {
        background: linear-gradient(to bottom, #99a2e9, #5c61a8);
    }

    .stop-link .ferry-terminal-glyph {
        background: linear-gradient(to bottom, #78adf6, #3661bc);
    }

    .stop-link .stop-glyph .tram {
        background-image: url("/images/live-bus-times/tram-icon-black-20px.png");
    }

    .stop-link .stop-glyph .train {
        background-image: url("/images/live-bus-times/train-icon-black-20px.png");
    }

    .stop-link .stop-glyph .ferry {
        background-image: url("/images/live-bus-times/ferry-icon-black-20px.png");
    }

    .radio-waves-real-time {
        background-image: url("/images/live-bus-times/radiowaves-live-dark.png");
    }

    .radio-waves-cancelled {
        background-image: url("/images/live-bus-times/radiowaves-cancelled-dark.png");
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .stop-link .stop-glyph .tram {
            background-image: url("/images/live-bus-times/tram-icon-black-20px@2x.png");
        }

        .stop-link .stop-glyph .train {
            background-image: url("/images/live-bus-times/train-icon-black-20px@2x.png");
        }

        .stop-link .stop-glyph .ferry {
            background-image: url("/images/live-bus-times/ferry-icon-black-20px@2x.png");
        }

        .radio-waves-real-time {
            background-image: url("/images/live-bus-times/radiowaves-live-dark@2x.png");
        }

        .radio-waves-cancelled {
            background-image: url("/images/live-bus-times/radiowaves-cancelled-dark@2x.png");
        }
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
        .stop-link .stop-glyph .tram {
            background-image: url("/images/live-bus-times/tram-icon-black-20px@3x.png");
        }

        .stop-link .stop-glyph .train {
            background-image: url("/images/live-bus-times/train-icon-black-20px@3x.png");
        }

        .stop-link .stop-glyph .ferry {
            background-image: url("/images/live-bus-times/ferry-icon-black-20px@3x.png");
        }

        .radio-waves-real-time {
            background-image: url("/images/live-bus-times/radiowaves-live-dark@3x.png");
        }

        .radio-waves-cancelled {
            background-image: url("/images/live-bus-times/radiowaves-cancelled-dark@3x.png");
        }
    }
}