.journeys-page .main-label-on-time {
  font-size: large;
}

.main-label-late {
  text-decoration: line-through;
  font-size: small;
  opacity: 0.5;
}

.alt-label-on-time {
  font-size: small;
}

.journeys-page .alt-label-late {
  font-size: large;
}

.journeys-page .main-label-on-time {
  font-weight: bold;
}

.journeys-page .alt-label-late {
  font-weight: bold;
}

.intermediate-location-item .main-label-on-time {
  font-size: small;
}

.intermediate-location-item .main-label-late {
  font-size: small;
}

.intermediate-location-item .alt-label-on-time {
  font-size: small;
}

.intermediate-location-item .alt-label-late {
  font-size: small;
}

TransferItem:focus image,
IntermediateLocationItem:focus image,
AnnouncementItem:focus image {
  color: var(--accent-color);
}

AnnouncementItem:focus {
  opacity: 1;
}

.overlay-spinner {
  border-radius: 50%;
  padding: 6px;
}

.journeys-page header { padding: 0; }

/* Fixes buttons inside cards having a bigger border radius compared to the card, which leads to the highlight spanning outside of the box. */
.button-card > button {
  border-radius: 12px;
  padding: 0px;
}

/* Fixes padding of toggle-button inside menu button at the provider popover being too big and resizing the header bar */
.window-menu-button-provider > button {
  padding: 0px 5px 0px 3px;
}

.list-button {
  border-radius: 12px;
}

.small-pill {
  padding: 3px 12px;
  border-radius: 9999px;
}

.route-segment-station-start-end {
  font-weight: bold;
}

/* Don't have a pressed-in look for bookmark icons as they already have a "filled" icon */
.bookmark-button:checked {
  background-color: transparent;
}

.bookmark-button:checked:hover {
  background-color: color-mix(in srgb, currentColor 7%, transparent);
}

/* Highlighting selected item in popovers */
/* Similar to https://gitlab.gnome.org/GNOME/epiphany/-/blob/b6203597637b4b7725372750983f6e38ca92c2ac/src/resources/style.css#L137-155 */
popover listview.navigation-sidebar > header {
  padding: 0px 6px;
}
popover listview.navigation-sidebar > :not(:last-child) {
  margin-bottom: 2px;
}
popover listview.navigation-sidebar > row:hover {
  background-color: color-mix(in srgb, currentColor 4%, transparent);
}
popover listview.navigation-sidebar > row:active {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}
popover listview.navigation-sidebar > row:selected {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}
popover listview.navigation-sidebar > row:selected:hover {
  background-color: color-mix(in srgb, currentColor 13%, transparent);
}
popover listview.navigation-sidebar > row:selected:active {
  background-color: color-mix(in srgb, currentColor 19%, transparent);
}

.provider-region {
  padding: 12px 12px 6px;
}

/* Mostly copied from Elastic https://gitlab.gnome.org/World/elastic/-/blob/476c2a1dc7aac30fa25ec105a9e9fa5b3d069d52/src/style.css#L17 */
.toggle-group {
  border-radius: 9px;
  padding: 3px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.toggle-group .toggle {
  padding: 2px 15px;
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: outline-color, outline-width, outline-offset, background, box-shadow;
  min-width: 100px;
}

.toggle-group .toggle:checked {
  border-radius: 6px;
  padding: 2px 15px;
  background: rgb(from var(--card-bg-color) r g b / calc(alpha * 2));
  color: var(--card-fg-color);
  box-shadow: 0 1px 3px 1px #00000011,
              0 2px 6px 2px #00000008;
}

.toggle-group separator {
  opacity: 0;
  margin: 3px 1px;
}
