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

.Settings
  position: relative
  width: 100%
  height: 100%
  overflow-y: auto
  scrollbar-color: var(--scrollbar-color) #0000

.Settings .wrapper
  position: relative
  width: 100%

.Settings section
  position: relative
  display: grid
  width: calc(100% - 16px)
  max-width: 640px
  padding: 2px 8px 50px
  margin: 0 auto

.Settings section > h2
  position: sticky
  top: 0
  display: flex
  width: 100%
  height: 34px
  font-size: rem(28)
  font-weight: 700
  justify-content: flex-start
  align-items: flex-end
  color: var(--toolbar-fg)
  text-align: center
  margin: 20px 16px 20px 0
  padding: 8px 0 4px
  z-index: 10
  &:after
    content: ''
    position: absolute
    top: 0
    left: -8px
    width: calc(100% + 16px)
    height: 50px
    background-color: var(--frame-bg)
    z-index: -1

.Settings section > .header-shadow
  position: sticky
  display: block
  top: 66px
  width: 100%
  height: 0
  z-index: 7

.Settings section > .header-shadow:before
  content: ''
  position: absolute
  bottom: 16px
  left: -8px
  width: calc(100% + 16px)
  height: 50px

#root[data-toolbar-color-scheme="light"] .Settings section > .header-shadow:before
  box-shadow: 0 8px 8px -10px #00000036
#root[data-toolbar-color-scheme="dark"] .Settings section > .header-shadow:before
  box-shadow: 0 10px 8px -10px var(--frame-bg)

.Settings .title-note
  position: relative
  width: 0
  font-size: rem(16)
  color: var(--toolbar-fg)
  text-align: center
  white-space: pre
  opacity: .7

.Settings .sub-title
  position: sticky
  top: 45px
  margin: 40px 8px 16px 2px
  color: var(--toolbar-fg)
  font-size: rem(20)
  font-weight: 700
  z-index: 8
  &:before
    content: ''
    position: absolute
    top: 0
    left: -16px
    width: calc(100% + 32px)
    height: 100%
    background-color: var(--frame-bg)
    z-index: -1
#root[data-toolbar-color-scheme="light"] .Settings .sub-title:before
  box-shadow: 0 8px 8px -10px #00000036
#root[data-toolbar-color-scheme="dark"] .Settings .sub-title:before
  box-shadow: 0 10px 8px -10px var(--frame-bg)

.Settings .sub-title .text
  position: relative
  padding: 2px 0 6px 0
  opacity: .9
  z-index: 1

.Settings .IconSelectField > .IconSelectInput
  justify-content: flex-end
  margin-left: auto
  padding-left: 16px

.Settings .TextField.-wide .TextInput
  width: 50%

.Settings .sub-fields
  position: relative
  grid-gap: 16px 0
  margin: 0 0 0 24px
  &.-disabled
    display: flex
    flex-wrap: wrap
    grid-gap: 0 0

.Settings .ctrls
  position: relative
  display: flex
  grid-gap: 8px 8px
  flex-wrap: wrap
  margin: 16px 16px 5px
  &.-center
    justify-content: center
    align-items: center

.Settings .fetch-progress
  position: relative
  display: flex
  width: 50%
  flex-direction: column
  justify-content: center
  align-items: center

.Settings .progress-bar
  position: relative
  width: 100%
  height: 5px
  border-radius: 3px
  overflow: hidden
  margin-top: 12px
  background-color: #00000016
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    border-radius: 3px
    box-shadow: inset 0 0 0 1px var(--toolbar-fg)
    opacity: .2

.Settings .progress-lvl
  position: absolute
  left: -100%
  width: 100%
  height: 100%
  background-color: var(--status-active)

.Settings .progress-info
  position: relative
  display: flex
  width: 100%
  justify-content: center
  align-items: center

.Settings .progress-host
  font-size: rem(11)
  color: var(--toolbar-fg)
  margin: 5px 8px 0
  opacity: .7
.Settings .progress-done
.Settings .progress-errors
  font-size: rem(11)
  color: var(--toolbar-fg)
  margin: 5px 8px 16px
  opacity: .7

.Settings .card
  position: relative
  display: flex
  user-select: none
  border-radius: 3px
  margin-top: 3px
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 3px
    background-color: var(--toolbar-fg)
    opacity: 0
  &.-placeholder
    &:before
      content: none
    .card-body
      cursor: default
  &:not(:first-of-type):after
  &.-separate:after
    content: ''
    position: absolute
    top: -2px
    left: 4px
    width: calc(100% - 8px)
    height: 1px
    background-color: var(--toolbar-fg)
    opacity: .1
  &.-disabled
    margin: 3px
    &:before
      opacity: .05
    &:after
      content: none
  &:hover:before
    opacity: .06
  &.-disabled:hover:before
    opacity: .08
  &:active:before
    opacity: .03
  &[data-dnd="true"]
    z-index: 1000
    box-shadow: 0 0 8px 0 #00000032, 0 0 0 1px #00000016
  &[data-dnd-target="true"]:after
    content: ''
    position: absolute
    top: -2px
    left: 1px
    width: calc(100% - 2px)
    height: 2px
    background-color: var(--status-notice)
    opacity: 1
.Settings section[data-dnd="true"] .card
  &.-enabled:before
    opacity: 0
  &[data-dnd="true"]:before
    opacity: .2

.Settings .card-placeholder
  position: relative
  width: 100%
  height: 32px
  &:before
    content: ''
    position: absolute
    top: calc(50% - 2px)
    left: calc(50% - 2px)
    width: 5px
    height: 5px
    border-radius: 50%
    transform: translateZ(0)
    background-color: var(--toolbar-fg)
    box-shadow: 8px 0 0 0 var(--toolbar-fg), -8px 0 0 0 var(--toolbar-fg)
    opacity: .5

