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

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

.NewTabShortcutsPopup .space
  height: 16px
  &:first-child
    display: none

// ---
// -- Shortcuts list
// -
.NewTabShortcutsPopup .shortcuts
  position: relative

.NewTabShortcutsPopup .shortcut
  position: relative
  margin-top: 3px
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    border-radius: var(--general-border-radius)
    background-color: var(--toolbar-fg)
    opacity: 0
  &:hover:before
    opacity: .1

.NewTabShortcutsPopup .shortcut[data-edit="true"]:before
  background-color: transparent
  box-shadow: inset 0 0 0 2px var(--status-active)
  opacity: 1

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

.NewTabShortcutsPopup .shortcut .url-box
  position: relative
  display: flex
  align-items: center
  &[data-with-container="true"]
    margin-top: -4px

.NewTabShortcutsPopup .shortcut .icon-box
  position: relative
  width: 28px
  height: 28px
  flex-shrink: 0
  > .icon
    position: absolute
    top: 6px
    left: 6px
    width: 16px
    height: 16px
  > svg
    fill: var(--color, var(--popup-fg))

.NewTabShortcutsPopup .shortcut .url
  position: relative
  color: var(--popup-fg)
  font-size: rem(15)
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden
  margin-right: 2px

.NewTabShortcutsPopup .shortcut .container-box
  position: relative
  display: flex
  align-items: center
  transform: translateZ(0)

.NewTabShortcutsPopup .shortcut .container
  position: relative
  color: var(--color, var(--popup-fg))
  font-size: rem(15)
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden
  margin-right: 2px

.NewTabShortcutsPopup .shortcut .separator
  position: relative
  display: flex
  align-items: center
  &:before
    content: ''
    position: relative
    height: 1px
    width: 100%
    margin: 14px 8px 13px
    background-color: var(--color, var(--popup-fg))
    opacity: .7

.NewTabShortcutsPopup .shortcut .controls-box
  position: relative
  display: none
  justify-content: flex-end
  align-items: center
  height: 28px
  padding: 0 2px
  margin-left: auto
.NewTabShortcutsPopup .shortcut:hover .controls-box
  display: flex

.NewTabShortcutsPopup .shortcut .btn-up
.NewTabShortcutsPopup .shortcut .btn-down
.NewTabShortcutsPopup .shortcut .btn-rm
  position: relative
  width: 24px
  height: 24px
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 100%
    border-radius: var(--general-border-radius)
    background-color: var(--toolbar-fg)
    opacity: 0
  &:hover:before
    opacity: .1
  &:active:before
    opacity: .2
  > svg
    position: relative
    top: 4px
    left: 4px
    width: 16px
    height: 16px
    fill: var(--popup-fg)
.NewTabShortcutsPopup .shortcut .btn-up > svg
  transform: rotateZ(180deg)
