details {
    display: block;
    margin-bottom: var(--spacing);
    padding-bottom: calc(var(--spacing) / 2);
    border-bottom: var(--border-width) solid var(--accordion-border-color);
  
    summary {
        color: var(--accordion-close-summary-color);
        line-height: 1rem;
        list-style-type: none;
        list-style-type: none;
        cursor: pointer;
        @if $enable-transitions {
            transition: color var(--transition);
        }
  
        &::-webkit-details-marker {
            display: none;
        }
  
        &::marker {
            display: none;
        }
  
        &::-moz-list-bullet {
            list-style-type: none;
        }
  
        &::after {
            content: '';
            display: inline-block;
            width: 1rem;
            height: 1rem;
            float: right;
            transform: rotate(-90deg);
            background-image: var(--icon-chevron);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 1rem auto;
            transition: transform var(--transition);
        }
  
        &:focus {
            outline: none;
            color: var(--accordion-active-summary-color);
        }
  
        ~ * {
            margin-top: calc(var(--spacing) / 2);
  
            ~ * {
                margin-top: 0;
            }
        }
    }
  
    &[open] {
        > summary {
            margin-bottom: calc(var(--spacing) / 4);
  
            &:not(:focus) {
                color: var(--accordion-open-summary-color);
            }

            &::after {
              transform: rotate(0);
            }
        }
    }
}