@import '../bootstrap'
@import '../theme'

/** Theme */
expansion-panel($material)
  .expansion-panel__container
    border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
    background-color: $material.cards
    color: $material.text.primary

    .expansion-panel__header
      .icon
        color: $material.icons.active

  &--focusable
    .expansion-panel__container
      &:focus
        background-color: $material.expansion-panels.focus

theme(expansion-panel, "expansion-panel")

.expansion-panel
  display: flex
  flex-wrap: wrap
  justify-content: center
  list-style-type: none
  padding: 0
  text-align: left
  width: 100%
  elevation(1)

  &__container
    flex: 1 0 100%
    max-width: 100%
    outline: none
    transition: .3s $transition.swing

    &:first-child
      border-top: none !important

    .header__icon
      margin-left: auto

      .icon
        // Edge rendering issue TODO: revisit later
        transition: none

    &--active
      > .expansion-panel__header
        .header__icon .icon
          transform: rotate(-180deg)

  &__header
    display: flex
    cursor: pointer
    align-items: center
    position: relative
    padding: 12px 24px

    > *:not(.header__icon)
      flex: 1 1 auto

  &__body
    transition: $primary-transition

    .card
      border-radius: 0
      elevation(0)

  &--popout, &--inset
    elevation(0)

    .expansion-panel__container--active
      margin: $spacers.three.x
      elevation(3)

  &--popout, &--inset
    .expansion-panel__container
      max-width: 95%

  &--popout
    .expansion-panel__container--active
      max-width: 100%

  &--inset
    .expansion-panel__container--active
      max-width: 85%