@import '../../../utils'

#root[data-popup-color-scheme="dark"]
  --windows-popup-window-border: var(--s-popup-border, #ffffff16)
#root[data-popup-color-scheme="light"]
  --windows-popup-window-border: var(--s-popup-border, #00000016)

.WindowsPopup .list
  position: relative
  display: flex
  flex-direction: column
  min-height: 128px
  overflow: hidden

.WindowsPopup .scrollable
  padding-bottom: 8px

// ---
// -- Window container
// -
.WindowsPopup .box
  position: relative
  padding: 8px 6px 0
  opacity: 0
  transform: translateY(16px)
  transition: opacity var(--d-fast), transform var(--d-fast)
  &:before
    content: ''
    position: absolute
    top: 4px
    left: 2px
    width: calc(100% - 4px)
    height: 100%
    border-radius: 4px
    background-color: var(--frame-fg)
    opacity: 0
  &:hover:before
    opacity: .2
  &:active
    opacity: .16

.WindowsPopup[data-ready="true"]
  .box
    opacity: 1
    transform: translateY(0)
  .box:nth-child(1)
    transition: opacity var(--d-fast), transform var(--d-fast)
  .box:nth-child(2)
    transition: opacity var(--d-fast) .1s, transform var(--d-fast) .1s
  .box:nth-child(3)
    transition: opacity var(--d-fast) .2s, transform var(--d-fast) .2s
  .box:nth-child(4)
    transition: opacity var(--d-fast) .3s, transform var(--d-fast) .3s
  .box:nth-child(5)
    transition: opacity var(--d-fast) .4s, transform var(--d-fast) .4s

// ---
// -- Window
// -
.WindowsPopup .win
  position: relative
  width: 100%
  max-height: 240px
  border-radius: 4px
  overflow: hidden
  box-shadow: 0 0 0 1px var(--windows-popup-window-border)
.WindowsPopup .box[data-selected="true"] .win
  box-shadow: 0 0 0 1px var(--status-active), 0 2px 8px 0 #00000032
  opacity: 1

// ---
// -- Window title
// -
.WindowsPopup .window-title
  position: relative
  font-size: rem(13)
  color: var(--popup-fg)
  padding: 2px 3px 2px 6px
  margin: 0 0 1px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  background-color: var(--popup-bg)
  box-shadow: 0 1px 0 0 var(--windows-popup-window-border)
.WindowsPopup .box[data-no-screenshot="true"] .window-title
  font-size: rem(14)
  padding: 6px 8px
  margin: 0
  box-shadow: none
.WindowsPopup .box:hover .window-title
  opacity: .9


// ---
// -- Window screenshot
// -
.WindowsPopup .win > img
  position: relative
  display: block
  width: 100%
  max-width: 100%
  margin: 0
  padding: 0
.WindowsPopup .box:hover img
  opacity: .9
