@import "_bootstrap";

// ----------------------
// Container
// ----------------------
.container {
  max-width: 100vw;

  @media (min-width: 768px) {
    max-width: 95vw;
  }
}

.circle {
  position: relative;
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  margin: 50px auto;
}

:root {
  --total: 11;        /* How many items */
  --radius: 80px;   /* Circle size */
}

.circle-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: grid;
  place-items: center;
  
  /* This is where the magic happens */
  --angle: calc(360deg / var(--total) * var(--i));
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  transform: 
    rotate(var(--angle))           /* Rotate to position */
    translateX(var(--radius))      /* Move away from center */
    rotate(calc(-1 * var(--angle))); /* Rotate back */
}

// ----------------------
// Typography
// ----------------------
.copy-small {
  font-size: 0.75rem;
  opacity: 0.87;

  @media (min-width: 768px) {
    font-size: 0.85rem;
  }

  @media (min-width: 1400px) {
    font-size: 1rem;
  }
}

// ----------------------
// Cards & Modal
// ----------------------

.modal-xl {
  @media (min-width: 768px) {
    max-width: 95vw;
  }
  @media (min-width: 1400px) {
    max-width: 90vw;
  }
}

.image-grow {
  transition-property: box-shadow, transform;
  transition-duration: 350ms;
  transition-timing-function: ease;

  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24);
}

.image-grow:is(:hover, :focus) {
  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, 0.2);
  transform: translateY(-.9rem) scale(1.02);
}

.card-modal {
  background-color: rgba(1, 11, 18, 0.8);
  cursor: default;
}

.pokedex-page {
  position: relative;
  @media (min-width: 768px) {
    top: 100px !important;
  }
}

// ----------------------
// Navigation Tabs
// ----------------------
.nav-link {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.67);
  transition:
    margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
    padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
    padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);

  &:hover,
  &:focus {
    color: rgba(0, 0, 0, 0.87);
  }
}

.nav-tabs {
  .nav-link.active,
  .nav-item.show .nav-link {
    color: rgba(0, 0, 0, 0.94);
  }

  .nav-link:hover,
  .nav-link:focus {
    border-color: transparent;
  }
}

// Tiered Nav-Link Colors
$tiers: (
  nm: rgba(156, 204, 102, 1),
  lp: rgba(211, 225, 86, 1),
  mp: rgba(255, 238, 87, 1),
  hp: rgba(255, 201, 41, 1),
  dmg: rgba(255, 167, 36, 1),
  vendor: hsl(262, 47%, 55%)
);

@each $name, $color in $tiers {
  .nav-link.#{$name} {
    border-bottom: 3px solid $color;

    &:hover,
    &:focus {
      background-color: rgba($color, 0.67);
    }

    &.active {
      background-color: $color;
      border-bottom-color: $color;
      @if $name == vendor {
        color: rgba(255, 255, 255, 0.87);
      }
    }
  }
}

// ----------------------
// Misc Components
// ----------------------
.dark-callout {
  @media (min-width: 768px) {
    background-color: rgba(44, 48, 59, 1);
  }
}

.price-area {
    max-height: 75px;
}

.card-image {
  aspect-ratio: 23 / 32;
  object-fit: cover;
  z-index: 998;
  cursor: pointer;
}

// Icon sizes
.small-icon svg {
  width: 100%;
  max-height: 16px;
  margin-top: -0.25rem;
}

.masked-image {
  z-index: 1000;
  opacity: 100%;
  filter: brightness(0);
}

.starburst {
  opacity: 10%;
  mix-blend-mode: lighten;
  object-fit: cover;
  background-size: cover;
} 

.whos-that-pokemon {
  width: 100%;
  z-index: 998;
  opacity: 10%;
  mix-blend-mode: lighten;
  aspect-ratio: 1/1;
}

.energy-icon svg,
.rarity-icon-large svg,
.set-icon svg {
  width: 2.5rem;
}

.rarity-icon-large svg,
.set-icon svg {
  margin-bottom: -0.25rem;
}

.energy-icon svg {
  margin-top: -0.25rem;
  margin-right: -0.25rem;
}

.rarity-icon-large svg {
  margin-right: -0.25rem;
}

