/*

#main-content
  #filter-main-header                        * Wrapping header
    #search-menu                             * Search wrapper
    #filter-main-menu                        * Main filter menu
      [filter-wrap]                          * Outside wrap for individual filter
        [filter-toggle]                      * Button visible in main menu
        [filter-dialog]                      * Dialog wrapper
          [filter-header]                    * Header for mobile & selection controls
            [filter-mobile-heading]          * Filter name for mobile
            [filter-mobile-close]            * Filter close for mobile
            [filter-selection-controls]      * Select all, unselect all, clear
          [filter-menu]                      * Actual filter options
        
*/


@media (hover: none) {
  body:has([filter-dialog][open]) {
    overflow: clip;
  }
}

  /**********/
 /* SEARCH */
/**********/

@keyframes search-slide-in {
  0% {
    top: calc(-1.5rem - 2 * var(--header-padding));
  }

  100% {
    top: 0;
  }
}

@keyframes search-slide-out {
  0% {
    top: 0;
  }
  
  100% {
    top: calc(-1.5rem - 2 * var(--header-padding));
  }
}


/* [search] filter-main-header adjustment, margin cover adjustment, filter-main-menu animation hide */
body[search] {
  #filter-main-header {
    display: block !important;
    border-bottom: none;
  }
  
  /* Margin covers */
  #filter-main-header::before, #filter-main-header::after {
    transition: height 100ms linear;
    height: calc(var(--filter-main-header-height) + var(--header-padding) + 1px) !important;
  }

  #filter-main-menu {
    --display: flex;
    animation-name: to-display-none;
  }
}

/* [search] search-menu animation & search-button background */
body[search] {
  #search-menu {
    --display: grid;
    animation-name: search-slide-in, from-display-none;
  }

  #search-button {
    background-color: #fff;
    box-sizing: border-box;

    & svg {
      position: relative;
      z-index: 2;
      stroke: #000 !important;
    }

    &::after {
      content: '';
      display: block;
      width: 2.6rem;
      height: 3.4rem;
      position: absolute;
      border-radius: .8rem .8rem 0 0;
      translate: -.4rem calc(.3rem + 1px);

      border-inline: 1px solid black;
      border-block-start: 1px solid black;
      border-block-end: 3px solid #fff;

      background-color: #fff;

      z-index: 1;
    }
  }
}

/* not[search] search-menu & filter-main-menu animation to default */
body:not([search]) {
  #search-menu {
    --display: grid;
    display: none;
    animation-name: search-slide-out, to-display-none;
  }
 
  &:not([search]) #filter-main-menu {
    --display: flex;
    animation-name: from-display-none;
    animation-delay: 100ms;
  }
}
  
/* Main search menu */
#search-menu {
  grid-template-columns: 1fr max-content max-content;
  position: relative;

  border-bottom: var(--header-padding) solid #fff;
  box-shadow: 0 1px 0 var(--gray-4);

  animation-duration: 100ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* If search input has text show product results */
body[search]:has(#search-input:not(:placeholder-shown)) {
  #main-content [page] {
    display: none;
  }

  #products {
    display: grid !important;
  }
}

/* Wraps search-input & search-by placeholder text */
#search-input-wrap {
  width: 100%;
  height: calc(1.5rem + var(--header-padding)); /* line-height + padding */
  border-inline-start: 1px solid #000;
  border-block: 1px solid #000;

  overflow: hidden;
}

#search-input {
  height: 100%;
  width: 100%;
  padding-inline: .6rem;
}

#search-menu:has(#search-input:placeholder-shown) > #search-clear {
  color: #fff;
}

#search-menu:has(#search-input:not(:placeholder-shown)) > #search-clear {
  color: var(--gray-6);
}

#search-by {
  --step: 0;
  --distance: calc(100% + 1px);

  display: inline-grid;
  grid-auto-flow: row;
  list-style: none;

  align-items: center;
  justify-items: center;

  color: var(--gray-4);

  height: 100%;
  grid-auto-rows: 100%;

  position: relative;
  left: 10ch;
  top: calc(-1 * var(--step) * var(--distance));

  animation-duration: 4s;
  animation-iteration-count: infinite;
}

body[search]:has(#search-input:placeholder-shown) #search-by {
  animation-name: search-by;
}

