@import "logo";

.jp-card-logo.jp-card-dankort {
    $white: #FFFFFF;
    $black: #000000;
    $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: -($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: -($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;
      }
    }
}