/********************/
/***   BUTTONS   ****/
/********************/

:root {
    --btn-radius: 4px;
}

button {
    font-size: inherit;
    letter-spacing: .06rem;
}

.elementor-widget-ucaddon_button .elementor-widget-container {
    display: flex;
}

.btn {
    background: var(--color-primary);
	color: white;
    border-radius: var(--btn-radius);
    padding: var(--btn-padding-m);
    display: inline-flex;
    justify-content: flex-start;
	font-weight: var(--btn-font-weight);
    align-items: center;
	cursor: pointer;
	border: 2px solid var(--color-primary);
	line-height: 1;
	
	
	.icon {
		margin-right: 0.2rem;
	}
	// reset button styles on widget
		
	&__wrapper {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-radius: var(--btn-radius);
		padding: var(--btn-padding-md);		
	}
}


.btn--icon {
	padding-left: var(--spacing-xs);
    
	.icon {
		margin-right: .5rem;
	}

}

.btn--primary {
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn--secondary {
    background: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.btn--tertiary {
    background: var(--color-tertiary);
    border: 2px solid var(--color-tertiary);
}

.btn--accent {
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn--ghost {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn--text {
    background: transparent;
    border: 2px solid transparent;
    color: var(--color-primary);
}

.btn--textdiap {
    background: transparent;
    border: 2px solid transparent;
    color: white;
}

.btn--diap {
    background: white;
    border: 2px solid white;
    color: black;
}

.btn--ghostdiap {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.btn--xs      { padding: var(--btn-padding-xs); }
.btn--s       { padding: var(--btn-padding-s); }
.btn--l       { padding: var(--btn-padding-l); }
.btn--xl      { padding: var(--btn-padding-xl); }
.btn--full    { display: flex; flex: 1; }
.btn--rounded { border-radius: var(--spacing-xl); }

.btn.icon--right { 
	flex-direction: row-reverse; 
	
	.icon {
		margin-right: 0;
		margin-left: .1rem;
	}
}

.btn__wrapper .btn.icon--top              			{ flex-direction: column; }
.btn__wrapper .btn.icon--bottom  					{ flex-direction: column-reverse; }
.btn__wrapper .btn__label--left    					{ justify-content: flex-start; }
.btn__wrapper .btn__label--right    				{ justify-content: flex-end; }
.btn__wrapper .btn__label--center    				{ justify-content: center; }
.btn__wrapper .btn__label--right.btn.icon--right  	{ justify-content: flex-start; }
.btn__wrapper .btn__label--left.btn.icon--right  	{ justify-content: flex-end; }

.btn--right 	{ justify-content: flex-end!important; }
.btn--center 	{ justify-content: center!important;	 }


/** button vertical alignment label/icon fix **/

.btn {
    span { transform: translateY(0.1rem); }
    .icon { transform: translateY(0.1rem); }
    
    &--xs {
        span { transform: translateY(0.1rem); }
        .icon { transform: translateY(0.1rem); }
    }
    
    &--s {
        span { transform: translateY(0.1rem); }
        .icon { transform: translateY(0.1rem); }
    }
    
    &--l {
        span { transform: translateY(0.1rem); }
        .icon { transform: translateY(0.1rem) }
    }
    
    &--xl {
        span { transform: translateY(0.1rem); }
        .icon { transform: translateY(0.1rem); }
    }
}