.Settings .card-body
  position: relative
  display: flex
  align-items: center
  padding: 8px 8px 8px 12px
  flex-grow: 1
  cursor: pointer
  transition: opacity var(--d-fast)
.Settings .card.-disabled .card-body
  padding: 6px 10px 6px 8px
  
.Settings .card-dnd-layer
  position: absolute
  display: block
  z-index: 1
  width: 100%
  height: 100%
  top: 0
  left: 0
  &.-last
    top: 100%
    &[data-dnd-target="true"]:after
      content: ''
      position: absolute
      top: 0
      left: 1px
      width: calc(100% - 2px)
      height: 2px
      background-color: var(--status-notice)

.Settings .card-icon
  position: relative
  width: 16px
  height: 16px
  flex-shrink: 0
  margin: 2px 8px 2px 0
  transform: translateZ(0)
  > .bookmarks-badge-icon
    position: absolute
    width: 10px
    height: 10px
    top: calc(50% + 2px)
    left: calc(50% + 0px)
    fill: var(--color, var(--toolbar-fg))
    opacity: .7
  > .bookmarks-badge-icon + svg
  > .bookmarks-badge-icon + img
    clip-path: polygon(0% 0, 100% 0%, 100% 56.25%, 56.25% 56.25%, 56.25% 100%, 0% 100%)
  > img
    position: absolute
    width: 100%
    height: 100%
  > svg
    position: absolute
    width: 100%
    height: 100%
    fill: var(--color, var(--toolbar-fg))
.Settings .card.-disabled .card-icon > svg
.Settings .card[data-inactive="true"] .card-icon > svg
.Settings .card.-disabled .card-icon > img
.Settings .card[data-inactive="true"] .card-icon > img
.Settings .card[data-inactive="true"] .card-name
  opacity: .5
.Settings .card[data-id="settings"] .card-icon > svg
.Settings .card[data-id="add_tp"] .card-icon > svg
  fill: var(--toolbar-fg)

.Settings .card-name
  position: relative
  font-size: rem(16)
  color: var(--toolbar-fg)
  -moz-user-select: none
.Settings .card.-disabled .card-name
.Settings .card[data-inactive="true"] .card-name
  color: var(--toolbar-fg)

.Settings .card-inact-note
  position: relative
  font-size: rem(14)
  color: var(--toolbar-fg)
  -moz-user-select: none
  opacity: .5
  margin: 0 0 0 8px

.Settings .card-badges
  position: relative
  display: flex
  margin: 0 8px
  align-items: center
  grid-gap: 3px

.Settings .card-badge
  position: relative
  display: flex
  justify-content: center
  align-items: center
  padding: 4px
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    background-color: var(--toolbar-fg)
    border-radius: 4px
    opacity: .05
  &:hover:before
    opacity: .12
  &:active:before
    opacity: .05
    pointer-events: none
  &[data-inactive="true"]
    opacity: .3

.Settings .card-badge > svg
  position: relative
  width: 12px
  height: 12px
  fill: var(--toolbar-fg)
  opacity: .7
  &.-rotate270
    transform: rotateZ(270deg)
.Settings .card-badge:hover > svg
  opacity: 1

.Settings .card-badge .len
  position: relative
  font-size: rem(13)
  color: var(--toolbar-fg)
  opacity: .7
  margin: 0 2px 0 3px
.Settings .card-badge:hover .len
  opacity: 1

.Settings .card-ctrls
  position: relative
  display: flex
  margin: 0 8px
  align-items: center

.Settings .card-ctrl
  position: relative
  width: 24px
  height: 24px
  margin: 0 2px
  cursor: pointer
  opacity: .5
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: var(--toolbar-fg)
    border-radius: 4px
    opacity: 0
  &:hover
    opacity: 1
  &:hover:before
    opacity: .1
  &:active
    opacity: .5
  &:active:before
    opacity: .2
  > svg
    position: absolute
    top: 4px
    left: 4px
    width: 16px
    height: 16px
    fill: var(--toolbar-fg)
  &.-up > svg
    transform: rotateZ(180deg)
  &.-rm > svg
    width: 18px
    height: 18px
    top: 3px
    left: 3px
  &[data-inactive="true"]
    cursor: default
    opacity: .2

.card-leave-active
  position: absolute
.card-move
  transition: transform var(--d-fast), opacity var(--d-fast)
.card-enter-from
  opacity: 0
  transform: scale(1, 0.8)
.card-enter-to
  opacity: 1
  transform: scale(1, 1)
.card-leave-from
  opacity: 0
  transform: scale(1, 1)
.card-leave-to
  opacity: 0
  transform: scale(1, 0.8)

.Settings .box
  position: relative
  display: flex
  grid-gap: 16px 8px
  flex-wrap: wrap
  margin: 0 16px

.Settings .box > .label
  position: relative
  font-size: rem(14)
  color: var(--toolbar-fg)
  margin: 0

.Settings .info
  position: relative
  font-size: rem(13) 
  max-width: 100%
  padding: 2px 0 8px 16px
  white-space: pre-wrap
  color: var(--toolbar-fg)
  opacity: .7

.Settings .btn
  width: auto
  padding: 5px 16px

.Settings .btw
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 0
  text-align: right
  color: var(--toolbar-fg)
  font-size: rem(12)
  opacity: .3
  overflow: visible
  > p
    position: absolute
    padding: 0
    margin: 0
    top: 8px
    right: 12px
