/* Categories panel on the items screen (gear/categories/_category_panel) */
/* ==================================================================== */
/*
  A drawer from the left under the sticky header, or a bottom sheet on a phone, shown with
  .category-panel--open. From 992px it can be pinned open beside the page instead
  (.category-panel--pinned), and the page moves over to make room for it - the 992px is
  shared with category_panel_controller.js. --category-panel-top is the header's height,
  kept up to date by the controller.
*/
:root {
  --category-panel-width: 16rem;
}

.category-panel {
  position: fixed;
  z-index: 2;
  top: var(--category-panel-top, 0);
  bottom: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  width: var(--category-panel-width);

  border-right: var(--bs-border-width) solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  box-shadow: var(--bs-box-shadow);

  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;

  &:focus {
    outline: none;
  }

  &.category-panel--open {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }

  /* A phone: a sheet up from the bottom, across the whole width */
  @media (width < 768px) {
    top: auto;
    right: 0;

    width: auto;
    max-height: 70dvh;

    border-right: 0;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;

    transform: translateY(100%);
  }

  @media (width >= 992px) {
    &.category-panel--pinned {
      transform: none;
      visibility: visible;
      box-shadow: none;
      transition: none;
    }
  }
}

.category-panel__backdrop {
  position: fixed;
  z-index: 1;
  inset: 0;

  background-color: rgb(0 0 0 / 0.35);
}

/* The page makes room for a pinned panel */
@media (width >= 992px) {
  body.category-panel-pinned #page_content {
    margin-left: var(--category-panel-width);
  }
}

.category-panel__header {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  padding: 0.5rem 0.5rem 0.5rem 1rem;

  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.category-panel__heading {
  flex: 1 1 auto;
  margin: 0;

  font-size: 1rem;
  font-weight: 600;
}

.category-panel__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;
  padding: 0;

  border: 0;
  border-radius: var(--bs-border-radius);
  background: none;

  color: var(--bs-secondary-color);

  &:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
  }

  &[aria-pressed="true"] {
    color: var(--bs-primary);
  }
}

/* Pinning needs the room beside the page - not offered below that */
.category-panel__pin {
  @media (width < 992px) {
    display: none;
  }
}

/* Pinned open, the panel has nothing to close - the pin takes it away */
@media (width >= 992px) {
  .category-panel--pinned .category-panel__close {
    display: none;
  }
}

.category-panel__body {
  flex: 1 1 auto;
  min-height: 0;

  padding: 0.5rem;

  overflow-y: auto;
  overscroll-behavior: contain;
}

.category-panel__list {
  display: flex;
  flex-direction: column;
  row-gap: 0.125rem;

  margin: 0;
  padding: 0;

  list-style: none;
}

.category-panel__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.375rem 0.5rem;

  border-radius: var(--bs-border-radius);

  color: var(--bs-body-color);
  text-decoration: none;

  &:hover {
    background-color: var(--bs-secondary-bg);
  }

  &[aria-current="true"] {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
  }

  /* The category card's prefix chip, at a size that suits a list row */
  .category-card__prefix {
    font-size: 0.75rem;
  }
}

.category-panel__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.category-panel__empty {
  margin: 0;
  padding: 1rem;

  color: var(--bs-secondary-color);
}