// LaterPay API credentials form
// Component to manage API credentials for LaterPay


.lp_api-credentials {
    float: left;
    position: relative;
    width: 50%;

    // render icons from icon font in pseudo elements
    &:before {
        color: $border;
        position: absolute;
        z-index: $zindex--recessed;
    }

    // micro-adjust size and position of test mode icon
    &.lp_api-credentials--sandbox:before {
        font-size: 90px;
        left: $fs--2;
        top: 69px;
    }

    // micro-adjust size and position of live mode icon
    &.lp_api-credentials--live {

        &:before {
            font-size: 75px;
            left: $fs;
            top: 83px;
        }

        // highlight the live mode icon in live mode
        &.lp_is-live:before {
            color: $laterpay-brand;
        }
    }

    /*
     * 1. Set equal height so that the additional button in live mode fieldset does not lead to different heights
     */
    .lp_api-credentials__fieldset {
        @extend %fieldset;

        margin-top: $fs--05;
        min-height: ($fs * 14); /* 1 */
    }

    .lp_api-credentials__legend {
        @extend %legend;
    }

    .lp_api-credentials__hint {
        @extend %hint-text;
    }

    .lp_api-credentials__list {
        list-style: none;
        padding: 0;
    }

    .lp_api-credentials__list-item {
        list-style: none;
        margin: 0 0 $fs--2;
        padding: 0;
    }

    .lp_api-credentials__list-item:last-child {
        margin-bottom: 0;
    }

    .lp_api-credentials__input {
        @extend %input;

        padding-left: round($fs * 2.8);
        width: ($fs * 22);
    }
}


// Responsiveness ------------------------------------------------------------------------------------------------------
@media (max-width:1050px) {
    .lp_api-credentials {

        &.lp_api-credentials--sandbox:before {
            font-size: 75px;
            top: 80px;
        }

        &.lp_api-credentials--live:before {
            font-size: 60px;
            left: $fs--15;
            top: 94px;
        }

        .lp_api-credentials__input {
            width: 290px;
        }
    }
}