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

@include tools.layer('components')
  // 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
    border-radius: $expansion-panel-border-radius

    @include tools.layer('overrides')
      > :first-child
        border-top-left-radius: inherit
        border-top-right-radius: inherit

      > :last-child
        border-bottom-left-radius: inherit
        border-bottom-right-radius: inherit

      &:not(&--variant-accordion)
        > .v-expansion-panel--active
          border-radius: inherit

        > .v-expansion-panel--before-active
          border-bottom-left-radius: inherit
          border-bottom-right-radius: inherit

        > .v-expansion-panel--after-active
          border-top-left-radius: inherit
          border-top-right-radius: inherit

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

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

      &--variant-accordion
        > :first-child:not(:last-child)
          border-bottom-left-radius: 0
          border-bottom-right-radius: 0

        > :last-child:not(:first-child)
          border-top-left-radius: 0
          border-top-right-radius: 0

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

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

    &--variant-accordion
      .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

    @media (prefers-reduced-motion: reduce)
      transition-property: border-radius, border

    &: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

        &:not(.v-expansion-panel-title--static)
          min-height: $expansion-panel-active-title-min-height

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

  .v-expansion-panel-title
    background-color: transparent
    border: none
    margin: 0
    appearance: none
    align-items: center
    text-align: start
    border-radius: inherit
    display: flex
    font: inherit
    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
    width: 100%
    justify-content: space-between

    @media (prefers-reduced-motion: no-preference)
      transition: .3s min-height settings.$standard-easing

    @include tools.states('.v-expansion-panel-title__overlay', false)

    &--focusable.v-expansion-panel-title--active
      @include tools.active-states('.v-expansion-panel-title__overlay')

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

  .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

  .v-expansion-panels--flat
    > .v-expansion-panel
      &::after
        border-top: none

      .v-expansion-panel__shadow
        display: none

  .v-expansion-panels--tile
    border-radius: 0

    > .v-expansion-panel
      border-radius: 0