.accordion {
  color: var(--c-foreground, #09090b);
  position: relative;

  &:not(:first-child) {
    margin-top: 1rem;
  }

  .title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border: 1px solid var(--c-border, #e4e4e7);
    border-radius: 5px;

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

    &::after {
      width: 6px;
      height: 6px;
      content: "";
      border-right: 2px solid var(--c-muted-foreground, #71717b);
      border-bottom: 2px solid var(--c-muted-foreground, #71717b);
      transition: transform 0.3s;
      transform: translateY(-20%) rotate(45deg);
    }
  }

  &::details-content {
    transition: opacity 0.5s allow-discrete;
    opacity: 0;
  }

  &[open] .title::after {
    transform: translateY(20%) rotate(225deg);
  }

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

  & .content {
    position: relative;
    background-color: var(--c-secondary, #f4f4f5);
    padding: 0.8rem 1rem;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    border-radius: 5px;

    &::after {
      position: absolute;
      top: -16px;
      left: 1rem;
      width: 30px;
      height: 16px;
      clip-path: polygon(50% 0, 0 100%, 100% 100%);
      content: "";
      background-color: var(--c-secondary, #f4f4f5);
    }
  }
}

Accordion with speech bubble

Other Accordions UI parts

Triangle icon + Accordion with outline

Triangle icon + Accordion with background color

Triangle icon + Accordion with bottom line

Other CSS UI parts

Accordions

Balloons

Boxes

Breadcrumbs

Buttons

Checkboxes

Headings and Texts

Icons

Lists

Paginations

Quotations

Read More

Search Forms

Select Boxes

Switches

Tabs

Text Boxes

Tooltips

Stack Layouts

Standard Layout

Headers