.set-icon svg {
  margin-left: -0.25rem;
}

.shadow-filter {
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

// ----------------------
// Pricing
// ----------------------
.price-row {
  position: relative;
  margin-top: -1.25rem;
  border-radius: 0.33rem;
  background: linear-gradient(
    90deg,
    rgba(156, 204, 102, 1) 21%,
    rgba(211, 225, 86, 1) 42%,
    rgba(255, 238, 87, 1) 63%,
    rgba(255, 201, 41, 1) 74%,
    rgba(255, 167, 36, 1) 85%
  );
}

.inventory-button {
  margin-bottom: -2rem;
  margin-right: -0.25rem;
  border-radius: 0.33rem;
  width: 40px;
  height: 40px;
  background-color: hsl(262, 47%, 55%);
  color: #fff;
}

.inventory-label {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  font-weight: 700;   
}

.price-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  background-color: hsl(88, 50%, 60%);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
  border-top-left-radius: 0.33rem;
  border-bottom-left-radius: 0.33rem;

  @media (min-width: 768px) {
    font-size: 0.8rem;
  }
  @media (min-width: 996px) {
    font-size: 0.85rem;
  }
  @media (min-width: 1200px) {
    font-size: 0.9rem;
  }
  @media (min-width: 1600px) {
    font-size: 1rem;
  }

  &:nth-of-type(n + 2) {
    background-color: hsl(66, 70%, 61%);
  }
  &:nth-of-type(n + 3) {
    background-color: hsl(54, 100%, 67%);
  }
  &:nth-of-type(n + 4) {
    background-color: hsl(45, 100%, 58%);
  }
  &:last-of-type {
    background-color: hsl(36, 100%, 57%);
    border-radius: 0.33rem;
  }
}

// ----------------------
// Search
// ----------------------
@media (max-width: 768px) {
  .search-box,
  .search-button {
    min-height: 48px;
  }
}

// ----------------------
// Sticky Bar
// ----------------------
.sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  height: 48px;

  @media (min-width: 768px) {
    position: sticky;
    top:0;
    min-width: 45vw;
  }
}

// dexter css classes to reconciled later
/* COLORS & BACKGROUNDS */

$dropshadow-rgba: rgba(176, 38, 46, .35);

/* SIZES */
/* prefer calculations here and calculated variables in CSS below */

/* Set left-column-width, derive logo size below */
$hdr-side-width: 270px;
$hdr-big-btn-width: 72px; /* SIGN UP */

/* to see the menu flow to more than 1 line, change 
   $min-width here to something smaller: e.g., * 1.5; */
$min-width: $hdr-side-width * 2; 
$max-width: $hdr-side-width * 3;

$padding-small: 0;
/* declared for flexibility */
$padding-to-window: $padding-small;
$padding-to-top: $padding-small;
$padding-hdr: $padding-small;

$hdr-big-btn-margin: floor(.75 * $padding-hdr); /* round down */

$border-radius: 8px; /* big-btn radius */
/* larger radius to flow around big button */
$border-radius-hdr: ceil(1.25 * $border-radius); /* round up */
$corner-border-width: $border-radius-hdr;
$corner-border-size: $border-radius-hdr * 2;

$shadow-size: 20px;

$shadow-size-deep: ceil(1.5 * $shadow-size); 

$hdr-menu-item-height: 18px;

$hdr-menu-item-padding-top: $hdr-big-btn-margin;
$hdr-menu-item-padding-bottom: ceil(0.5 * $hdr-big-btn-margin);
$hdr-menu-height: $hdr-menu-item-padding-top + $hdr-menu-item-height + $hdr-menu-item-padding-bottom;

$hdr-menu-item-height: $hdr-menu-height - $padding-hdr;

$hdr-logo-width: $hdr-side-width - $hdr-big-btn-width - 2 * $hdr-big-btn-margin;
$hdr-logo-height: ceil(0.75 * $hdr-logo-width); /* 4x3 */
$hdr-logo-margin-bottom: floor(0.5 * $hdr-menu-height);
/* height of taller left side "overhang" without padding-to-top */
$hdr-side-height: $hdr-logo-height + $hdr-logo-margin-bottom;
$hdr-side-total-height: $hdr-side-height + $padding-to-top;

