/*
// -------------------------------------------------------------------
// Theme caffista.com
// -------------------------------------------------------------------
// Hint: Die !importants an color sind leider nicht zu 
//       vermeiden wg. Divi
// -------------------------------------------------------------------
*/


/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
    /* Buttons: Default colors */
    --wps-button-primary-color:var(--wps-orange1);
    --wps-button-hover-color: var(--wps-orange2);
    --wps-button-text-color: #fff;
    --wps-button-hover-text-color: #fff;

    /* Buttons: Gray Color Variant */
    --wps-button-gray-primary: var(--wps-divi-colorpicker-black3);
    --wps-button-gray-hover: var(--wps-divi-colorpicker-black4);
    --wps-button-gray-text: #fff;
    --wps-button-gray-hover-text: #fff;

    /* Buttons: Display as link: Default colors (usually same as text) */
    --wps-button-display-as-link-primary-color: var(--wps-text-color);
    --wps-button-display-as-link-text-decoration: none;
    --wps-button-display-as-link-transition-duration-property-color: 0;
    --wps-button-display-as-link-transition-timing-property-color: none;
    --wps-button-display-as-link-hover-color: var(--wps-link-color);

    /* Transitions */
    /* Timing for each property */
    --wps-button-transition-duration-property-color: 0.1s; /* 0.6s */
    --wps-button-transition-duration-property-background: 0.3s; /* 0.8s */
    /* Curve for all properties */
    --wps-button-transition-timing-property-color: ease; /* ease */

    /* Border radius */
    --wps-button-border-radius: 0;

    /* Text decoration */
    --wps-button-text-decoration: none;

}

/* ========================================
   BASE LINK STYLING
   ======================================== */
a.wps-button-link {
    color: var(--wps-button-primary-color)!important;
    text-decoration: var(--wps-button-text-decoration);
    transition-property: color;
    transition-duration: var(--wps-button-transition-duration-property-color);
    transition-timing-function: var(--wps-button-transition-timing-property-color);
}




a.wps-button-link:hover {
    color: var(--wps-button-hover-color)!important;
}

/* ========================================
   STANDARD BUTTON STYLING
   ======================================== */
.wps-button a.wps-button-link {
    background-color: var(--wps-button-primary-color);
    color: var(--wps-button-text-color)!important;
    border-radius: var(--wps-button-border-radius);
    text-decoration: var(--wps-button-text-decoration);
    transition-property: background-color, color;
    transition-duration: var(--wps-button-transition-duration-property-background), var(--wps-button-transition-duration-property-color);
    transition-timing-function: var(--wps-button-transition-timing-property-color), var(--wps-button-transition-timing-property-color);
}


.wps-button a.wps-button-link:hover {
    background-color: var(--wps-button-hover-color);
    color: var(--wps-button-hover-text-color)!important;
}

/* ========================================
   LINK DISPLAY MODE STYLING
   ======================================== */
.wps-button.wps-button-display-as-link a.wps-button-link {
    background-color: transparent;
    color: var(--wps-button-display-as-link-primary-color)!important;
    border-radius: 0;
    text-decoration: var(--wps-button-display-as-link-text-decoration);
    transition-property: color;
    transition-duration: var(--wps-button-display-as-link-transition-duration-property-color);
    transition-timing-function: var(--wps-button-display-as-link-transition-timing-property-color);

    /* Damit Links nie umbrechen */
    /* Das kann das Layout zerstoeren */
    white-space: nowrap;

}

.wps-button.wps-button-display-as-link a.wps-button-link:hover {
    background-color: transparent;
    color: var(--wps-button-display-as-link-hover-color)!important;
}

/* ========================================
   BUTTON WITH ICON STYLING
   ======================================== */



.wps-button.wps-button-with-icon:not(.wps-button-display-as-link) a.wps-button-link {
    background-color: var(--wps-button-primary-color);
    color: var(--wps-button-text-color)!important;
    border-radius: var(--wps-button-border-radius);
    text-decoration: var(--wps-button-text-decoration);
    transition-property: background-color, color;
    transition-duration: var(--wps-button-transition-duration-property-background), var(--wps-button-transition-duration-property-color);
    transition-timing-function: var(--wps-button-transition-timing-property-color), var(--wps-button-transition-timing-property-color);
}

.wps-button.wps-button-with-icon:not(.wps-button-display-as-link) a.wps-button-link:hover {
    background-color: var(--wps-button-hover-color)!important;
    color: var(--wps-button-hover-text-color)!important;
}

/* ========================================
   GRAY BUTTON VARIANT
   ======================================== */

/* Gray Button - Standard */
.wps-button.wps-button-gray a.wps-button-link {
    background-color: var(--wps-button-gray-primary);
    color: var(--wps-button-gray-text)!important;
}

.wps-button.wps-button-gray a.wps-button-link:hover {
    background-color: var(--wps-button-gray-hover)!important;
    color: var(--wps-button-gray-hover-text)!important;
}

/* Gray Button - Link Display Mode */
.wps-button.wps-button-gray.wps-button-display-as-link a.wps-button-link {
    background-color: transparent !important;
    color: var(--wps-button-gray-primary)!important;
}

.wps-button.wps-button-gray.wps-button-display-as-link a.wps-button-link:hover {
    background-color: transparent !important;
    color: var(--wps-button-gray-hover)!important;
}

/* Gray Button - With Icon */
.wps-button.wps-button-gray.wps-button-with-icon:not(.wps-button-display-as-link) a.wps-button-link {
    background-color: var(--wps-button-gray-primary);
    color: var(--wps-button-gray-text)!important;
}

.wps-button.wps-button-gray.wps-button-with-icon:not(.wps-button-display-as-link) a.wps-button-link:hover {
    background-color: var(--wps-button-gray-hover)!important;
    color: var(--wps-button-gray-hover-text)!important;
}

/* ========================================
   OPTIONAL TRANSITION EFFECT
   ======================================== */

/*
// -------------------------------------------------------------------
// Has to be added manually in the button renderer
// -------------------------------------------------------------------
*/
.wps-transition-caffista 
{
    /* For letter-spacing: 1px use this timing */
    transition: letter-spacing 0.3s ease!important;

    /* For letter-spacing: 2px use this timing */

    /* transition: letter-spacing 0.2s ease; */
    transition: background-color 0.2s ease;

    /* transition: letter-spacing 0.2s ease-in-out; */
}

.wps-transition-caffista:hover 
{
    /* letter-spacing: 2px; */
    letter-spacing: 1px;
    background-color: inherit;
}