@use 'sass:math'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *

// Theme
.v-expansion-panel
  background-color: $expansion-panel-background-color
  color: $expansion-panel-color

  &:not(:first-child)::after
    border-color: $expansion-panel-border-color

  &--disabled
    .v-expansion-panel-title
      color: $expansion-panel-disabled-color

      .v-expansion-panel-title__overlay
        // This is multiplied by the text opacity,
        // so we need to divide it to get the desired value
        // TODO: Should disabled be part of states mixin?
        opacity: math.div($expansion-panel-disabled-overlay, $expansion-panel-disabled-opacity)

// Block
.v-expansion-panels
  display: flex
  flex-wrap: wrap
  justify-content: center
  list-style-type: none
  padding: 0
  width: 100%
  position: relative
  z-index: 1

  &:not(&--variant-accordion)
    > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
      border-bottom-left-radius: 0 !important
      border-bottom-right-radius: 0 !important

    > :not(:first-child):not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
      border-top-left-radius: 0 !important
      border-top-right-radius: 0 !important

    > :first-child:not(:last-child):not(.v-expansion-panel--active):not(.v-expansion-panel--before-active)
      border-bottom-left-radius: 0 !important
      border-bottom-right-radius: 0 !important

    > :last-child:not(:first-child):not(.v-expansion-panel--active):not(.v-expansion-panel--after-active)
      border-top-left-radius: 0 !important
      border-top-right-radius: 0 !important

  &--variant-accordion
    > :first-child
      border-bottom-left-radius: 0 !important
      border-bottom-right-radius: 0 !important

    > :last-child
      border-top-left-radius: 0 !important
      border-top-right-radius: 0 !important

      .v-expansion-panel-title--active
        border-bottom-left-radius: initial
        border-bottom-right-radius: initial

    > :not(:first-child):not(:last-child)
      border-radius: 0 !important

    .v-expansion-panel-title__overlay
      transition: 0.3s border-radius settings.$standard-easing

// Element
.v-expansion-panel
  flex: 1 0 100%
  max-width: 100%
  position: relative
  transition: .3s all settings.$standard-easing
  transition-property: margin-top, border-radius, border, max-width
  border-radius: $expansion-panel-border-radius

  &:not(:first-child)::after
    border-top-style: solid
    border-top-width: thin
    content: ''
    left: 0
    position: absolute
    right: 0
    top: 0
    transition: 0.3s opacity settings.$standard-easing

  &--disabled
    .v-expansion-panel-title
      pointer-events: none

  &--active
    &:not(:first-child),
    + .v-expansion-panel
      margin-top: $expansion-panel-active-margin

      &::after
        opacity: 0

    > .v-expansion-panel-title
      border-bottom-left-radius: 0
      border-bottom-right-radius: 0
      min-height: $expansion-panel-active-title-min-height

.v-expansion-panel__shadow
  @include tools.absolute()
  @include tools.elevation(2)
  border-radius: inherit
  z-index: -1

.v-expansion-panel-title
  align-items: center
  text-align: start
  border-radius: inherit
  display: flex
  font-size: $expansion-panel-title-font-size
  line-height: 1
  min-height: $expansion-panel-title-min-height
  outline: none
  padding: $expansion-panel-title-padding
  position: relative
  transition: .3s min-height settings.$standard-easing
  width: 100%
  justify-content: space-between
  @include tools.states('.v-expansion-panel-title__overlay', true)

  &--active::before
    opacity: 0.12

.v-expansion-panel-title__overlay
  @include tools.absolute()
  background-color: currentColor
  border-radius: inherit
  opacity: 0

.v-expansion-panel-title__icon
  display: inline-flex
  margin-bottom: -4px
  margin-top: -4px
  user-select: none
  margin-inline-start: auto

.v-expansion-panel-text
  display: flex

  &__wrapper
    padding: $expansion-panel-text-padding
    flex: 1 1 auto
    max-width: 100%

// Variants
.v-expansion-panels--variant-accordion
  > .v-expansion-panel
    margin-top: 0

    &::after
      opacity: 1

.v-expansion-panels--variant-popout
  > .v-expansion-panel
    max-width: $expansion-panel-popout-max-width

    &--active
      max-width: $expansion-panel-popout-active-max-width

.v-expansion-panels--variant-inset
  > .v-expansion-panel
    max-width: $expansion-panel-inset-max-width

    &--active
      max-width: $expansion-panel-inset-active-max-width