$hdr-total-height: $hdr-side-total-height + $shadow-size-deep;

/* extra padding-top to make room for column-1 header "overhang" */
$column-1-padding-top: $hdr-side-total-height + floor(.5 *$shadow-size);

/* shorter green bg across top */
/* can specify or calculate: e.g., half the logo height */
$hdr-topwell-height: ceil(0.5 * $hdr-logo-height);

/* height of shorter right side - 
   needed for .header-bg and .main padding-top */
$hdr-top-height: $padding-to-top + $hdr-topwell-height + $hdr-menu-height;

/* size and position of horizontal background "patch" 
   extending background into negative space by size of border-radius-hdr */
$hdr-logo-patch-height: $shadow-size + $border-radius-hdr;
$hdr-logo-patch-width: $hdr-logo-width + $border-radius-hdr;
$hdr-logo-patch-top: $padding-to-top + $hdr-topwell-height - $shadow-size;
$hdr-logo-patch-background-position: -1*($hdr-topwell-height - $shadow-size);

$hdr-big-btn-top: $hdr-topwell-height + $hdr-big-btn-margin;
$hdr-big-btn-left: $hdr-logo-width + $hdr-big-btn-margin;
$hdr-big-btn-height: $hdr-side-height -  $hdr-topwell-height - $hdr-big-btn-margin - $hdr-logo-margin-bottom;
$hdr-big-btn-width: $hdr-side-width - $hdr-logo-width - 2 * $hdr-big-btn-margin;

.blueCircle {
    width: 20vw;         /* Equal width and height for a perfect square */
    height: 20vw;
    max-width: 100px;
    max-height: 100px;
    background: radial-gradient(circle at top left, hsl(196, 100%, 47%), hsl(196, 100%, 27%)); /* The color of the circle */
    border-radius: 50%;   /* Turns the square into a circle */
    position: absolute;      /* Positioning context for the circle */
    border: 8px solid #fff;
    margin: 0 auto; /* Remove default margin */
      --a: 8deg; 
      /* Initial mask to create the shine line */
      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
      transition: .4s; 
  transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));       
}

.redCircle {
    width: 10vw;         /* Equal width and height for a perfect square */
    height: 10vw;  
    max-width: 25px;      /* Equal width and height */
    max-height: 25px;
    background: radial-gradient(circle at top left, hsl(0, 100%, 56%), hsl(0, 79%, 45%)); /* The color of the circle */
    border-radius: 50%;   /* Turns the square into a circle */
    position: absolute;      /* Positioning context for the circle */
    border: 3px solid hsl(210, 11%, 15%);
    left: 13rem;
    margin: 0 auto; /* Remove default margin */
      --a: 8deg; 
      /* Initial mask to create the shine line */
      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
      transition: .4s; 
  transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));       
}

.yellowCircle {
    width: 25px;         /* Equal width and height for a perfect square */
    height: 25px;        /* Equal width and height */
    background: radial-gradient(circle at top left, hsl(61, 100%, 50%), hsl(61, 100%, 40%)); /* The color of the circle */
    border-radius: 50%;   /* Turns the square into a circle */
    position: absolute;      /* Positioning context for the circle */
    border: 3px solid hsl(210, 11%, 15%);
    left: 15rem;
    margin: 0 auto; /* Remove default margin */
      --a: 8deg; 
      /* Initial mask to create the shine line */
      mask: linear-gradient(135deg, #000d 40%, #000, #000d 60%) 100% 100% / 240% 240%;
      transition: .4s; 
  transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));      
}

.yellowCircle:hover, .redCircle:hover, .greenCircle:hover, .blueCircle:hover {
  /* Reverse the rotation direction on hover */
  --i: -1, 1; 
  /* Move the mask position to simulate the shine moving */
  mask-position: 0 0;
}