@keyframes search-by {
  0% {
    --step: 1;
  }

  20% {
    --step: 2;
  }

  40% {
    --step: 3;
  }

  60% {
    --step: 4;
  }

  80% {
    --step: 5;
  }

  100% {
    --step: 6;
  }
}

/* Clear search-input button */
#search-clear {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  font-family: 'Century Gothic';
  user-select: none;
  text-transform: uppercase;
  border-block: 1px solid #000;
  font-size: .8rem;
  height: 100%;
  padding-inline: .6rem;
  transition: color 100ms linear;
  cursor: pointer;
}

/* Close search-menu button */
#search-close {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  height: 100%;
  background-color: black;
  color: #fff;
  cursor: pointer;
} 

/* vv Search/Filter has no results vv */
#products:has(product-card:not([hidden])) #no-results {  display: none;   }
body[search] #no-results [filter] {  display: none;  } 
body:not([search]) #no-results [search] {  display: none;  }
/* ^^ Search/Filter has no results ^^ */


  /**********/
 /* FILTER */
/**********/

/* Wraps search-menu & main-filter-menu */
#filter-main-header {
  position: relative;
  z-index: 40;

  anchor-name: --filter-anchor;

  height: var(--filter-main-header-height);
  
  background-color: #fff;

  padding-block-start: var(--header-padding);
  border-bottom: 1px solid var(--gray-4);

  /* Cover up sales tags sticking outside of grid vv */
  &::before, &::after {
    content: '';
    display: block;
    background-color: #fff;
    height: var(--filter-main-header-height);
    width: var(--column-gap);
    position-anchor: --filter-anchor;
    top: anchor(top);
    position: fixed;
  }

  &::before {
    right: anchor(left);
  }

  &::after {
    left: anchor(right);
  }
}

/* Main filter menu */
#filter-main-menu {
  visibility: hidden;

  justify-content: space-between;
  user-select: none;

  animation-duration: 0s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Background outline for toggle button when filters are selected */
@keyframes filter-toggle-background {
  0% {
    --color-a: transparent; 
  }
  100% {
    --color-a: var(--gray-6);
  }
}

