.item {
  & .summary {
    --el-summary-marker-symbol-closed: "▾";
    --el-summary-marker-symbol-open: "▾";
    --el-summary-marker-symbol-transform-open: rotate(180deg);

    position: relative;

    padding: var(--spacing-snug);

    font-family: var(--el-summary-font-family);
    font-size: var(--el-summary-font-size);
    font-weight: var(--el-summary-font-weight);
    line-height: var(--el-summary-line-height);
    color: var(--el-summary-fg);
    text-transform: var(--el-summary-text-transform);
    list-style: none;

    background: var(--el-summary-bg);

    &::before {
      content: var(--el-summary-marker-symbol-closed);

      position: absolute;
      right: 0;

      font-size: 1em;

      transition: transform 0.2s ease;
    }
  }

  & .content {
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 2s ease;

    & .inner {
      min-height: 0;
    }
  }

  &[open] {
    & .summary {
      &::before {
        content: var(--el-summary-marker-symbol-open);
        transform: var(--el-summary-marker-symbol-transform-open);
      }
    }

    & .content {
      grid-template-rows: 1fr;
    }
  }
}