/*
 Fonts and other imports
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

/*
 General styles
*/

#lets-go-timeline {
  border: 1px solid lightgray;
  font-family: "Lato", "Open Sans", sans-serif;
  min-height: calc(100vh - 4rem);
}

.has-title {
  text-decoration: underline dashed;
}

/* alternating column backgrounds */
 .vis-time-axis .vis-grid.vis-odd {
     background: #f5f5f5;
}

/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday, .vis-time-axis .vis-grid.vis-sunday {
   background: light-gray;
}

/* short event fadeouts when shown in point mode, and make a tag shape */
.vis-item.vis-point:not(.vis-selected) .vis-item-content {
  --mask: linear-gradient(to right, 
      rgba(0,0,0, 1) -5%,   rgba(0,0,0, 1) 60%,
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) -5%
  ) 100% 50% / 100% 100% repeat-x;
  
  /*border: 1px #d8d8d8 dashed;*/
  -webkit-mask: var(--mask); 
  mask: var(--mask);
  mask-mode: alpha;
  
  --tag-length: 1em;
  
  clip-path: polygon(
    calc(0% + var(--tag-length)) 0%, /*top left*/
    100% 0%, /*top right*/
    100% 100%, /*bottom right*/
    calc(0% + var(--tag-length)) 100%, /*bottom left*/
    0% 50.0%); /*tag point*/
}

/* fill entire non-background event item with content */
.vis-item:not(.vis-background) .vis-item-content.template-item {
  width: 100%;
}

/* bump point items content a bit further because of the tag shape */
.vis-item.vis-point .vis-item-content {
  padding-left: 16px;
}

/* raid: raid type backgrounds */

.vis-item .vis-item-content.raid {
  background-position-x: left 4px;
  background-position-y: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-image: none;
  background-size: auto 80%;
  background-origin: padding-box;
  background-clip: border-box;
  padding-left: 32px;
}

/* vis points need the raid icons moved a bit further */
.vis-point > .vis-item-content.raid {
  background-position-x: left 8px;
  padding-left: 36px;
}

.vis-item-content.raid.raid-5-star {
  background-image: url('./images/icons/raid.svg');
}

.vis-item-content.raid.raid-mega {
  background-image: url('./images/icons/mega.svg');
}

.vis-item-content.raid.raid-shadow {
  background-image: url('./images/icons/shadow.svg');
}

/* raid: boss image overflows */
.vis-item-visible-frame {
  text-align: right;
  height: 200%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}

.vis-item-visible-frame img {
  height: 64px;
}

/* timeline tooltips/popups */

#tooltip {
  /* required for floating-ui */
  position: absolute;
  width: max-content;
  top: 0;
  left: 0;

  /* other tooltip defaults */
  display: none;
  color: #eee;
  font-weight: bold;
  padding: 5px;
  border-radius: 4px;
  font-size: 90%;
}

#tooltip .arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px black;
}

#tooltip .content {
  position: relative;
}

#tooltip .more-details-link.leekduck a::before {
  content: '';
  background: url('./images/icons/leekduck.svg');
  color: #eee;
  height: 1.2em;
  width: 1.2em;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 3px;
  margin-right: 3px
}

#tooltip .more-details-link.leekduck a, #tooltip .more-details-link.leekduck a:visited {
  color: #eee;
}

.boss-detail {
  font-size: 140%;
}

.cp-prefix {
  font-size: 60%;
}

#tooltip .title {
  text-align: center;
}

/* individual timeline items */

.vis-item .vis-item-content {
  color: #eee;
  border-color: rgba(0, 0, 0, 0);
  background-clip:border-box;
  font-weight: bolder;
}

/* override season background colors with our own tint */
.vis-item.vis-background.season {
  background-color: hsl(from var(--color-season) h s l / 0.3);
}

