ui/src/widgets/accordion.scss

// Copyright (C) 2026 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.pf-accordion {
  display: flex;
  flex-direction: column;
}

.pf-accordion__item {
  > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    cursor: pointer;
    background: var(--pf-color-background-secondary);
    position: sticky;
    top: 0;
    z-index: 1;

    &:hover {
      background: color_hover(transparent);
    }

    // Remove the default WebKit disclosure triangle.
    &::-webkit-details-marker {
      display: none;
    }

    &:focus-visible {
      outline: 2px solid var(--pf-color-accent);
      outline-offset: -2px;
    }
  }

  &[open] > summary {
    background: var(--pf-color-background-tertiary);

    .pf-accordion__toggle {
      transform: rotate(0deg);
    }
  }

  &:not([open]) > summary {
    .pf-accordion__toggle {
      transform: rotate(-90deg);
    }
  }

  &::details-content {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition:
      height 0.2s ease,
      opacity 0.2s ease,
      content-visibility 0.2s allow-discrete;
  }

  &[open]::details-content {
    opacity: 1;
    height: auto;
  }
}

:root {
  interpolate-size: allow-keywords;
}

.pf-accordion__toggle {
  color: var(--pf-color-text-muted);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.pf-accordion__header-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-accordion__content {
  padding: 8px 16px 16px 16px;
  background: var(--pf-color-background);
}