@import '../../utils'

.inherit-text-styles
  font-family: inherit
  font-size: inherit
  font-weight: inherit
  line-height: inherit
  letter-spacing: inherit
  text-indent: inherit
  text-align: inherit
  color: inherit

// ---
// -- Commmon
// -
.ToggleField
.SelectField
.NumField
.CountField
.TextField
.InfoField
  position: relative
  display: flex
  min-height: 42px
  justify-content: space-between
  align-items: center
  flex-wrap: wrap
  padding: 0 16px
  flex-shrink: 0
  cursor: default
  -moz-user-select: none
  outline: none
  border-radius: 4px
  &:not(:first-of-type)
    margin-top: 3px

  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 4px
    background-color: var(--toolbar-fg)
    opacity: 0

  &:not(:first-of-type):after
    content: ''
    position: absolute
    top: -2px
    left: 6px
    width: calc(100% - 12px)
    height: 1px
    background-color: var(--toolbar-fg)
    opacity: .08
  
  &.-compact:after
    left: 5px
    width: calc(100% - 10px)

  &.-no-separator:after
    display: none

  &:hover:before
    opacity: .06

  &:active:before
    opacity: .03

  &[data-inactive="true"] .body
    opacity: .3
  &[data-inactive="true"] .note
    opacity: .2

  &.-sub-title
    min-height: 48px
    margin-top: 16px
    &:after
      display: none

.Sidebar .ToggleField
.ToggleField.-compact
  padding: 4px
  min-height: 30px
.Sidebar .SelectField
.SelectField.-compact
  padding: 3px 4px 4px
.Sidebar .TextField
.TextField.-compact
  padding: 3px 4px 5px

.InfoField:before
  content: none

.SelectField[data-drop-down="true"]
  z-index: 10
  box-shadow: inset 0 0 0 2px var(--status-active)
.SelectField[data-drop-down="true"]:before
  opacity: .03

.ToggleField .body
.SelectField .body
.NumField .body
.CountField .body
.TextField .body
  position: relative
  display: flex
  width: 100%
  justify-content: space-between
  align-items: flex-start
  flex-wrap: nowrap


.Sidebar .SelectField .body
.Sidebar .TextField .body
.SelectField.-compact .body
.TextField.-compact .body
  flex-wrap: wrap

// ---
// -- Label
// -
.ToggleField .label
.SelectField .label
.TextField .label
.CountField .label
.InfoField .label
  position: relative
  font-size: rem(16)
  line-height: 24px
  padding: 11px 0
  align-self: flex-start
  color: var(--toolbar-fg)
  transition: color var(--d-fast)
.-sub-title .label
  font-size: rem(20)

.Sidebar .ToggleField .label
.Sidebar .SelectField .label
.Sidebar .TextField .label
.ToggleField.-compact .label
.SelectField.-compact .label
.TextField.-compact .label
  width: 100%
  line-height: normal
  padding: 0 0 4px
  font-size: rem(14)
  font-weight: 700
  opacity: .7
.Sidebar .ToggleField .label
.ToggleField.-compact .label
  padding: 0 8px 0 0
  line-height: 18px

// ---
// -- Note
// -
.ToggleField .note
.SelectField .note
.NumField .note
.TextField .note
  position: relative
  font-size: rem(13)
  width: 100%
  margin-top: -5px
  padding: 0 0 12px 0px
  white-space: pre-wrap
  color: var(--toolbar-fg)
  -moz-user-select: text
  opacity: .7

// ---
// -- Input
// -
.ToggleInput
.SelectInput
  position: relative
  box-sizing: content-box
  display: flex
  max-width: calc(55% - 16px)
  justify-content: flex-end
  padding: 8px 0 8px 16px
  flex-wrap: wrap
  grid-gap: 0 1px
  cursor: pointer
  transform: translateZ(0)

.ToggleInput
  flex-wrap: nowrap

.Sidebar .ToggleInput
.ToggleField.-compact .ToggleInput
  width: 18px
  height: 18px
  max-width: none
  padding: 0
  flex-shrink: 0
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    box-shadow: inset 0 0 0 2px var(--toolbar-fg)
    border-radius: 5px
    opacity: .3
.Sidebar .SelectInput
.SelectField.-compact .SelectInput
  justify-content: flex-start
.Sidebar .SelectInput
.Sidebar .TextInput
.SelectField.-compact .SelectInput
.TextField.-compact .TextInput
  max-width: none
  width: 100%
  padding: 0