/* variables for event types, colors are from LeekDuck */
:root {
  --dot-darken: -15;
  --color-default-event: #dfe6e9;
  --color-community-day: #1660a9;
  --color-raid-day: #e74c3c;
  --color-raid-battles: #c0392b;
  --color-elite-raids: #a21416;
  --color-event: #27ae60;
  --color-season: #38ada9;
  --color-raid-hour: #c0392b;
  --color-research: #1abc9c;
  --color-research-day: #159e83;
  --color-timed-research: #1abc9c;
  --color-limited-research: #159e83;
  --color-pokéstop-showcase: #3ca392;
  --color-pokestop-showcase: #3ca392;
  --color-live-event: #d63031;
  --color-pokémon-go-fest: #153d94;
  --color-pokemon-go-fest: #153d94;
  --color-pokémon-go-tour: #1d3a74;
  --color-pokemon-go-tour: #1d3a74;
  --color-research-breakthrough: #795548;
  --color-special-research: #13a185;
  --color-global-challenge: #0a64b5;
  --color-go-rocket-takeover: #1e1e1e;
  --color-team-go-rocket: #1e1e1e;
  --color-giovanni-special-research: #1e272e;
  --color-safari-zone: #3d7141;
  --color-city-safari: #3d7141;
  --color-ticketed-event: #de3e9b;
  --color-ticketed: #de3e9b;
  --color-go-battle-league: #8e44ad;
  --color-pokémon-spotlight-hour: #e58e26;
  --color-pokemon-spotlight-hour: #e58e26;
  --color-bonus-hour: #40407a;
  --color-update: #2980b9;
  --color-raid-weekend: #6f1e51;
  --color-potential-ultra-unlock: #2c3e50;
  --color-location-specific: #284b92;
  --color-wild-area: #015b63;
  --color-max-battles: #811356;
  --color-max-mondays: #690342;
  --color-go-pass: #ddb22f;
}
.default-event:not(.vis-point), .vis-item.vis-point.default-event > .vis-item-content, .default-event + .vis-dot {
  background-color: var(--color-default-event);
  border-color: hsl(from var(--color-default-event) h s calc(l + var(--dot-darken)));
}
.community-day:not(.vis-point), .vis-item.vis-point.community-day > .vis-item-content, .community-day + .vis-dot {
  background-color: var(--color-community-day);
  border-color: hsl(from var(--color-community-day) h s calc(l + var(--dot-darken)));
}
.raid-day:not(.vis-point), .vis-item.vis-point.raid-day > .vis-item-content, .raid-day + .vis-dot {
  background-color: var(--color-raid-day);
  border-color: hsl(from var(--color-raid-day) h s calc(l + var(--dot-darken)));
}
.raid-battles:not(.vis-point), .vis-item.vis-point.raid-battles > .vis-item-content, .raid-battles + .vis-dot {
  background-color: var(--color-raid-battles);
  border-color: hsl(from var(--color-raid-battles) h s calc(l + var(--dot-darken)));
}
.elite-raids:not(.vis-point), .vis-item.vis-point.elite-raids > .vis-item-content, .elite-raids + .vis-dot {
  background-color: var(--color-elite-raids);
  border-color: hsl(from var(--color-elite-raids) h s calc(l + var(--dot-darken)));
}
.event:not(.vis-point), .vis-item.vis-point.event > .vis-item-content, .event + .vis-dot {
  background-color: var(--color-event);
  border-color: hsl(from var(--color-event) h s calc(l + var(--dot-darken)));
}
.season:not(.vis-point), .vis-item.vis-point.season > .vis-item-content, .season + .vis-dot {
  background-color: var(--color-season);
  border-color: hsl(from var(--color-season) h s calc(l + var(--dot-darken)));
}
.raid-hour:not(.vis-point), .vis-item.vis-point.raid-hour > .vis-item-content, .raid-hour + .vis-dot {
  background-color: var(--color-raid-hour);
  border-color: hsl(from var(--color-raid-hour) h s calc(l + var(--dot-darken)));
}
.research:not(.vis-point), .vis-item.vis-point.research > .vis-item-content, .research + .vis-dot {
  background-color: var(--color-research);
  border-color: hsl(from var(--color-research) h s calc(l + var(--dot-darken)));
}
.research-day:not(.vis-point), .vis-item.vis-point.research-day > .vis-item-content, .research-day + .vis-dot {
  background-color: var(--color-research-day);
  border-color: hsl(from var(--color-research-day) h s calc(l + var(--dot-darken)));
}
.timed-research:not(.vis-point), .vis-item.vis-point.timed-research > .vis-item-content, .timed-research + .vis-dot {
  background-color: var(--color-timed-research);
  border-color: hsl(from var(--color-timed-research) h s calc(l + var(--dot-darken)));
}
.limited-research:not(.vis-point), .vis-item.vis-point.limited-research > .vis-item-content, .limited-research + .vis-dot {
  background-color: var(--color-limited-research);
  border-color: hsl(from var(--color-limited-research) h s calc(l + var(--dot-darken)));
}
.pokéstop-showcase:not(.vis-point), .vis-item.vis-point.pokéstop-showcase > .vis-item-content, .pokéstop-showcase + .vis-dot, .pokestop-showcase:not(.vis-point), .vis-item.vis-point.pokestop-showcase > .vis-item-content, .pokestop-showcase + .vis-dot {
  background-color: var(--color-pokéstop-showcase);
  border-color: hsl(from var(--color-pokéstop-showcase) h s calc(l + var(--dot-darken)));
}
.live-event:not(.vis-point), .vis-item.vis-point.live-event > .vis-item-content, .live-event + .vis-dot {
  background-color: var(--color-live-event);
  border-color: hsl(from var(--color-live-event) h s calc(l + var(--dot-darken)));
}
.pokémon-go-fest:not(.vis-point), .vis-item.vis-point.pokémon-go-fest > .vis-item-content, .pokémon-go-fest + .vis-dot, .pokemon-go-fest:not(.vis-point), .vis-item.vis-point.pokemon-go-fest > .vis-item-content, .pokemon-go-fest + .vis-dot {
  background-color: var(--color-pokémon-go-fest);
  border-color: hsl(from var(--color-pokémon-go-fest) h s calc(l + var(--dot-darken)));
}
.pokémon-go-tour:not(.vis-point), .vis-item.vis-point.pokémon-go-tour > .vis-item-content, .pokémon-go-tour + .vis-dot, .pokemon-go-tour:not(.vis-point), .vis-item.vis-point.pokemon-go-tour > .vis-item-content, .pokemon-go-tour + .vis-dot {
  background-color: var(--color-pokémon-go-tour);
  border-color: hsl(from var(--color-pokémon-go-tour) h s calc(l + var(--dot-darken)));
}
.research-breakthrough:not(.vis-point), .vis-item.vis-point.research-breakthrough > .vis-item-content, .research-breakthrough + .vis-dot {
  background-color: var(--color-research-breakthrough);
  border-color: hsl(from var(--color-research-breakthrough) h s calc(l + var(--dot-darken)));
}
.special-research:not(.vis-point), .vis-item.vis-point.special-research > .vis-item-content, .special-research + .vis-dot {
  background-color: var(--color-special-research);
  border-color: hsl(from var(--color-special-research) h s calc(l + var(--dot-darken)));
}
.global-challenge:not(.vis-point), .vis-item.vis-point.global-challenge > .vis-item-content, .global-challenge + .vis-dot {
  background-color: var(--color-global-challenge);
  border-color: hsl(from var(--color-global-challenge) h s calc(l + var(--dot-darken)));
}
.go-rocket-takeover:not(.vis-point), .vis-item.vis-point.go-rocket-takeover > .vis-item-content, .go-rocket-takeover + .vis-dot {
  background-color: var(--color-go-rocket-takeover);
  border-color: hsl(from var(--color-go-rocket-takeover) h s calc(l + var(--dot-darken)));
}
.team-go-rocket:not(.vis-point), .vis-item.vis-point.team-go-rocket > .vis-item-content, .team-go-rocket + .vis-dot {
  background-color: var(--color-team-go-rocket);
  border-color: hsl(from var(--color-team-go-rocket) h s calc(l + var(--dot-darken)));
}
.giovanni-special-research:not(.vis-point), .vis-item.vis-point.giovanni-special-research > .vis-item-content, .giovanni-special-research + .vis-dot {
  background-color: var(--color-giovanni-special-research);
  border-color: hsl(from var(--color-giovanni-special-research) h s calc(l + var(--dot-darken)));
}
.safari-zone:not(.vis-point), .vis-item.vis-point.safari-zone > .vis-item-content, .safari-zone + .vis-dot {
  background-color: var(--color-safari-zone);
  border-color: hsl(from var(--color-safari-zone) h s calc(l + var(--dot-darken)));
}
.city-safari:not(.vis-point), .vis-item.vis-point.city-safari > .vis-item-content, .city-safari + .vis-dot {
  background-color: var(--color-city-safari);
  border-color: hsl(from var(--color-city-safari) h s calc(l + var(--dot-darken)));
}
.ticketed-event:not(.vis-point), .vis-item.vis-point.ticketed-event > .vis-item-content, .ticketed-event + .vis-dot {
  background-color: var(--color-ticketed-event);
  border-color: hsl(from var(--color-ticketed-event) h s calc(l + var(--dot-darken)));
}
.ticketed:not(.vis-point), .vis-item.vis-point.ticketed > .vis-item-content, .ticketed + .vis-dot {
  background-color: var(--color-ticketed);
  border-color: hsl(from var(--color-ticketed) h s calc(l + var(--dot-darken)));
}
.go-battle-league:not(.vis-point), .vis-item.vis-point.go-battle-league > .vis-item-content, .go-battle-league + .vis-dot {
  background-color: var(--color-go-battle-league);
  border-color: hsl(from var(--color-go-battle-league) h s calc(l + var(--dot-darken)));
}
.pokémon-spotlight-hour:not(.vis-point), .vis-item.vis-point.pokémon-spotlight-hour > .vis-item-content, .pokémon-spotlight-hour + .vis-dot, .pokemon-spotlight-hour:not(.vis-point), .vis-item.vis-point.pokemon-spotlight-hour > .vis-item-content, .pokemon-spotlight-hour + .vis-dot {
  background-color: var(--color-pokémon-spotlight-hour);
  border-color: hsl(from var(--color-pokémon-spotlight-hour) h s calc(l + var(--dot-darken)));
}
.bonus-hour:not(.vis-point), .vis-item.vis-point.bonus-hour > .vis-item-content, .bonus-hour + .vis-dot {
  background-color: var(--color-bonus-hour);
  border-color: hsl(from var(--color-bonus-hour) h s calc(l + var(--dot-darken)));
}
.update:not(.vis-point), .vis-item.vis-point.update > .vis-item-content, .update + .vis-dot {
  background-color: var(--color-update);
  border-color: hsl(from var(--color-update) h s calc(l + var(--dot-darken)));
}
.raid-weekend:not(.vis-point), .vis-item.vis-point.raid-weekend > .vis-item-content, .raid-weekend + .vis-dot {
  background-color: var(--color-raid-weekend);
  border-color: hsl(from var(--color-raid-weekend) h s calc(l + var(--dot-darken)));
}
.potential-ultra-unlock:not(.vis-point), .vis-item.vis-point.potential-ultra-unlock > .vis-item-content, .potential-ultra-unlock + .vis-dot {
  background-color: var(--color-potential-ultra-unlock);
  border-color: hsl(from var(--color-potential-ultra-unlock) h s calc(l + var(--dot-darken)));
}
.location-specific:not(.vis-point), .vis-item.vis-point.location-specific > .vis-item-content, .location-specific + .vis-dot {
  background-color: var(--color-location-specific);
  border-color: hsl(from var(--color-location-specific) h s calc(l + var(--dot-darken)));
}
.wild-area:not(.vis-point), .vis-item.vis-point.wild-area > .vis-item-content, .wild-area + .vis-dot {
  background-color: var(--color-wild-area);
  border-color: hsl(from var(--color-wild-area) h s calc(l + var(--dot-darken)));
}
.max-battles:not(.vis-point), .vis-item.vis-point.max-battles > .vis-item-content, .max-battles + .vis-dot {
  background-color: var(--color-max-battles);
  border-color: hsl(from var(--color-max-battles) h s calc(l + var(--dot-darken)));
}
.max-mondays:not(.vis-point), .vis-item.vis-point.max-mondays > .vis-item-content, .max-mondays + .vis-dot {
  background-color: var(--color-max-mondays);
  border-color: hsl(from var(--color-max-mondays) h s calc(l + var(--dot-darken)));
}
.go-pass:not(.vis-point), .vis-item.vis-point.go-pass > .vis-item-content, .go-pass + .vis-dot {
  background-color: var(--color-go-pass);
  border-color: hsl(from var(--color-go-pass) h s calc(l + var(--dot-darken)));
}

/* Pokemon lists, as seen on LeekDuck */

.pkmn-list-flex {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  padding-inline-start:0;
  margin-top:0;
  padding-bottom:1em;
}

.pkmn-list-item {
  display:inline-block;
  margin:6px;
  width:calc(50% - 12px);
  text-align:center;
  padding-top:1.25em;
  font-size:smaller;
  position:relative;
}

.pkmn-list-item .pkmn-name {
  margin-top:0.25em;
  opacity:0.75;
}

.pkmn-list-item .pkmn-list-img img {
  margin-top:-35%;
  margin-bottom:-10%;
}

.pkmn-list-item .shiny-icon {
  position:absolute;
  height:1.25em;
  right:0.6em;
  bottom:63%;
}

.pkmn-list-img {
  border-radius:12px;
  background:#f0f8ff;
  border:1px solid #ddd;
  background:radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(184, 184, 208, 0.15) 100%);
}

.pkmn-list-img img {
  height: auto;
  max-width: 100%;
}