@import "logo";

.jp-card-logo.jp-card-mastercard {
    // display: none;
    $red: #EB001B;
    $yellow: #FF5F00;
    $offset: 0;
    color: white;
    font-style: normal;
    text-transform: lowercase;
    font-weight: bold;
    text-align: center;
    font-size: 9px;
    line-height: $mastercard-family-name-height;
    z-index: 1;
    text-shadow: 1px 1px rgba(0, 0, 0, .6);
    &:before, &:after {
        content: " ";
        display: block;
        width: $logo-height;
        top: 0;
        position: absolute;
        height: $logo-height;
        border-radius: $logo-height / 2;
    }

    &:before {
        left: $offset;
        background: $red;
        z-index: -1;
        opacity: 0.9;
    }

    &:after {
        right: $offset;
        background: $yellow;
        z-index: -2;
    }
}