// ---
// -- Options
// -
.ToggleInput .opt
.SelectInput .opt
.select-input-drop-down .opt
  position: relative
  box-sizing: content-box
  display: flex
  align-items: center
  padding: 5px 0
  font-size: rem(14)
  font-weight: 600
  color: var(--color, var(--toolbar-fg))
  transition: color var(--d-fast)
  flex-shrink: 0
  line-height: 20px
  opacity: .7
  cursor: pointer
  &:before
    content: ''
    position: absolute
    top: 1px
    left: 0
    width: 100%
    height: calc(100% - 2px)
    border-radius: 4px
    background-color: var(--color, var(--toolbar-fg))
    opacity: 0
  > p
    position: relative
    box-sizing: content-box
    display: block
    padding: 0 8px
    margin: 0
  > svg
  > img
    position: relative
    box-sizing: content-box
    flex-shrink: 0
    display: block
    width: 16px
    height: 16px
    padding: 2px 7px
    fill: var(--color, var(--toolbar-fg))
    transition: opacity var(--d-fast)
  > svg + p
  > img + p
    padding: 0 12px 0 0
  &:hover
    opacity: 1
  &:hover:before
    opacity: .1

.Sidebar
.SelectField.-compact
.ToggleField.-compact
  .SelectInput .opt
  .select-input-drop-down .opt
    font-size: rem(14)
    overflow: hidden
    > p
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
  .SelectInput .opt > svg
    padding: 2px 5px
  .ToggleInput .opt.-true
    position: absolute
    top: 2px
    left: 3px
    width: 12px
    height: 14px
    padding: 0
    &:before
      background-color: var(--accent)
      border-radius: 3px
    > p
    &:after
      display: none
  .ToggleInput .opt.-false
    position: absolute
    width: 5px
    height: 9px
    top: 1px
    left: 7px
    padding: 0
    box-shadow: 1.5px 1.5px 0 0 var(--toolbar-bg)
    transform: rotateZ(45deg)
    &:before
    > p
    &:after
      display: none
  .ToggleInput[data-active="false"] .opt.-false
    opacity: 0
  .ToggleInput[data-active="true"]
    .opt.-true:before
    .opt.-true:after
    .opt.-false
      opacity: 1

.SelectInput[data-folded="true"]
  flex-wrap: nowrap

.SelectInput[data-folded="true"] .opt
  flex-shrink: 1
.select-input-drop-down .opt
  flex-shrink: 0

.SelectInput[data-folded="true"] .opt[data-active="true"]
  overflow: hidden
  > p
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

.SelectInput[data-folded="true"] .opt[data-active="true"]:before
.SelectInput[data-folded="true"] .opt[data-active="true"]:after
  border-top-right-radius: 0
  border-bottom-right-radius: 0

.SelectInput .opt.-exp
  display: flex
  align-items: center
  flex-shrink: 0
  > svg
    padding: 2px 5px
  &:before
    background-color: var(--toolbar-fg)
    opacity: .1
    border-radius: 4px
    border-top-left-radius: 0
    border-bottom-left-radius: 0

.select-input-drop-down-layer
  position: absolute
  box-sizing: content-box
  top: 0
  left: 0
  width: 100%
  height: 100%
  background-color: #0001
  z-index: 99999

.select-input-drop-down
  position: absolute
  box-sizing: border-box
  display: flex
  flex-direction: column
  grid-gap: 2px 0
  top: var(--top, 0px)
  left: var(--left, 0px)
  max-width: var(--max-width, 250px)
  min-height: 24px
  max-height: 350px
  overflow: clip
  background-color: var(--frame-bg)
  border-radius: 6px
  box-shadow: inset 0 0 0 1px #ffffff32,
              0 1px 3px 0 #00000032
#root[data-toolbar-color-scheme="light"] .select-input-drop-down
  box-shadow: inset 0 0 0 1px #00000036,
              0 1px 3px 0 #00000032

.select-input-drop-down-content
  position: relative
  padding: 2px 3px
  overflow-y: auto
  scrollbar-color: var(--frame-scrollbar-color) #0000
#root[data-native-scrollbars-thin="true"] .select-input-drop-down-content
  scrollbar-width: thin

.SelectInput .opt[data-none="true"]:after
.ToggleInput .opt.-false:after
  content: ''
  position: absolute
  top: 1px
  left: 0
  width: 100%
  height: calc(100% - 2px)
  border-radius: 4px
  background-color: #ff2200
  opacity: 0

.ToggleInput .opt.-true:after
  content: ''
  position: absolute
  top: 1px
  left: 0
  width: 100%
  height: calc(100% - 2px)
  border-radius: 4px
  background-color: #00ff22
  opacity: 0

.SelectInput .opt[data-active="true"]
  color: var(--color, var(--toolbar-fg-active))
  opacity: 1
