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

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

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

    &--disabled
      color: $material.text.disabled

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

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

.v-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

    .v-expansion-panel__header__iconnel__header__icon
      margin-left: auto

    &--disabled
      .v-expansion-panel__header
        pointer-events: none

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

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

    > *:not(.v-expansion-panel__header__icon)
      flex: 1 1 auto

  &__body
    transition: $primary-transition

    > .v-card
      border-radius: 0
      elevation(0, true)

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

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

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

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

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