.greenCircle {
    width: 25px;         /* Equal width and height for a perfect square */
    height: 25px;        /* Equal width and height */
    background: radial-gradient(circle at top left, hsl(149, 100%, 40%), hsl(149, 100%, 30%)); /* The color of the circle */
    border-radius: 50%;   /* Turns the square into a circle */
    position: absolute;      /* Positioning context for the circle */
    border: 3px solid hsl(210, 11%, 15%);
    left: 17rem;
    margin: 0 auto; /* Remove default margin */
      --a: 8deg; 
      /* Initial mask to create the shine line */
      mask: linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100% / 240% 240%;
      transition: .4s; 
  transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));        
}

/* can't assume only one "header" element in HTML5 */
.header-top { 
  /* pin to top - 0 is default */
  /* raise z-index to cover, higher here to allow 
     a range of z-indexes in the scrolling content */
  z-index: 100;
  /* height overflows */
}

/* match these backgrounds to blend */
/* OPTIONAL, extend header bg color across top */

/* match widths, margins & padding */
.page-wrap, .header-wrap { 
  width: 100%; 
  /* center content */
  margin: 0 auto; 
  /* separate content from window edge -- 
     padding-top and -bottom specified below.
     Here (not on body) to work with fixed header */
  padding: 0 $padding-to-window;
}

/* padding-left and -right added above */
.header-wrap { 
  /* child elements abaolute */
  position: relative;
  /* a "min-height" for shorter right side */
  height: $hdr-top-height;
}

/* extend bg into padding-to-window gap on taller left side - 
   not needed if extending bg using optional .header-bg div */
.header-wrap:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /* extra 2px width to cover tiny gap when iOS zooms */
  width: $padding-to-window + 2px;
  height: $hdr-side-total-height;
  /* OPTIONAL, extend padding-to-window "frame" all the way down - 
     may want to do the same on right with an :after pseudo-element:
   height: 100000px; */
}

/* OPTIONAL, if we want to differentiate header and body - 
   .header-bg:before extends taller bg all the way left  */
.header-bg { 
  /* child elements absolute */
  position: relative;
  /* tuck behind header framing */
  z-index: -1;
  width: 100%;
}

/* OPTIONAL, extends bg to left on taller left side  */
.header-bg:before { 
  content: "";
  /* remove from layout */
  position: absolute;
  /* start from the right and extend left */
  right: 100%;
  /* height of shorter right side */
  height: $hdr-side-total-height;
  /* crazy wide - absolutely positioned 
     to start at left edge and go left */
  width: 100000px;
}

.header-content { 
  /* child elements absolute */
  position: relative;
  height: $hdr-total-height;
  width: 100%;
  padding-top: $padding-to-top;
  /* crop shadows at the sides and top */
  overflow: hidden; }

/* add taller left-side "overhang" bg + shadow  */
.header-content:before { 
  content: "";
  /* remove from layout */
  position: absolute;
  /* tuck behind .header-wrap and .nav-main ul
     so right-edge shadow is covered up */
  z-index: -1;
  height: $hdr-side-height;
  width: $hdr-side-width;
  padding: 0;
  border-radius: 0 0 $border-radius-hdr 0;
}

/* match backgrounds to blend */
.header-logo, .header-social { 
  background-color: hsl(358, 71%, 48%);
}

.header-logo { 
  position: absolute;
  /* cover .header-content-social */
  /* z-index: 1; */
  height: $hdr-logo-height;
  width: $hdr-logo-width;
  border-radius: 0 0 $border-radius-hdr $border-radius-hdr;
}

.header-logo h1, .header-logo h2 { 
  position: relative;
  /* overlap .header-logo-patch */
  z-index: 2;
  text-shadow: 0 2px 1px rgba(255,255,255, 0.3), 
    0 0 10px rgba(204,232,229, 0.5)
}

.header-logo h1 { 
  padding: 10px 0 0 18px; 
  font-size: 36px;
}

.header-logo a { 
  color: inherit !important;
  text-decoration: none;
}

.header-logo h2 { 
  margin-top: -2px;
  padding: 0 0 0 18px; 
  font-size: 24px;
}

/* "patch" to cover shadow "seam" of overlapping shapes - 
   can't nest pseudo-elements, so need extra div here -  
   overflow:hidden to crop shadow of rounded corner overlay (below) */
