@import '../../../utils'
@import '../vars'
@import '../btn'

#root
  --proxy-bg: var(--s-popup-bg, var(--frame-bg))
  --proxy-fg: var(--s-popup-fg, var(--frame-fg))
  --btn-fg: var(--proxy-fg)

html
  position: relative

body
  position: relative
  display: flex
  box-sizing: border-box
  width: 320px
  font-family: sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  margin: 0
  padding: 0
  flex-direction: column
  justify-content: space-between
  align-items: center
  background-color: var(--proxy-bg)
  overflow: hidden
  color-scheme: light dark

header
  position: relative

  h2
    position: relative
    font-size: rem(24)
    font-weight: 700
    padding: 16px 16px 24px
    margin: 0
    text-align: center
    color: var(--proxy-fg)

main
  position: relative
  display: flex
  width: 100%
  flex-direction: column
  justify-content: center
  align-items: center

  .gap
    position: relative
    height: 16px

  .field
    position: relative
    display: flex
    width: calc(100% - 32px)
    justify-content: space-between
    align-items: center
    padding: 3px 16px
    grid-gap: 16px
    overflow: hidden

  .label
    position: relative
    width: calc(50% - 8px)
    font-size: rem(15)
    font-weight: 700
    color: var(--proxy-fg)
    overflow: hidden
    text-overflow: ellipsis
    text-align: right
    white-space: nowrap
    opacity: .7

  .value
    position: relative
    width: calc(50% - 8px)
    font-size: rem(14)
    color: var(--proxy-fg)
    white-space: nowrap
    overflow-x: auto
    scrollbar-width: none

  .ctrls
    position: relative
    display: flex
    width: 100%
    margin: 32px 0 24px
    grid-gap: 16px
    .btn-box
      position: relative
      display: flex
      width: 50%
    .btn-box:first-of-type
      justify-content: flex-end

body.-loading
  cursor: progress

body.-loading .-animate:nth-child(n+1)
  animation: checking 1s infinite
body.-loading .-animate:nth-child(n+2)
  animation: checking 1s .1s infinite

footer
  position: relative
  display: flex
  margin: 0 auto
  padding: 16px 0
  justify-content: center
  align-items: center
  overflow: hidden

  .logo
    position: relative
    width: 36px
    height: 36px
    fill: #646464
    cursor: default
    opacity: .24

@keyframes checking
  0%
    opacity: 1
  50%
    opacity: .3
  100%
    opacity: 1
