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

// Set toolbar colors for fields
#root .SiteConfigPopup
  --toolbar-bg: var(--popup-bg)
  --toolbar-fg: var(--popup-fg)
  [data-color="toolbar"]
    --color: var(--popup-fg)

.SiteConfigPopup .space
  height: 8px
  &:first-child
    display: none

// Temp margins fix
.Setup .SiteConfigPopup .SelectField
.Setup .SiteConfigPopup .TextField
  padding: 0 8px
  margin-left: 4px
  margin-right: 4px

.SiteConfigPopup .match-options
  position: relative
  display: flex
  flex-wrap: wrap
  grid-gap: 2px
  padding: 2px 4px

.SiteConfigPopup .match-option
  position: relative
  padding: 5px 8px
  max-width: 100%
  border-radius: 4px
  &:before
  &:after
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 4px
  &:before
    background-color: var(--popup-fg)
    opacity: .1
  &[data-active="true"]:before
    opacity: .2
  &[data-active="true"]:after
    box-shadow: inset 0 0 0 2px var(--accent)
  &:hover:before
    opacity: .2
  &:not([data-active="true"]):active
    opacity: .7
  
  .label
    position: relative
    color: var(--popup-fg)
    font-size: rem(14)
    z-index: 1
    opacity: .7
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
  &[data-active="true"] .label
    opacity: 1

.SiteConfigPopup .note
  position: relative
  margin: 3px 4px 3px 4px
  font-size: rem(14)
  font-weight: 700
  opacity: .7
  color: var(--popup-fg)

.SiteConfigPopup .TextInput
  margin: 4px
  width: 100%

.SiteConfigPopup .matchString .label
  font-weight: 400

.SiteConfigPopup .sub-field
  .ToggleField
    padding-left: 8px

  .ToggleField .label
    font-size: rem(13)
    margin-right: 4px

  .ToggleField .ToggleInput
    align-self: center
