@import 'logo'

.jp-card-logo.jp-card-dankort
  $white = white
  $black = black
  $red = #ed1c24
  $padding = 3px
  $radius = 8px
  $inner-height = $logo-height - $padding * 2 - 2
  // height - padding - border
  $letter-height = $inner-height * 0.55
  width: $logo-width
  height: $logo-height
  padding: $padding
  border-radius: $radius
  border: $black 1px solid
  background-color: $white
  .dk
    position: relative
    width: 100%
    height: 100%
    overflow: hidden
    &:before
      background-color: $red
      content: ''
      position: absolute
      width: 100%
      height: 100%
      display: block
      border-radius: ($radius * 0.75)
    &:after
      content: ''
      position: absolute
      top: 50%
      margin-top: -1 * ($letter-height / 2)
      right: 0
      width: 0
      height: 0
      border-style: solid
      border-width: 7px 7px 10px 0
      border-color: transparent $red transparent transparent
      z-index: 1
  .d, .k
    position: absolute
    top: 50%
    width: 50%
    display: block
    height: $letter-height
    margin-top: -1 * ($letter-height / 2)
    background: white
  .d
    left: 0
    border-radius: 0 8px 10px 0
    &:before
      content: ''
      position: absolute
      top: 50%
      left: 50%
      display: block
      background: $red
      border-radius: 2px 4px 6px 0px
      height: 5px
      width: 7px
      margin: -3px 0 0 -4px
  .k
    right: 0
    &:before, &:after
      content: ''
      position: absolute
      right: 50%
      width: 0
      height: 0
      border-style: solid
      margin-right: -1px
    &:before
      top: 0
      border-width: 8px 5px 0 0
      border-color: $red transparent transparent transparent
    &:after
      bottom: 0
      border-width: 0 5px 8px 0
      border-color: transparent transparent $red transparent