// LaterPay purchase button

// rendered as plain link ----------------------------------------------------------------------------------------------
.lp_purchase-link {
    border: 0 !important;
    box-shadow: none !important;
    color: $laterpay-brand;
    display: block !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: $fs !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    margin: $fs 0 0 !important;
    position: relative !important;
    text-decoration: none !important;
    z-index: $zindex--elevated-1 !important;
    position: relative !important;
    padding-left: ($fs--3 - 10) !important;

    &:hover,
    &:focus,
    &:active {
        color: $laterpay-brand--darker !important;
    }

    /**
     * LaterPay logo (rendered in pseudo element from icon font)
     *
     * 1. Nullify line-height to avoid icon overlapping other elements
     */
    &:before {
        font-size: $fs--2 !important;
        line-height: 0 !important; /* 1 */
        margin: 0 (-$fs--025) 0 0 !important;
        position: absolute !important;
        top: 9px !important;
        left: 0 !important;
    }
}

// currency ISO code
.lp_purchase-link__currency {
    font-size: 0.5em !important;
    padding: 0 0 0 0.7ch !important;
    position: relative !important;
    text-decoration: none !important;
    vertical-align: super !important;
}


// rendered as button --------------------------------------------------------------------------------------------------
.lp_button,
.lp_purchase-button {
    background: $laterpay-brand;
    border-radius: 4px !important;
    border: 0 !important;
    box-shadow: none!important;
    color: $text--inverse;
    cursor: pointer !important;
    float: right !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: $fs--2 !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: $fs--025 $fs--075 $fs--025 $fs !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease-in;
    white-space: nowrap !important;
    position: relative !important;

    /**
     * LaterPay logo (rendered in pseudo element from icon font)
     *
     * 1. Set font-size in pixels, because IE gets confused with em here
     * 2. Nullify line-height to avoid icon overlapping other elements
     */
    &:before {
        font-size: $fs--2 !important; /* 1 */
        line-height: .5 !important; /* 2 */
        margin: 0 !important;
        position: relative !important;
        width: (round($fs * 4.35));
        top: 3px;
    }

    &:hover,
    &:focus,
    &:active {
        background: $laterpay-brand--darker;
        color: $text--inverse;
        text-decoration: none !important;
    }

    &:focus,
    &:active {
        border-top-color: transparent !important;
        border: 0 !important;
        &:before {
            top: ($fs--08 + 1);
        }
    }
    &:focus {
        outline: none !important;
    }
}

// wrapper used to set the purchase button apart from the post content when positioned automatically
.lp_purchase-button-wrapper {
    @extend %clearfix;

    margin: $fs 0 $fs--2 !important;
}

.lp_purchase-button-wrapper > div:after {
    content: '';
    clear: both;
    display: block;
}

.lp_bought_notification {
    box-shadow: none !important;
    font-size: $fs;
    color: $laterpay-brand;
    float: right;
    text-decoration: underline;
    border-bottom: none !important;

    &:hover {
        color: $laterpay-brand--darker;
    }
}

.lp_bought_notification :hover {
    text-decoration: none;
}


// Responsiveness ------------------------------------------------------------------------------------------------------
@media (max-width:567px) {
    .lp_button {
        margin-left: ($fs * 2.75) !important;
        margin-top: $fs--05 !important;
    }
}