_list.sass

.selective__field__type__list
  > .selective__field__header
    align-items: center
    display: flex
    flex-flow: row-reverse

    .selective__field__label
      flex-grow: 1
      margin: $le-space-small 0

  > .selective__field__footer
    margin-top: $le-space-small

    button
      +button
      +button-outline
      +button-tertiary

    .selective__action--add
      +field-action-icon

.selective__list__item
  align-items: center
  display: flex
  flex-flow: row

  > .selective__list__fields__header .selective__field__actions,
  > .selective__field__actions
    column-gap: $le-space-small

    &--pre
      margin-left: $le-space-small
      margin-right: $le-space-small

    &--post
      margin-left: $le-space-small
      margin-right: $le-space-small

    .selective__list__item__drag
      cursor: grab

      .material-icons
        padding-left: 0
        padding-right: 0

    .selective__field__action
      +clickable

    .material-icons
      padding: $le-space-small

    > .selective__list__item__index
      aspect-ratio: 1
      border: $le-border-size-medium solid var(--color-tertiary)
      border-radius: 50%
      display: inline-block
      padding: $le-space-small
      text-align: center
      width: $le-space-large

  > .selective__field
    flex-grow: 1
    margin: $le-space-small 0

  > .selective__list__fields__header > .selective__list__item__preview,
  > .selective__list__item__preview
    flex-grow: 1
    overflow: hidden
    padding: $le-space-medium 0
    text-overflow: ellipsis
    white-space: nowrap

    img
      max-height: $le-space-xxlarge
      max-width: 100%

  &:not(.selective__list__item--simple):not(.selective__list__item--empty)
    border: $le-border-size-medium solid var(--color-tertiary)
    border-radius: $le-radius-small
    margin-bottom: $le-space-small

    &:hover
      border-color: var(--color-tertiary-dark)
      box-shadow: $le-shadow-small

    &:last-child
      margin-bottom: 0

  &--simple
    > .selective__field__actions
      &--pre
          .material-icons
            padding-left: 0
            padding-right: 0

  &--empty
    padding: $le-space-medium 0

  &--collapsed
    > .selective__list__item__preview
      +clickable
      padding: $le-space-medium 0

  &--expanded
    align-items: stretch
    flex-flow: column

    > .selective__list__fields__header
      +clickable
      align-items: center
      background: var(--color-tertiary)
      color: var(--color-on-tertiary)
      display: flex
      flex-flow: row
      font-weight: var(--font-weight-bold)
      position: sticky
      top: 0
      z-index: 1

      img
        max-height: $le-space-xlarge
        max-width: 100%

    > .selective__list__fields
      padding: $le-space-medium

  &.selective__sortable--hover
    *
      pointer-events: none

    &.selective__sortable--above
      box-shadow: 0 -1 * $le-border-size-xlarge 0 0 var(--color-primary-light)

    &.selective__sortable--below
      box-shadow: 0 $le-border-size-xlarge 0 0 var(--color-primary-light)