@layer components {
  .sidebar__filters {
    display: flex;
    flex-direction: column;
    margin-block-end: var(--negative-block-space);

    &::details-content {
      margin-block-start: var(--block-space);
    }

    @media (width >= 860px) {
      &::details-content {
        display: block;
        block-size: auto;
        content-visibility: visible;
        opacity: 1;
      }
    }
  }

  .sidebar__toggle {
    display: flex;
    width: fit-content;
    align-items: center;
    padding: var(--block-space);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    gap: var(--inline-space-half);

    &:hover {
      box-shadow: var(--shadow);
    }

    @media (width >= 860px) {
      display: none;
    }
  }
}