@import 'nib'

position()
  if arguments[0] == cover || arguments[0] == fixed-cover
    if arguments[0] == cover
      position: absolute
    else
      position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
  else
    position: arguments

.board-wrapper
  position: cover
  overflow-x: hidden
  overflow-y: hidden

  .board-canvas
    position: cover
    transition: margin .1s
    overflow-y: auto

    &.is-sibling-sidebar-open
      margin-right: 248px

    .board-overlay
      position: fixed-cover
      top: -100px
      right: -400px
      background: black
      opacity: 0.33
      animation: fadeIn 0.2s
      z-index: 16

    &.is-dragging-active
      .open-minicard-composer,
      .minicard-wrapper.is-checked
        display: none

@media screen and (max-width: 800px)
  .board-wrapper

    .board-canvas

      .swimlane
        border-bottom: 1px solid #CCC
        display: flex
        flex-direction: column
        margin: 0
        padding: 0 0px 0px 0
        overflow-x: hidden
        overflow-y: auto

calendar-event-color(background, borderColor, color...)
  background: background !important
  border-color: borderColor
  if color
    color: color !important //overwrite text for better visibility

.calendar-event-green
  calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility

.calendar-event-yellow
  calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility

.calendar-event-orange
  calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility

.calendar-event-red
  calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility

.calendar-event-purple
  calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility

.calendar-event-blue
  calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility

.calendar-event-pink
  calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility

.calendar-event-sky
  calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility

.calendar-event-black
  calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility

.calendar-event-lime
  calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility

.calendar-event-silver
  calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility

.calendar-event-peachpuff
  calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility

.calendar-event-crimson
  calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility

.calendar-event-plum
  calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility

.calendar-event-darkgreen
  calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility

.calendar-event-slateblue
  calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility

.calendar-event-magenta
  calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility

.calendar-event-gold
  calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility

.calendar-event-navy
  calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility

.calendar-event-gray
  calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility

.calendar-event-saddlebrown
  calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility

.calendar-event-paleturquoise
  calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility

.calendar-event-mistyrose
  calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility

.calendar-event-indigo
  calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility