/**
 * archive-filters.css
 */

/* Component: Filters and the clear link, on the left of the archive filters bar */
.archive-filter-group {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-width: 0;
}

/* Component: Filter dropdowns */
.archive-filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.archive-filter {
  position: relative;

  /* The toggle looks like the sort select. */
  .archive-filter-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 36px 12px 16px;
    border: 1px solid var(--color-grey-light);
    border-radius: var(--border-radius-default);
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family-base);
    font-size: var(--font-size-medium);
    line-height: normal;
    list-style: none;
    transition: border 0.2s ease-out;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }

    /* Chevron: a summary has no arrow background of its own. */
    &::after {
      content: '';
      position: absolute;
      right: 10px;
      top: 50%;
      width: 16px;
      height: 16px;
      transform: translateY(-50%) rotate(90deg);
      background-image: url('../../images/icons/icon-chevron-right-48x48.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      pointer-events: none;
    }

    &:hover,
    &:focus {
      border-color: var(--color-black);
    }

    /* Toggle: Restore native focus ring */
    &:focus-visible {
      outline: revert !important;
    }
  }

  &[open] .archive-filter-toggle::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  /* Filter: a value is selected. */
  &.has-selection .archive-filter-toggle {
    border-color: var(--color-primary);
    outline: 3px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  }

  /* Filter: nothing left to choose under the other selections. */
  &.is-disabled .archive-filter-toggle {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
  }

  /* Badge: the selected count, drawn like the header's cart count. */
  .archive-filter-selected {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    line-height: 16px;
    text-align: center;
  }
}

