@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

$stripe-element-input-padding-horizontal: 7px !default;
$stripe-element-input-margin-bottom: 12px !default;

.c-stripe-elements-component {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}

    .c-stripe-elements-component__input-wrapper {
        padding: 0 $stripe-element-input-padding-horizontal;
        margin-bottom: $stripe-element-input-margin-bottom;
        width: 100%;
        @include mq($from: tablet) {
            width: 50%;
        }
    }

        .c-stripe-elements-component__input-wrapper--full {
            width: 100%;
        }

        .c-stripe-elements-component__input-wrapper__inner {
            position: relative;
        }

    .c-stripe-elements__stripe-element {
        border: $c-input-border;
        box-shadow: none;
        height: $c-input-height;
        padding: $c-input-padding;
        padding-top: $c-input-padding-top-has-value;
        font-size: $c-input-font-size;
        font-weight: $c-input-font-weight;
        width: 100%;
        transition: border-color $default-animation-enter;
        background-color: $c-input-background-color;
        color: $c-input-color;
        border-radius: $c-input-border-radius;
    }

    .c-stripe-elements__stripe-element--empty {
        padding: $c-input-padding;
        padding-top: 14px;
    }

    .c-stripe-elements__stripe-element--invalid {
        border: $c-input-border--invalid;
    }

    .c-stripe-elements__stripe-element--focus {
        outline: none;
        border: $c-input-border--focused;
        transition-duration: $default-animation-time-exit;
    }

    .c-stripe-elements-component__floating-label {
        font-family: $c-input-font-family;
        font-size: $c-label-font-size;
        color: $c-input-label-color;
        position: absolute;
        top: 50%;
        left: $c-input-padding-horizontal +
            $c-input-border-width;
        transform-origin: $c-input-floating-label-transform-origin;
        transition: $c-input-floating-label-transition;
        transform: $c-input-floating-label-end-transform;
        pointer-events: none;
    }

    .c-stripe-elements__stripe-element--empty + .c-stripe-elements-component__floating-label {
        transform: $c-input-floating-label-start-transform;
    }

    .c-stripe-elements-component__cvv-hint-btn {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        opacity: 0.6;
        display: flex;
        align-items: center;
    }

    .c-stripe-elements-component__bottom-section {
        margin: 0 $stripe-element-input-padding-horizontal;
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }