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

@include tools.layer('components')
  .v-infinite-scroll--horizontal
    display: flex
    flex-direction: row
    overflow-x: auto

    .v-infinite-scroll-intersect
      height: 100%
      width: var(--v-infinite-margin-size, 1px)

  .v-infinite-scroll--vertical
    display: flex
    flex-direction: column
    overflow-y: auto

    .v-infinite-scroll-intersect
      height: 1px
      width: 100%

  .v-infinite-scroll-intersect
    overflow: hidden
    pointer-events: none
    margin-top: var(--v-infinite-margin)
    margin-bottom: calc(var(--v-infinite-margin) * -1)

    &:nth-child(2) // TODO: "1 of &" would be more stable if structure changes
      --v-infinite-margin: var(--v-infinite-margin-size, 1px)
    &:nth-last-child(2)
      --v-infinite-margin: calc(var(--v-infinite-margin-size, 1px) * -1)

  .v-infinite-scroll__side
    align-items: center
    display: flex
    justify-content: center
    padding: $infinite-scroll-side-padding
    transition-property: padding
    transition-duration: settings.$transition-duration-root
    transition-timing-function: settings.$standard-easing

    &:empty,
    &:has(> div:only-child:empty)
      padding: 0