details {
  summary {
    align-items: center;
    background-color: var(--summary-background-color, transparent);
    color: var(--summary-colo);
    cursor: var(--summary-cursor, pointer);
    display: var(--summary-display, inline-flex);
    font-family: var(--summary-font-family);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-line-height, 1);
    margin: var(--summary-margin, 0);
    outline: var(--summary-outline);
    outline-offset: var(--summary-outline-offset, 4px);
    padding: var(--summary-padding, 0);
    position: relative;
    text-transform: var(--summary-text-transform);
    transition: var(--summary-transition, all 200ms ease-in-out);

    &:focus {
      [data-whatintent="keyboard"] & {
        --summary-outline: 4px dashed currentColor;
      }
    }

    &::-webkit-details-marker,
    &::marker {
      content: '';
      display: none;
    }

    &::before {
      background-color: currentColor;
      content: var(--summary-before-content, '');
      display: inline-flex;
      flex: 0 0 auto;
      height: 0.75em;
      margin-right: 0.5em;
      mask-image: var(--summary-before-mask-image);
      mask-position: center;
      mask-repeat: no-repeat;
      rotate: var(--summary-before-rotate);
      transition: transform 200ms ease-in-out;
      width: 0.75em;
    }
  }

  &[open] {
    --summary-before-rotate: var(--summary-before-rotate-open);
    --summary-margin: var(--summary-margin-open);
  }
}
