@use '../../styles/tools'
@use './variables' as *

@include tools.layer('components')
  .v-pie
    display: grid
    align-items: center
    column-gap: 24px
    --v-pie-size: 250px

    &--legend
      &-top
        grid-template-areas: 'title' 'legend' 'content'
        grid-template-columns: var(--v-pie-size)
      &-bottom
        grid-template-areas: 'title' 'content' 'legend'
        grid-template-columns: var(--v-pie-size)
      &-right
        grid-template-areas: 'title .' 'content legend'
      &-left
        grid-template-areas: '. title' 'legend content'
      &-hidden
        grid-template-areas: 'title' 'content'

    &__title
      grid-area: title
      text-align: center
      padding-bottom: $pie-title-padding-bottom

    &__content
      grid-area: content
      position: relative
      width: var(--v-pie-size)
      height: var(--v-pie-size)

      &:is(&)
        // expected to get bg-* class for text color
        // actual background is applied to underlay
        background: none !important

      .v-overlay
        .v-overlay__scrim,
        .v-overlay__content
          pointer-events: none !important

    &__segments
      border-radius: 50%

    &__content-underlay
      border-radius: 50%
      position: absolute
      inset: $pie-underlay-inset
      pointer-events: none
      z-index: -1

    &__center-content
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      pointer-events: none

      > div
        pointer-events: auto

    &__legend
      grid-area: legend
      padding-block: $pie-legend-padding-block

      .v-avatar
        border: $pie-legend-avatar-border

      .v-chip__content
        width: 100%

      .v-chip-group .v-chip:not(.v-chip--selected)
        opacity: $pie-legend-chip-disabled-opacity

      &__text
        font-size: $pie-legend-chip-default-font-size
        white-space: nowrap
        width: 100%

        .v-chip--density-compact &
          font-size: $pie-legend-chip-compact-font-size

    .v-chip.v-chip--density-comfortable .v-avatar--start
      margin-inline-start: -6px

    .v-chip.v-chip--density-default .v-avatar--start
      margin-inline-start: -4px

    &-segment
      pointer-events: none
      position: absolute
      inset: 0

      .v-pie-segment__overlay
        pointer-events: auto
        opacity: 0

    &__tooltip-content
      .v-list-item
        padding-inline: 0
        min-width: $pie-tooltip-min-width
        zoom: 0.88

      .v-list-item-subtitle
        opacity: 1

      .v-avatar
        border: $pie-tooltip-avatar-border