details
    margin-bottom 1rem

    &> summary
        list-style none

    &> summary::-webkit-details-marker
        display none

    &> summary::marker
        display none

details[open] > summary
    i.fa-chevron-right
        transform rotate(90deg)
        transition transform 0.2s ease

summary
    &:marker
        margin-right 100px

    i.fa-chevron-right
        transform rotate(0deg)
        transition transform 0.2s ease
        margin-right 1rem
        float right
        padding-top 3px

    padding 12px 16px
    cursor pointer

    &:hover
        background-color #A6A6A630

    p
        display inline-block
        margin 0
        float left

details div.content
    padding 1rem

    &>:first-child
        margin-top 0

    &>:last-child
        margin-bottom 0

details.yellow
    summary
        // border-left solid 4px #FFA930
        &:hover
            background-color #FFEE3030

    &[open] > summary
        background-color #FFEE3030

details.blue
    summary
        // border-left solid 4px #00A6FF
        &:hover
            background-color #00A6FF30

    &[open] > summary
        background-color #00A6FF30

details.green
    summary
        // border-left solid 4px #00FFA6
        &:hover
            background-color #00FFA620
    
    &[open] > summary
        background-color #00FFA620

details.red
    summary
        // border-left solid 4px #FF0000
        &:hover
            background-color #FF000020

    &[open] > summary
        background-color #FF000020

details.orange
    summary
        // border-left solid 4px #FFA930
        &:hover
            background-color #FF983020

    &[open] > summary
        background-color #FF983020

details.pink
    summary
        // border-left solid 4px #FF00FF
        &:hover
            background-color #FF00FF20

    &[open] > summary
        background-color #FF00FF20

details.cyan
    summary
        &:hover
            background-color #00FFFF20
    
    &[open] > summary
        background-color #00FFFF20

    

details.white
    summary
        // border-left solid 4px #FFFFFF
        &:hover
            background-color #FFFFFF20

    &[open] > summary
        background-color #FFFFFF20
    
details.black
    summary
        // border-left solid 4px #000000
        &:hover
            background-color #00000020
    
    &[open] > summary
        background-color #00000020

details.gray
    summary
        // border-left solid 4px #A6A6A6
        &:hover
            background-color #A6A6A620

    &[open] > summary
        background-color #A6A6A620

details.purple
    summary
        // border-left solid 4px #A763FF
        &:hover
            background-color #A763FF20

    &[open] > summary
        background-color #A763FF20

details
    summary
        // border-left solid 4px #A6A6A6
        &:hover
            background-color #A6A6A620

    &[open] > summary
        background-color #A6A6A620