details {
  summary {
    align-items: center;
    background-color: var(--summary-background-color);
    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);

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

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

    &:hover,
    &:focus {
      color: var(--summary-color-hover, var(--summary-color));
    }
  }

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