/* Global Variables */
:root {
--button-font-size: var(--rsp-fs-300);
--button-font-weight: 400;
--button-line-height: 2;
--button-letter-spacing: 0.5px;
--button-transition: all 0.3s ease;
--button-min-height: 30px;
--button-padding: 0 10px;
--button-border-radius: 4px;
--button-accent-color: #2271b1;
--button-contrast-color: #000;
--button-secondary-bg: #fff;
}
/* Button Base Styles */
a.burst-button, button.burst-button, input.burst-button {
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
line-height: var(--button-line-height);
letter-spacing: var(--button-letter-spacing);
transition: var(--button-transition);
min-height: var(--button-min-height);
margin: 0;
padding: var(--button-padding);
border-radius: var(--button-border-radius);
text-align: center;
cursor: pointer;
text-decoration: none;
&--primary {
background: var(--button-accent-color);
color: var(--button-secondary-bg);
border: 1px solid var(--button-accent-color);
&:hover {
background: var(--button-accent-color);
color: var(--button-secondary-bg);
border-color: var(--button-accent-color);
box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.3);
}
}
&--secondary {
background: var(--rsp-grey-100);
color: var(--rsp-text-color-light);
border: 1px solid var(--rsp-grey-400);
&:hover {
background: var(--rsp-grey-200);
color: var(--rsp-text-color);
border-color: var(--rsp-grey-400);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
}
&--tertiary {
// red button
background: var(--rsp-red);
color: var(--rsp-text-color-white);
border: 1px solid var(--rsp-red);
&:hover {
background: var(--rsp-red-faded);
color: var(--rsp-red);
border-color: var(--rsp-red);
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);
}
}
&--pro {
background: var(--rsp-brand-primary);
color: var(--rsp-text-color-white);
border: 1px solid var(--rsp-brand-primary-dark);
&:hover {
background: var(--rsp-brand-primary-dark);
color: var(--button-secondary-bg);
border-color: var(--rsp-brand-primary-darker);
box-shadow: 0 0 0 3px var(--rsp-brand-primary-light);
}
}
}
.burst-button-icon {
background: transparent;
background: var(--rsp-grey-300);
color: #2271b1;
border: 1px solid transparent;
border-radius: 50%;
width: 1em;
height: 1em;
padding: 10px;
margin: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
padding: 15px;
margin: 0;
}
&--delete {
&:hover {
background: var(--rsp-red-faded);
svg path {
fill: var(--rsp-red);
}
}
}
}
.burst .burst-button.burst-button--date-range {
display: flex;
align-items: center;
padding: var(---rsp-filter-padding);
box-shadow: var(--rsp-box-shadow);
cursor: pointer;
gap: var(--rsp-spacing-xs);
color: var(--rsp-text-color-light);
background-color: var(--rsp-input-background-color);
background: var(--rsp-grey-200);
border: 1px solid var(--rsp-input-border-color);
border-radius: var(--rsp-border-radius-xs);
.burst-icon {
height: max-content;
}
}