/* Wraps [filter-toggle], [filter-dialog], [filter-sub-menu]'s (size & category - outside dialog for position-anchor) */
[filter-wrap] {
  justify-content: center;
  align-items: start;
  position: relative;
 
  & > [filter-toggle] {
    --color-a: transparent;

    padding-inline: var(--filter-toggle-padding); /* Extra padding to provide larger hitbox */

    background-image: linear-gradient(#fff, #fff), linear-gradient(var(--color-a), var(--color-a));
    background-size: 100% calc(50% - .1em - 2px), calc(100% - 2.4em) calc(50% - .1em);
    background-position: 0 calc(.2em + 1px), 1.2em .2em;
    background-repeat: no-repeat;

    @media (orientation: portrait) {
      background-size: 100% calc(50% - .1em - 2px), 100% calc(50% - .1em);
      background-position: 0 calc(.2em + 1px), 0 .2em;
    }
  }
 
  /* Animate background-border */
  &:has(:checked:not([name=f-sort]):not(#f-price_all)) > [filter-toggle] {
    --color-a: var(--gray-6);
    animation: filter-toggle-background 75ms linear;
  }
  
  /* Wraps [filter-menu] (not sub menus) */
  [filter-dialog] {  
    padding: var(--header-padding);

    border-width: 1px;
    border-style: solid;
    border-color: var(--gray-4);

    min-width: max-content;

    /* Drop-down slide-in for desktop */
    @media(hover: hover) {    
      interpolate-size: allow-keywords;
      transition: height 1s linear;
    }


    /* Left hand slide-in for mobile */
    @media (hover: none) {
      position: fixed;
      inset: 0;
      left: 0dvw;
      top: 0;

      padding-inline: var(--column-gap);
      padding-block: 0 var(--header-padding);

      width: calc(100dvw - var(--dialog-margin));
      height: calc(100dvh);

      background-color: #fff;

      animation: dialog-from-left 300ms ease-out;

      border: none;
      box-shadow: 0 4rem 0 #fff; /* Hacky because 100dvh isn't working? */

      &::backdrop {
        background-color: rgba(0, 0, 0, .4);
        backdrop-filter: blur(4px);
        animation: dialog-backdrop 300ms ease-in;
      }
    }
  }

  @media (hover: hover) {
    width: fit-content;

    &:hover {
      & > button::after {
        display: block; /* Show cutout arrow */
      }

      & > [filter-dialog] {
        display: block;
        position: absolute;     
        inset-block-start: calc(1.5rem + var(--header-padding) - 1px); /* Line-height + padding - border */
        height: auto;

      }
      
      /* Center menu vv */
      --translation: -50%;

      &:nth-child(n+5) > [filter-dialog] {
        --translation: 50%;
      }

      &:not(:first-child):not(:last-child) > [filter-dialog] {      
        inset-inline-start: 50%;
        transform: translateX(var(--translation));
      }

      & [filter-dialog] {
        --translate-correction: 0px;   /* JS correction for dialogs 2-6 if going outside screen */
        translate: var(--translate-correction) 0;
      }
      /* Center menu ^^ */
    }  
  }

  /* Right align wrappers that are right-of-center vv */
  &:nth-child(n+5) {
    direction: rtl;

    [filter-header], [filter-menu] {
      direction: ltr;
    }
  }
}

/* Primary filter menu toggle buttons */
[filter-toggle] {
  display: grid;
  grid-template-rows: max-content var(--header-padding);
  justify-items: center;

  cursor: pointer;

  font-family: 'Century Gothic';
  text-transform: uppercase;

  anchor-name: --filter-toggle;

  /* Cutout arrow */
  &::after {
    content: '';
    display: none;
    height: var(--header-padding);
    width: var(--header-padding);

    border-left: .8rem solid transparent;
    border-right: .8rem solid transparent;
    border-bottom: .8rem solid #fff;

    position: relative;
    z-index: 1;

    top: 2px;
    filter: drop-shadow(0 -2px 0 var(--gray-4));
  }
}


/* Wrapper for [filter-selection-controls] & [filter-mobile...] */
[filter-header] {
  background-color: #fff;

  @media (hover: none) {
    position: sticky;
    top: 0;
    z-index: 10;
    padding-block-start: var(--header-padding);

    [filter-mobile-heading], [filter-mobile-close] {
      font-size: 2rem;
      display: inline-block;
    }

    [filter-mobile-close] {
      float: right;
      line-height: 1.4;
      margin-top: -.2em;
    }
  }
}

/* Wrapper for select all, etc. */
[filter-selection-controls] {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  padding-block-end: var(--header-padding);
  border-block-end: 1px solid var(--gray-4);
  margin-block-end: var(--header-padding);

  @media (hover: none) {
    align-items: center;
    height: calc(3 * var(--header-padding));
    padding-block-end: 0;
  }

  & li {
    display: inline-flex;
    justify-content: center;
    font-family: 'Century Gothic';
    text-wrap: nowrap;
    text-align: center;

    @media (hover: hover) {
      flex: 1;

      &:nth-child(2) {
        flex: 999; /* Justifies to edges */
      }
    }
  }

  & [filter-selection-control] {    
    display: flex;
    text-align: center;
  }

  & [filter-selection-control]:active {
    font-weight: 600;
  }

  @media (hover: hover) {
    & [filter-selection-control]:hover {
      font-weight: 600;
    }
  }
}


/* [filter-menu] applies to both [filter-dialog] > [filter-menu] AND [filter-sub-menu]'s */
[filter-menu] {
  display: flex;
  flex-flow: column wrap;
  column-gap: 1rem;

  height: max-content;
  min-width: 12ch;

  @media (hover: hover) {
    max-height: 60vh;
  }

  /* Checkbox wrappers */
  & li {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    user-select: none;
    column-gap: .3rem;

    @media (hover: none) {
      grid-template-columns: 1rem max-content;
    }
  }

  & li:not(:last-child) {
    margin-bottom: var(--filter-input-margin);
  }  

  /* Bold text without column resizing */
  @media (hover: hover) {
    & li:has(> [filter-control]:checked) {
      text-shadow: .2px 0 0 hsl(0 0% 0% / .5), 0 .2px 0 hsl(0 0% 0% / .5), .2px .2px .5px hsl(0 0% 0% / .5);
    }
  }
  /* Slightly different for mobile */
  @media (hover: none) {
    & li:has(> [filter-control]:checked) {
      text-shadow: .5px 0 0 hsl(0 0% 0% / .5), 0 .5px 0 hsl(0 0% 0% / .5), .5px .5px .5px hsl(0 0% 0% / .5);
    }
  }

  /* Product count */
  & li[product-count] > label::after {
    font-family: 'Century Gothic';
    content: '[' attr(product-count) ']';
    font-size: .6rem;
    font-weight: 600;  
    margin-left: .3rem;
    position: relative;
    top: -.25em;
  }  

  /* Checkbox and radios */
  & [filter-control] {
    display: grid;
    place-items: center;
    width: .8rem;
    height: .8rem;
    border: 1px solid var(--gray-4);

    /* Disabled */
    &:disabled {
      border: 1px solid var(--gray-2);
      background-color: var(--gray-2);

      & + label {
        color: var(--gray-4);
      }
    }

    /* Checked */
    &:checked {
      background-color: #000;
      border: 1px solid #000;

      /* Checkmark graphic */
      &::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewPort='0 0 10 10' stroke='white' stroke-width='2'%3E%3Cline x1='1' y1='6' x2='5' y2='9'/%3E%3Cline x1='4.5' y1='9' x2='10' y2='1'/%3E%3C/svg%3E");
        aspect-ratio: 1;
      }
    }

    /* Indeterminate (for size/category multi-tier checkbox groups) */
    &:indeterminate {
      background-color: var(--gray-4);
      border: 1px solid var(--gray-4);

      /* Literally just a dash, but it MATTERS TO ME */
      &::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewPort='0 0 10 10' stroke='white' stroke-width='2'%3E%3Cline x1='1' y1='5' x2='10' y2='5'/%3E%3C/svg%3E");
        aspect-ratio: 1;
        margin-inline-start: .5px;
      }
    }
  }
  
  /* Hide checkmarks with no products */
  & [product-count='0'] {
    display: none;
  }
}

