/** Compatibility with Contact Form 7 **/

@import '../../../assets/sass/config';
@import '../../../assets/sass/mixins';
@import '../../../assets/sass/direction';

.wpcf7 .btn,
.wpcf7-submit {
    --alpha-btn-skin-color: var(--alpha-primary-color);
    --alpha-btn-color: var(--alpha-white-color);
    --alpha-btn-bd-color: var(--alpha-primary-color);
    --alpha-btn-bg-color: var(--alpha-primary-color);
    --alpha-btn-hover-color: var(--alpha-white-color);
    --alpha-btn-hover-bd-color: var(--alpha-primary-color-hover);
    --alpha-btn-hover-bg-color: var(--alpha-primary-color-hover);
    --alpha-btn-active-color: var(--alpha-change-border-color-light, --alpha-btn-hover-color);
    --alpha-btn-active-bd-color: var(--alpha-primary-color-hover, --alpha-btn-hover-bd-color);
    --alpha-btn-active-bg-color: var(--alpha-primary-color-hover, --alpha-btn-hover-bg-color);

    display: inline-block;
    border: 2px solid var(--alpha-btn-bd-color);
    background-color: var(--alpha-btn-bg-color);
    color: var(--alpha-btn-color);
    outline: 0;
    border-radius: 0;
    // Height 44px, Width 120px for default
    padding: 1.3rem 2rem;
    font-weight: 600;
    font-size: var(--alpha-body-font-size);
    letter-spacing: -.025em;
    line-height: 1;
    text-transform: capitalize;
    text-align: center;
    transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s;
    white-space: nowrap;
    cursor: pointer;

    i {
        display: inline-block;
        margin-#{$left}: var(--alpha-btn-icon-spacing);
        font-size: var(--alpha-btn-icon-size);
        vertical-align: -0.15em;
        line-height: 0;
    }

    &:hover {
        color: var(--alpha-btn-hover-color);
        border-color: var(--alpha-btn-hover-bd-color);
        background-color: var(--alpha-btn-hover-bg-color);
    }

    &:active,
    &:focus {
        color: var(--alpha-btn-active-color, --alpha-btn-hover-color);
        border-color: var(--alpha-btn-active-bd-color, --alpha-btn-hover-bd-color);
        background-color: var(--alpha-btn-active-bg-color, --alpha-btn-hover-bg-color);
    }
}

.wpcf7 {
    .screen-reader-response {
        position: absolute !important;
        clip: rect(1px, 1px, 1px, 1px);
    }
}

.wpcf7-form {
    --alpha-form-field-height: 46px;
    --alpha-form-textarea-height: auto;
    --alpha-label-bottom-spacing: 0;
    --alpha-form-field-invalid-border-color: #f00;
    --alpha-form-field-invalid-color: #f00;
    --alpha-form-align: $left;

    text-align: var(--alpha-form-align);

    .wpcf7-form-control-wrap {
        display: block;
    }

    label+.wpcf7-form-control-wrap {
        margin-top: var(--alpha-label-bottom-spacing);
    }

    span .wpcf7-form-control {
        width: 100%;
    }

    input[type='email'],
    input[type='date'],
    input[type='search'],
    input[type='number'],
    input[type='text'],
    input[type='tel'],
    input[type='url'],
    input[type='password'],
    textarea,
    select {
        border-radius: var(--alpha-border-radius);
        height: var(--alpha-form-field-height);
        min-height: 0;
        text-align: inherit;
    }

    .wpcf7-textarea {
        height: var(--alpha-form-textarea-height);
    }

    .wpcf7-not-valid {
        border-color: var(--alpha-form-field-invalid-border-color);
    }

    .wpcf7-spinner {
        position: relative;
        visibility: hidden;

        &:before {
            position: absolute;
            top: 0;
            left: 20px;
            margin-top: 2px;
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid rgba(0, 0, 0, 0);
            border-left-color: var(--color-gray-900);
            border-radius: 50%;
            vertical-align: middle;
            animation: spin 0.45s infinite linear;
        }

    }

    &.submitting .wpcf7-spinner {
        visibility: visible;
    }
}

.submitting [type="submit"] {
    pointer-events: none;
}

.wpcf7-response-output {
    display: none;
    margin: 2rem 0 0;
    padding: .8em 1.5em;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--alpha-white-color);
    border: 1px solid var(--alpha-danger-color);
    background-color: var(--alpha-danger-color);

    .alpha-rounded-skin & {
        border-radius: var(--alpha-corner-sm);
    }
}

form:is(.sent, .invalid, .unaccepted, .spam, .failed, .aborted) .wpcf7-response-output {
    display: flex
}

.wpcf7-not-valid-tip {
    display: block;
    margin-top: 5px;
    color: var(--alpha-form-field-invalid-color);
    font-size: 1.2rem;
}

.wpcf7-list-item {
    display: inline-block;
    margin-inline-end: 10px
}