.Sidebar .SelectInput[data-folded="true"] .opt[data-active="true"]
.SelectField.-compact .SelectInput[data-folded="true"] .opt[data-active="true"]
  width: 100%
.SelectInput .opt[data-active="true"]:before
.SelectInput .opt[data-active="true"]:after
  opacity: .2
  background-color: var(--color, var(--toolbar-fg-active))
.SelectInput .opt[data-active="true"][data-none="true"]
  color: var(--toolbar-fg)
.SelectInput .opt[data-active="true"][data-none="true"]:before
  background-color: var(--toolbar-fg)
.SelectInput .opt[data-active="true"][data-none="true"]:after
  background-color: #ff2200

.ToggleInput[data-active="true"] .opt.-true
.ToggleInput[data-active="false"] .opt.-false
  opacity: 1
.ToggleInput[data-active="true"] .opt.-true:before
.ToggleInput[data-active="false"] .opt.-false:before
.ToggleInput[data-active="true"] .opt.-true:after
.ToggleInput[data-active="false"] .opt.-false:after
  opacity: .2

// ---
// -- Text input
// -
.TextInput
  position: relative
  display: flex
  margin: 11px 0
  line-height: 20px
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    transform: translateZ(0)
    border-radius: 3px
    background-color: var(--toolbar-fg)
    opacity: .05
  &:after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 3px
    box-shadow: inset 0 0 0 1px var(--toolbar-fg)
    opacity: .08
  &:hover:before
    opacity: .08
  &:hover:after
    opacity: .1
  &[data-active="true"]:before
    opacity: .1
  &[data-active="true"]:after
    opacity: .3
  &[data-valid="valid"][data-active="true"]:before
    box-shadow: inset 0 0 0 1px var(--status-ok)
  &[data-valid="invalid"]:before
    box-shadow: inset 0 0 0 1px var(--status-err)
  &[data-wrong="true"]
    animation: shake-animation .3s
    &:before
      animation: err-blink-animation 1s
  &[data-width="50"]
    width: 50%

.Sidebar .TextInput
.TextField.-compact .TextInput
  margin: 0
  > textarea
    box-sizing: content-box
    max-height: 200px
  input
    width: 100%

// ---
// -- Input
// -
.TextInput input
.TextInput textarea
  @extend .inherit-text-styles
  position: relative
  display: block
  width: calc(100% - 8px)
  color: var(--toolbar-fg)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 2px 0
  padding: 0 4px
  background-color: transparent
  resize: none
  z-index: 1

// ---
// -- Placeholder
// -
.TextInput .placeholder
  @extend .inherit-text-styles
  position: absolute
  top: 2px
  left: 4px
  max-width: calc(100% - 8px)
  color: var(--toolbar-fg)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  padding: 0
  margin: 0
  opacity: 0
  transform: translateX(16px)
  transition: opacity var(--d-fast), transform var(--d-fast)

.TextInput[data-empty="true"] .placeholder
  opacity: .5
  transform: translateX(0)

.TextInput[data-active="true"] .placeholder
  transform: translateX(3px)

// ---

// ---
// -- Number
// -
.NumField
  display: block
  padding: 0 16px
  &.-inline
    display: flex
  .label
    position: relative
    font-size: rem(16)
    line-height: 24px
    padding: 11px 0
    align-self: flex-start
    color: var(--toolbar-fg)
    transition: color var(--d-fast)
  .input-group
    position: relative
    display: flex
    align-items: center
    padding: 11px 0
    -moz-user-select: none
  .text-input
    position: relative
    width: 100px
    min-width: 100px
    font-size: rem(16)
    margin: 0 0 0 auto
    text-align: right
    transform: opacity var(--d-fast)
  &.-inline .text-input
    margin: 0
  .unit-input
    position: relative
    flex: 1 0 auto
    padding: 0 0 0 8px
    margin: -3px 0
    max-width: fit-content
    -moz-user-select: none
  &:not([data-active="true"]) .text-input > input
    color: var(--toolbar-fg)
  &.-inline .unit-input
    display: none
  .toggle
    flex-shrink: 0

// ---
// -- Count field
// -
.CountField
  display: block
  .label
    position: relative
    display: flex
    font-size: rem(16)
    justify-content: space-between
    align-items: center
    color: var(--toolbar-fg)
    transition: color var(--d-fast)
    -moz-user-select: none
  .input-group
    position: relative
    display: flex
    align-items: center
    padding: 8px 0 8px 16px
    -moz-user-select: none
  .text-input
    position: relative
    width: 100%
    font-size: rem(16)
    margin: 0 16px 0 0
    transform: opacity var(--d-fast)
  &.-inline .text-input
    margin: 0
    text-align: right
    width: 120px
  &:not([data-active="true"]) .text-input > input
    color: var(--toolbar-fg)
  .toggle-input
    position: relative
    flex: 1 0 auto
    padding: 0 0 0 16px
    -moz-user-select: none

