@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/mixins';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/vue-interface/src/scss/custom-fields';

.input-group {

    &.is-invalid .input-group-prepend::after,
    &.is-invalid .input-group-prepend span,
    &.is-invalid .input-group-append::after,
    &.is-invalid .input-group-append span,
    &.is-invalid .form-control,
    &.is-invalid .custom-select,
    &.is-invalid .custom-control {
        color: $form-feedback-invalid-color;
        border-color: $form-feedback-invalid-color;
    }

    &.is-invalid .form-control,
    &.is-invalid .custom-select,
    &.is-invalid .custom-control {
        &::placeholder {
            color: $form-feedback-invalid-color;
        }
    }

    & > div:not(.input-group-prepend):not(.input-group-append):not(:last-child) .form-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:last-child) .custom-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:last-child) .custom-select {
        border-right: 0;
    }

    & > div:not(.input-group-prepend):not(.input-group-append):not(:first-child) .form-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:first-child) .custom-control,
    & > div:not(.input-group-prepend):not(.input-group-append):not(:first-child) .custom-select {
        border-left: 0;
    }

    .input-group-append,
    .input-group-prepend {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            z-index: 1;
            padding: .75em;
            transform: translateY(-50%);
        }
    }

    .input-group-text {
        font-size: $custom-control-font-size-base;
        padding: $custom-control-padding-y $custom-control-padding-x;
    }

    .input-group-prepend {
        .input-group-text {
            border-right: 0;
        }

        &::after {
            right: 0;
            border-right: $input-border-width solid $input-border-color;
        }
    }

    .input-group-append {
        .input-group-text {
            border-left: 0;
        }

        &::after {
            left: 0;
            border-left: $input-border-width solid $input-border-color;
        }
    }

    .input-group-text {
        background: inherit;
    }
}

.stripe-field-activity {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 35px;
    transform: translate(5px, 1.25em);
    transition: all .15s ease-in-out;
}

.stripe-field {
    position: relative;

    .form-control {
        width: 100%;
        padding: .9em;
        font-size: .9em;
        transition: all .15s ease-in-out;
        height: calc((1em * 1.5) + (0.75em * 2));
    }
}

.has-activity {
    .stripe-field .form-control {
        width: calc(100% - 35px);
    }

    .stripe-field + .stripe-field-activity {
        opacity: 1;
    }
}