//
//  Reward Points Customer Account
//  ____________________________________________

//
//  Variables
//  ----------------------------------------------

@amrewards__table__header__color: #737373;
@amrewards__expiration__critical: #c84949;
@amrewards__expiration__expired__background: #ececec;
@amrewards__expiration__expired__color: #838383;
@amrewards__expiration__warning__background: #ffa63d;

//
//  Common
//  ----------------------------------------------

& when (@media-common = true) {
    .amrewards-expiration {
        & {
            border-radius: 20px;
            display: inline-block;
            padding: 3px 15px;
            white-space: nowrap;
        }

        &.-warning {
            background: @amrewards__expiration__warning__background;
            color: @color-white;
        }

        &.-critical {
            background: @amrewards__expiration__critical;
            color: @color-white;
        }

        &.-expired {
            background: @amrewards__expiration__expired__background;
            color: @amrewards__expiration__expired__color;
        }
    }

    .amrewards-info-table {
        & {
            border-top: 1px solid @color-gray80;
            color: @color-black;
        }

        .amrewards-table-header .col {
            color: @amrewards__table__header__color;
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .col.status {
            white-space: nowrap;
        }
    }

    .amrewards-current-balance {
        .amrewards-balance {
            font-size: 36px;
            font-weight: 700;
        }

        .amrewards-label {
            font-size: 18px;
        }
    }

    .amrewards-total-info {
        margin-bottom: 5px;
    }

    .amrewards-expiring-wrapper {
        &.table-wrapper {
            border-bottom: none;
            border-top: none;
        }

        .amrewards-title {
            font-size: 20px;
            font-weight: 600;
        }

        .amrewards-info-table {
            margin-top: 15px;
            max-width: 460px;
        }
    }

    .customer-information {
        margin-bottom: 35px;
    }

    .amrewards-qty-info {
        .amrewards-general {
            margin-bottom: 20px;
            min-width: 200px;
            padding-right: 10px;
        }

        .amrewards-description {
            margin-bottom: 20px;
        }
    }
}

//
//  Tablet
//  ----------------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .amrewards-pointsleft,
    .amrewards-info-table .amrewards-table-header .col.left {
        text-align: right;
    }

    .amrewards-qty-info {
        display: inline-flex;
    }

    .amrewards-general,
    .amrewards-description {
        margin-bottom: 0;
    }

    .amrewards-qty-info .amrewards-general {
        min-width: 460px;
        padding-bottom: 15px;
    }
}