@import url("https://static.leadpages.net/fonts/valueserif_typeset.css");
@import url("https://static.leadpages.net/fonts/apercu_typeset.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");

/*
* This is a css style sheet that attempts to replicate the theme of leadpages.com
* It is not a perfect replication of the design used but it is good enough for our 
* needs here in the plugin.
*
* Refer to our UI components library for further context of button styles.
*/

:root {
    /* Button Colors */
    --main-blue-color: #3858e9;
    --lp-purple: #603eff;
    --lp-purple-hover: #4d32cc;
    --contrast-text: #ffffff;
    --focus: #f0f0f1;
    --hover: #cccccc;

    /* Alert Colors */
    --lp-error: #bf0711;
    --lp-error-dark: #330101;
    --lp-error-light: #f8d7da;
    --lp-info: #00848e;
    --lp-info-dark: #003135;
    --lp-info-light: #e0f5f5;
}

/* Marketing themed button */
.marketing-button {
    font-family: Apercu Pro;
    padding: 12px 24px 12px 24px;
    font-size: 16px;
    border-radius: 24px;
    height: 40px;
}

/* Product themed button */
.product-button {
    font-family: Open Sans;
    padding: 8px 16px;
    font-size: 14px;
    transition: 0.3s;
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
}

/* Contained style */
.contained {
    color: var(--contrast-text);
    background-color: var(--lp-purple);
}

.contained:hover,
.contained:focus {
    color: var(--contrast-text);
    background-color: var(--lp-purple-hover);
    transition: 0.3s;
    outline: none !important;
    box-shadow: none !important;
}

/* Outlined style */
.outlined {
    color: var(--lp-purple);
    background-color: var(--contrast-text);
    border-radius: 28px;
    border: 1px solid var(--lp-purple);
}

.outlined:hover,
.outlined:focus {
    color: var(--lp-purple);
    background-color: var(--hover);
    outline: none !important;
    box-shadow: none !important;
}

/* Text style */
.text {
    color: var(--lp-purple);
    background-color: var(--contrast-text);
    border: none;
    font-weight: 600;
}

.text:hover,
.text:focus {
    color: var(--lp-purple-hover);
    background-color: var(--focus);
    border: none;
    box-shadow: none !important;
    outline: none !important;
}

/* Alert styles */
.lp-alert {
    font-family: Apercu Pro;
    border-radius: 2px;
    padding: 6px 16px;
    font-weight: 400;
    line-height: 1.25rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
}

.lp-alert-error {
    background-color: var(--lp-error-light);
    color: var(--lp-error-dark);
}

.lp-alert-info {
    background-color: var(--lp-info-light);
    color: var(--lp-info-dark);
}

.lp-alert-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.lp-error-icon {
    color: var(--lp-error);
    fill: var(--lp-error);
}

.lp-info-icon {
    color: var(--lp-info);
    fill: var(--lp-info);
}

.lp-alert-message {
    padding: 9px 0 6px;
    font-size: 0.9375rem;
}

.lp-message-error {
    color: var(--lp-error-dark);
}

.lp-message-info {
    color: var(--lp-info-dark);
}