.connected-accounts-permissions { @include H7; display: flex; flex-direction: column; color: var(--color-text-alternative); strong { font-weight: bold; } p + p { padding-top: 8px; } &__header { @include H6; display: flex; flex-direction: row; justify-content: space-between; align-items: center; cursor: pointer; color: var(--color-text-default); button { font-size: $font-size-paragraph; background: none; padding: 0; margin-left: 8px; } } &__list { padding-top: 8px; } &__list-item { display: flex; } & &__checkbox { font-size: $font-size-h4; margin: 0 8px 0 0; } &__list-container { max-height: 0; overflow: hidden; height: auto; transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1); &--expanded { // arbitrarily set hard coded value for effect to work max-height: 100px; } } }