.header-logo-patch {
  display: block;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: $hdr-logo-patch-top;
  height: $hdr-logo-patch-height;
  width: $hdr-logo-patch-width;
  background-color: hsl(358, 71%, 48%);
  background-position: 0 $hdr-logo-patch-background-position;
  background-repeat: no-repeat;
}

/* rounded corner overlay (with outset shadow to match "well") */
.header-logo-patch:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -$border-radius-hdr;
  right: -$border-radius-hdr;
  height: $border-radius-hdr * 2;
  width: $border-radius-hdr * 2;
  background-color: hsl(210, 11%, 15%);
  border-radius: $border-radius-hdr 0 0 0;
}

.header-social { 
  position: absolute;
  top: $padding-to-top;
  height: $hdr-topwell-height;
  width: 100%;
  border-radius: $border-radius-hdr 0 $border-radius-hdr 0;
}

/* NAV */

.horizontal-nav ul, .horizontal-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.horizontal-nav li {
  float: left;
}

.horizontal-nav li a { 
  display: block;
  text-decoration: none;
}

.nav-main { 
  /* child elements absolute */
  position: relative;
  padding-left: $hdr-side-width; 
  padding-top: $hdr-topwell-height + $hdr-menu-item-padding-top; 
  padding-bottom: 0;
  background: none;
}

.nav-main ul { 
  padding: 0 0 $hdr-menu-item-padding-bottom 2px; /* nudge links right */
  background: $body-bg;
  /* clear floats without extra div or 
     using pseudo-elements needed below - 
     cannot use with position:relative */
  overflow: auto;
  overflow-x: hidden;
}

/* dropshadow tracks with menu height if links exceed 1 line */
.nav-main ul:before { 
  content: "";
  display: block;
  position: absolute;
  /* stack shadow behind "overhang" */
  z-index: -2;
  /* same size as parent */
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: $body-bg;
}

/* INVERTED ROUNDED CORNER under menu - left */
.nav-main ul:after { 
  content: "";
  display: block;
  position: absolute;
  /* tuck behind nav-main a:hover */
  z-index: -1;
  height: $border-radius-hdr * 2;
  width: $border-radius-hdr * 2;
  border-top: $border-radius-hdr solid $body-bg;
  border-left: $border-radius-hdr solid $body-bg;
  bottom: -1*$border-radius-hdr;
  left: $hdr-side-width - $border-radius-hdr;
  /* top left */
  border-radius: $border-radius-hdr * 2 0 0 0;
}

.nav-main a, 
.nav-main:visited { 
  display: block;
  height: $hdr-menu-item-height;
  padding: 0 .5em;
  line-height: $hdr-menu-item-height;
  font-size: 0.8125em;
  text-transform: uppercase;
  border-radius: $border-radius;
}

/* nudge down 1px for uppercase vertical centering */
.nav-main a span { 
  display: block; 
  position: relative; 
  top: 1px; 
}

.nav-social { 
  /* overlap .header-logo-patch */
  position: relative;
  z-index: 1;
  float: right;
  padding-right: .875em;
}

/* MEDIA QUERIES */

/* Mobile example - e.g., iPhone5 landscape width = 568px */
@media only screen 
and (max-device-width : 599px) {
 
  .header-top { 
  /* unpin header so it scrolls with content */
    position: absolute; 
  }
  
  /* even if you keep the header fixed, you might 
     change width to 100% for better mobile zooming */
  .page-wrap, .header-wrap { 
    width: 100%; 
  }

}

/* A full-on responsive layout would reconfigure the 
   layout - this is just a gesture as an example */

/* lose countoured bottom at smaller width - 
   when menu items overflow 2 lines */

@media only screen 
and (max-width : 512px) {

  .nav-main ul { 
    height: $hdr-side-height - $hdr-topwell-height - $hdr-menu-item-padding-top;
    background: none; }

  /* taller left-side "tab" bg + shadow  */
  .header-content:before,
  /* rounded corner under menu - left */
  .nav-main ul:after { 
    display: none;
  }

}
    
@media only screen 
and (max-width : 320px) {
 
  .header-top { 
  /* unpin header so it scrolls with content */
   position: absolute; }
  
  /* even if you keep the header fixed, you might 
     change width to 100% for better mobile zooming */
  
  .page-wrap, .header-wrap { 
    width: 100%; }

}