// ---
// -- Color input
// -
.ColorInput
  position: relative
  display: flex
  justify-content: space-between
  align-items: center

// ---
// -- Color rgba value
// -
.ColorInput .text
  position: relative
  width: 1px
  color: var(--toolbar-fg)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 0
  padding: 0
  background-color: transparent
  z-index: 1
  flex-grow: 2

// ---
// -- Style field
// -
.StyleField
  position: relative
  padding: 8px 16px 2px
  -moz-user-select: none
  &:not(:first-of-type)
    margin: 3px 0 0 0

  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 4px
    background-color: var(--toolbar-fg)
    opacity: 0

  &:not(:first-of-type):after
    content: ''
    position: absolute
    top: -2px
    left: 6px
    width: calc(100% - 12px)
    height: 1px
    background-color: var(--toolbar-fg)
    opacity: .08

  &.-no-separator:after
    display: none

  &:hover:before
    opacity: .06

  &:active:before
    opacity: .03

.StyleField .color-wrapper
  position: relative
  width: 16px
  height: 16px
  flex-shrink: 0
  border-radius: 42%
  overflow: hidden
  margin: 0 8px 0 0
  padding: 0
  cursor: pointer
  transform: translateZ(0)
  box-shadow: 0 0 0 1px #cecece,
              0 0 0 2px #323232,
              0 1px 3px 0 #00000024

.StyleField .color
  position: relative
  top: -1px
  left: -1px
  width: calc(100% + 2px)
  height: calc(100% + 2px)
  -webkit-appearance: none
  border: none
  outline: none
  margin: 0
  padding: 0
  background-color: transparent
  z-index: 0
  cursor: pointer


// ---
// -- Label
// -
.StyleField .label
  position: relative
  display: flex
  font-size: rem(16)
  justify-content: space-between
  align-items: center
  color: var(--toolbar-fg)
  transition: color var(--d-fast)

.StyleField .var
  font-family: monospace
  font-size: rem(11)
  text-align: right
  margin-left: 12px
  color: var(--toolbar-fg)
  opacity: .7
  user-select: text

// ---
// -- Container of inputs
// -
.StyleField .input-group
  position: relative
  display: flex
  align-items: center

// ---
// -- Text input
// -
.StyleField .text-input
  position: relative
  width: 100%
  font-size: rem(12) !important
  font-family: monospace
  margin: 0 16px 0 0
  transform: opacity var(--d-fast)
  > input
    color: var(--status-ok)

// ---
// -- Toggle input
// -
.StyleField .toggle
  flex-shrink: 0

// ---
// -- Toggle input
// -
.DropDownButton
  position: relative
  outline: none
  -moz-user-select: none

.DropDownButton .body
  position: relative
  max-width: 100%
  font-size: rem(15)
  padding: 4px 12px
  white-space: nowrap
  text-overflow: ellipsis
  font-weight: 600
  overflow: hidden
  cursor: pointer
  text-align: center
  border-radius: var(--btn-border-radius)
  -moz-user-select: none
  outline: none
  color: var(--btn-fg)
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: var(--btn-fg)
    border-radius: var(--btn-border-radius)
    opacity: .1
  &:hover:before
    opacity: .2
  &:active:before
    opacity: .08

.DropDownButton[data-drop-down="true"] .body
  box-shadow: inset 0 0 0 2px var(--status-active)

.DropDownButton-drop-down-layer
  position: absolute
  box-sizing: content-box
  top: 0
  left: 0
  width: 100%
  height: 100%
  background-color: #0001
  z-index: 99999

.DropDownButton-drop-down
  position: absolute
  box-sizing: border-box
  display: flex
  flex-direction: column
  grid-gap: 2px 0
  padding: 3px
  top: var(--top, 0px)
  left: var(--left, 0px)
  max-width: var(--max-width, 250px)
  min-height: 24px
  max-height: 350px
  overflow-y: auto
  background-color: var(--frame-bg)
  border-radius: 6px
  box-shadow: inset 0 0 0 1px #ffffff32,
              0 1px 3px 0 #00000032
#root[data-native-scrollbars-thin="true"] .select-input-drop-down
  scrollbar-width: thin
#root[data-toolbar-color-scheme="light"] .select-input-drop-down
  box-shadow: inset 0 0 0 1px #00000036,
              0 1px 3px 0 #00000032