/* Headings for sizetype menu */
[sub-menu-heading] {
  font-family: 'Century Gothic';
  line-height: 1;
  
  color: var(--gray-6);
  text-wrap: nowrap;

  padding-bottom: .2rem;
  border-bottom: 1px solid var(--gray-4);

  min-width: max-content;

  @media (hover: none) {
    font-size: .8rem;
    text-transform: uppercase;
  }
}

/* Drop-down sub-menus */
@media (hover: hover) {
  #filter-category-dialog {
    anchor-name: --filter-category-dialog;
  }

  #filter-size-wrap {
    anchor-name: --filter-size-dialog;
  }

  #filter-category-wrap, #filter-size-wrap {
    &:not(:hover) [filter-menu] {
      display: none !important;
    }

    & > [filter-menu] {
      background-color: white;
      position: fixed;
      left: calc(anchor(right) + var(--header-padding));
      top: calc(anchor(top) - var(--header-padding) - 1px);
      width: fit-content;
      max-height: 40vh;

      padding: var(--header-padding);
      border: 1px solid var(--gray-4);
    }
    
    & > [filter-menu]:not([visible]), [filter-menu]:empty, [single-child-other] {
      display: none !important;
    }

    & [wrap-menu]:not(:last-child) {
      margin-block-end: var(--filter-input-margin);
    }
  }

  /* Submenu cutout arrows */
  #filter-category-wrap > [filter-menu][visible]::before,
  #filter-size-wrap > [filter-menu][visible]::before {
    content: '';

    width: var(--header-padding);
    height: var(--header-padding);

    position: absolute;
    z-index: 1;

    top: calc(var(--header-padding) - .2rem);
    left: calc(-1 * var(--header-padding) + 2px);
    
    border-top: .8rem solid transparent;
    border-right: .8rem solid #fff;
    border-bottom: .8rem solid transparent;

    filter: drop-shadow(-2px 0 0 var(--gray-4));
  }
}

/* Mobile submenu adjustments */
[mobile-submenu-wrap] {
  & > [filter-menu] > li {
    margin-inline-start: 1.3rem;

    & > [filter-menu] {
      grid-column: 1 / -1;
      margin-inline-start: 1.3rem;
      margin-block-start: var(--filter-input-margin);
    }
  }
} 

#filter-size-wrap [wrap-menu] {
  margin-block-end: var(--filter-input-margin);
}