.root
    width: var(--width-container)
    max-width: 100%
    padding: 1rem 2rem
    border: 1px solid var(--color-subtle-medium)
    border-radius: var(--border-radius)
    margin: 0 auto 2rem
    position: relative
    background: var(--color-back)

.wide
    width: 95%

.expanded
    box-shadow: 0 0 10px var(--color-subtle-medium)

.completed
    color: var(--color-subtle-dark)
    background: var(--color-subtle-light)

.title
    cursor: pointer
    user-select: none
    font-size: var(--font-size-lg)
    font-family: var(--font-display)

.id
    background: var(--color-theme)
    color: var(--color-theme-contrast)
    font-size: 0.8em
    width: 1.75em
    height: 1.75em
    display: inline-flex
    border-radius: 50%
    justify-content: center
    align-items: center
    margin-right: 1rem

.id-completed
    background: var(--color-button-primary)
    color: var(--color-button-primary-contrast)

.title-expanded
    margin-bottom: 3rem

.icon
    float: right
    vertical-align: middle
    color: var(--color-subtle-dark)

    & + &
        margin-right: 1.5rem

.content
    visibility: hidden
    height: 0
    opacity: 0
    z-index: 0
    overflow: hidden

.footer
    width: 100%
    text-align: right
    margin-top: 1rem
    margin-bottom: 1rem

.button
    cursor: pointer
    border: 0
    background: var(--color-theme)
    color: var(--color-theme-contrast)
    padding: 0.75rem 1rem
    font-family: var(--font-primary)
    font-size: var(--font-size-sm)
    font-weight: bold
    border-radius: var(--border-radius)
