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

@include tools.layer('components')
  // Block
  .v-overlay-container
    contain: layout
    left: 0
    pointer-events: none
    position: absolute
    top: 0
    display: contents

  .v-overlay
    --v-overlay-opacity: #{$overlay-opacity}
    border-radius: inherit
    display: flex
    left: 0
    pointer-events: none
    position: fixed
    top: 0
    bottom: 0
    right: 0

  // Element
  .v-overlay__content
    outline: none
    position: absolute
    pointer-events: auto
    contain: layout

  .v-overlay__scrim
    pointer-events: auto
    background: $overlay-scrim-background
    border-radius: inherit
    bottom: 0
    left: 0
    opacity: var(--v-overlay-opacity)
    position: fixed
    right: 0
    top: 0

  // Modifier
  .v-overlay--absolute
    position: absolute

  .v-overlay--contained .v-overlay__scrim
    position: absolute

  .v-overlay--scroll-blocked
    padding-inline-end: var(--v-scrollbar-offset)

@include tools.layer('trumps')
  .v-overlay-scroll-blocked
    padding-inline-end: var(--v-scrollbar-offset)

    &:not(html)
      overflow-y: hidden

    @at-root #{selector.append(html, &)}
      position: fixed
      top: var(--v-body-scroll-y)
      left: var(--v-body-scroll-x)
      width: 100%
      height: 100%

    .v-navigation-drawer--right.v-navigation-drawer--active
      margin-right: var(--v-scrollbar-offset)