@import "logo";

.jp-card-logo.jp-card-amex {
    $box-offset: 8px;
    $box-width: $logo-height - $box-offset;
    $box-height: $box-width;
    $font-size: 4px;
    $font-padding: 2px;

    text-transform: uppercase;

    font-size: $font-size;
    font-weight: bold;
    color: white;

    @include background-image(repeating-radial-gradient(circle at center, #FFF 1px, #999 2px));
    border: 1px solid #EEE;

    &:before, &:after {
        width: $box-width;
        display: block;
        position: absolute;
        left: ($logo-width - $box-width) / 2;
    }

    &:before {
        $blue: #267AC3;
        height: $box-height;
        content: "american";
        // box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.6);
        top: $box-offset / 2 - 1;
        text-align: left;
        padding-left: $font-padding;
        padding-top: $box-height / 2 - $font-size + 1;
        background: $blue;
    }

    &:after {
        content: "express";
        bottom: $box-height / 2 - $font-size + 1;
        text-align: right;
        padding-right: $font-padding;
    }
}