.cc-helpdesk {
appearance: none;
position: fixed;
right: 0;
bottom: var(--cc-helpdesk-bottom, 0px);
margin: 10px 20px;
z-index: 999;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
padding: 12px;
border: 0;
border-radius: 999px;
background: var(--cc-helpdesk-background, #0d40ff);
color: var(--cc-helpdesk-color, #fff);
font: inherit;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.6px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
}
[dir="rtl"] .cc-helpdesk {
right: auto;
left: 0;
}
a.cc-helpdesk {
text-decoration: none;
}
button.cc-helpdesk {
appearance: none;
background: var(--cc-helpdesk-background, #0d40ff);
}
.cc-helpdesk[hidden] {
display: none;
}
.cc-helpdesk:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.cc-helpdesk__icon {
flex: 0 0 auto;
fill: currentColor;
}
.cc-helpdesk__label {
display: none;
text-transform: capitalize;
}
.cc-helpdesk__spinner,
#liveChat.cc-helpdesk--busy::after {
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: cc-helpdesk-spin 700ms linear infinite;
}
.cc-helpdesk__spinner {
display: none;
}
.cc-helpdesk--busy {
cursor: progress;
}
.cc-helpdesk--busy .cc-helpdesk__icon,
.cc-helpdesk--busy .cc-helpdesk__label {
visibility: hidden;
}
.cc-helpdesk--busy .cc-helpdesk__spinner {
position: absolute;
display: block;
}
#liveChat.cc-helpdesk--busy {
display: inline-flex;
align-items: center;
gap: 8px;
}
#liveChat.cc-helpdesk--busy::after {
content: "";
flex: 0 0 auto;
}
@media (max-width: 767.98px) {
.cc-helpdesk {
bottom: calc(var(--cc-helpdesk-bottom, 0px) + var(--cc-helpdesk-mobile-collision-offset, 0px));
}
}
@media (min-width: 768px) {
.cc-helpdesk {
gap: 8px;
padding: 13px 22px;
}
.cc-helpdesk__label {
display: block;
}
}
@media (prefers-reduced-motion: reduce) {
.cc-helpdesk__spinner,
#liveChat.cc-helpdesk--busy::after {
animation-duration: 1400ms;
}
}
@keyframes cc-helpdesk-spin {
to {
transform: rotate(360deg);
}
}