/* Component: Filter options, a select-like list of rows under the toggle */
.archive-filter-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  min-width: max(100%, 220px);
  width: max-content;
  max-width: 360px;

  /* Scrolls after seven and a half rows, so a half cut row hints at more below. */
  --filter-row-height: 44px;
  max-height: calc(var(--filter-row-height) * 7.5 + 8px);
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--border-radius-default);
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);

  /* Option: one row, the AND or OR indicator first. */
  .archive-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: var(--filter-row-height);
    padding: 5px 10px;
    border-radius: 6px;
    color: var(--color-black);
    font-size: var(--font-size-medium);
    text-decoration: none;
    transition: background-color 0.2s ease-out;

    &:is(a):hover,
    &:is(a):focus-visible {
      background-color: var(--color-white-dark);
    }

    /* Option: nothing left to match with the current selection. */
    &.is-disabled {
      opacity: 0.45;
      cursor: default;
    }
  }

  /* Indicator: a square checkbox for AND, a round radio for OR. */
  .archive-filter-check {
    position: relative;
    flex: 0 0 18px;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-grey);
    border-radius: 3px;
    background: var(--color-white);
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
  }

  &.is-or .archive-filter-check {
    border-radius: 50%;
  }

  .archive-filter-option:is(a):hover .archive-filter-check,
  .archive-filter-option:is(a):focus-visible .archive-filter-check {
    border-color: var(--color-black);
  }

  .archive-filter-option.is-selected .archive-filter-check {
    border-color: var(--color-primary);
  }

  /* Checkbox: filled, with a tick. */
  &.is-and .archive-filter-option.is-selected .archive-filter-check {
    background: var(--color-primary);

    &::after {
      content: '';
      position: absolute;
      inset: 2px;
      background: var(--color-white);
      mask: url('../../images/icons/icon-check-48x48.png') no-repeat center / contain;
      -webkit-mask: url('../../images/icons/icon-check-48x48.png') no-repeat center / contain;
    }
  }

  /* Radio: outlined, with a dot. */
  &.is-or .archive-filter-option.is-selected .archive-filter-check::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-primary);
  }

  .archive-filter-name {
    flex: 1 1 auto;
    white-space: nowrap;
  }

  .archive-filter-num {
    margin-left: auto;
    padding-left: 20px;
    color: var(--color-grey);
    font-size: var(--font-size-small);
  }

  /* Swatch: the term's color or image, between the indicator and the name. */
  .archive-filter-swatch {
    display: block;
    flex: 0 0 24px;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border: 1px solid var(--color-grey-light);
    border-radius: 50%;
    background: var(--swatch, var(--color-white));

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* Component: Range filter, a two thumb slider in the dropdown */
.archive-filter-range {
  --range-thumb: 18px;
  --range-low: 0%;
  --range-high: 100%;
  min-width: max(100%, 260px);
  padding: 16px 20px 20px;
  overflow: visible;

  .archive-filter-range-readout {
    display: flex;
    gap: 0.35em;
    margin: 0 0 12px;
    color: var(--color-black);
    font-size: var(--font-size-medium);
  }

  /* Track and its filled part, the thumbs sit on top of it. */
  .archive-filter-range-slider {
    position: relative;
    height: var(--range-thumb);
    margin: 0 calc(var(--range-thumb) / 2);

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      height: 4px;
      margin-top: -2px;
      border-radius: 2px;
    }

    /* The grey track runs the full width, the thumbs travel between its half thumb insets. */
    &::before {
      left: calc(var(--range-thumb) / -2);
      right: calc(var(--range-thumb) / -2);
      background: var(--color-grey-light);
    }

    &::after {
      left: var(--range-low);
      right: calc(100% - var(--range-high));
      background: var(--color-primary);
    }
  }

  /* Both inputs overlap, only their thumbs take the pointer. */
  .archive-filter-range-input {
    position: absolute;
    top: 0;
    left: calc(var(--range-thumb) / -2);
    width: calc(100% + var(--range-thumb));
    height: var(--range-thumb);
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1;

    &.is-front {
      z-index: 2;
    }

    &::-webkit-slider-runnable-track {
      height: var(--range-thumb);
      background: transparent;
    }

    &::-moz-range-track {
      background: transparent;
    }

    /* Thumb: an outlined circle like the OR radio, without its dot. */
    &::-webkit-slider-thumb {
      box-sizing: border-box;
      width: var(--range-thumb);
      height: var(--range-thumb);
      border: 1px solid var(--color-primary);
      border-radius: 50%;
      background: var(--color-white);
      pointer-events: auto;
      cursor: pointer;
      transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
      -webkit-appearance: none;
      appearance: none;
    }

    &::-moz-range-thumb {
      box-sizing: border-box;
      width: var(--range-thumb);
      height: var(--range-thumb);
      border: 1px solid var(--color-primary);
      border-radius: 50%;
      background: var(--color-white);
      pointer-events: auto;
      cursor: pointer;
      transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
    }

    /* Hover and drag: the border turns black, like a radio row under the pointer. */
    &:hover::-webkit-slider-thumb,
    &:active::-webkit-slider-thumb {
      border-color: var(--color-black);
    }

    &:hover::-moz-range-thumb,
    &:active::-moz-range-thumb {
      border-color: var(--color-black);
    }

    /* Keyboard focus only: the thumb fills with the primary color. After hover, so it wins. */
    &:focus-visible::-webkit-slider-thumb {
      border-color: var(--color-primary);
      background: var(--color-primary);
    }

    &:focus-visible::-moz-range-thumb {
      border-color: var(--color-primary);
      background: var(--color-primary);
    }
  }

  /* Without JavaScript: two number fields and an apply button. */
  .archive-filter-range-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;

    &[hidden] {
      display: none;
    }

    label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      color: var(--color-grey-dark);
      font-size: var(--font-size-small);
    }

    input[type='number'] {
      box-sizing: border-box;
      width: 80px;
      padding: 8px;
      border: 1px solid var(--color-grey-light);
      border-radius: var(--border-radius-default);
      font-family: var(--font-family-base);
      font-size: var(--font-size-medium);
    }
  }

  /* Apply: the no JavaScript form's button, and the one a keyboard change reveals. */
  .archive-filter-range-commit {
    margin-top: 16px;
  }

  .archive-filter-range-apply,
  .archive-filter-range-commit {
    padding: 9px 14px;
    border: 1px solid var(--color-black);
    border-radius: var(--border-radius-default);
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-family-base);
    font-size: var(--font-size-medium);
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;

    &:hover,
    &:active,
    &:focus-visible {
      border-color: var(--color-primary);
      background: var(--color-primary);
      color: var(--color-white);
    }
  }
}

/* Link: Clear the selected filters, styled like the result count */
.archive-filter-clear {
  color: var(--color-grey-dark);
  font-size: var(--font-size-medium);
  text-decoration: underline;
  white-space: nowrap;
  transition: color 0.2s ease-out;

  &:hover,
  &:focus-visible {
    color: var(--color-black);
  }
}

/* Mobile: Archive Filters */
@media (max-width: 768px) {
  /* Dropdowns take the first row, the clear link wraps below. */
  .archive-filter-group {
    flex: 0 0 100%;
  }

  .archive-filter-list {
    position: relative;
    flex: 0 0 100%;
  }

  /* The dropdown spans the list, so it stays on screen. */
  .archive-filter {
    position: static;

    .archive-filter-options {
      right: 0;
      width: auto;
      max-width: none;
    }
  }
}