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

#root .BookmarkCard
  --bc-margin: var(--general-margin)
  --bc-border-radius: var(--general-border-radius)
  --bc-padding: 2px 0 4px
  --bc-inner-gap: 6px
  --bc-open-mark-top: 3px
  --bc-open-mark-left: 3px
#root[data-density="compact"] .BookmarkCard
  --bc-padding: 1px 0 3px
  --bc-inner-gap: 5px
  --bc-open-mark-top: 2px
  --bc-open-mark-left: 2px
#root[data-density="loose"] .BookmarkCard
  --bc-padding: 2px 0 5px

.BookmarkCard
  position: relative
  padding: 0 var(--bc-margin) var(--bc-margin)

.BookmarkCard .body
  position: relative
  padding: var(--bc-padding)
  border-radius: var(--bc-border-radius)
  background-color: var(--frame-el-bg)
  box-shadow: var(--frame-el-shadow)
  
.BookmarkCard .body:before
  content: ''
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border-radius: var(--bc-border-radius)
.BookmarkCard:hover .body:before
  background-color: var(--frame-el-overlay-hover-bg)
.BookmarkCard:active .body:before
  background-color: var(--frame-el-overlay-clicked-bg)
.BookmarkCard[data-selected="true"] .body:before
  background-color: var(--frame-el-overlay-selected-bg)
  box-shadow: inset 0 0 0 1px var(--frame-el-overlay-selected-border)
.BookmarkCard[data-open="true"] .body:after
  content: ''
  position: absolute
  top: var(--bc-open-mark-top)
  left: var(--bc-open-mark-left)
  width: 3px
  height: 3px
  border-radius: 50%
  background-color: var(--frame-fg)

// ---
// -- Line
// -
.BookmarkCard .line
  position: relative
  display: flex
  align-items: center

// ---
// -- Drag layer
// -
.BookmarkCard .dnd-layer
  z-index: 15

// ---
// -- Favicon
// -
.BookmarkCard .fav
  position: relative
  width: 16px
  height: 16px
  flex-shrink: 0
  margin: 3px 0 0 var(--bc-inner-gap)

.BookmarkCard .fav > svg
.BookmarkCard .fav > img
  position: absolute
  width: 16px
  height: 16px
  top: 0
  left: 0
  fill: var(--frame-fg)
.BookmarkCard .fav > svg
  opacity: .7

// ---
// -- Title
// -
.BookmarkCard .title
  position: relative
  width: 100%
  margin: 3px 2px 1px 5px
  font-size: rem(14)
  color: var(--frame-fg)
  white-space: nowrap
  overflow: hidden
  transition: transform var(--d-fast), color var(--d-fast)
  mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)

// ---
// -- Info
// -
.BookmarkCard .info
  position: relative
  width: 100%
  margin: 2px 0 0 var(--bc-inner-gap)
  font-size: rem(11)
  color: var(--frame-fg)
  white-space: nowrap
  overflow: hidden
  opacity: .7
  mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)
  &.-end
    width: auto
    flex-shrink: 0
    margin-right: 6px
    mask: none
