.my-ticker[data-my-ticker] {
--my-ticker-border: #2b1b0f;
--my-ticker-bg: rgba(255, 255, 255, 0.92);
--my-ticker-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
--my-ticker-label-bg: var(--wp--preset--color--primary, #3b240e);
--my-ticker-label-fg: var(--wp--preset--color--base, #ffffff);
--my-ticker-text-color: #111111;
--my-ticker-field-bg-start: rgba(255, 255, 255, 0.35);
--my-ticker-field-bg-end: rgba(255, 255, 255, 0.12);
--my-ticker-bg-grad-1: var(--my-ticker-field-bg-start);
--my-ticker-bg-grad-2: var(--my-ticker-field-bg-end);
box-sizing: border-box;
width: var(--my-ticker-width-desktop, 85vw);
max-width: 100%;
overflow: hidden;
margin: 10px auto;
padding: 8px 12px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
border: 2px solid var(--my-ticker-border);
border-radius: 16px;
background: linear-gradient(
180deg,
var(--my-ticker-bg-grad-1),
var(--my-ticker-bg-grad-2)
);
box-shadow: var(--my-ticker-shadow);
color: var(--my-ticker-text-color);
}
.my-ticker__label {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
font-weight: 700;
padding: 8px 14px;
border-radius: 12px;
background: var(--my-ticker-label-bg);
color: var(--my-ticker-label-fg);
border: 2px solid var(--my-ticker-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 6px 14px rgba(0, 0, 0, 0.18);
width: auto;
min-width: max-content;
max-width: 45%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.my-ticker__wrapper {
display: block;
position: relative;
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
padding: 4px 6px;
border-radius: 12px;
background: transparent;
box-shadow: none;
}
.my-ticker__track {
display: flex;
align-items: center;
will-change: transform;
transform: translateX(0);
}
.my-ticker__content {
display: inline-flex;
align-items: center;
white-space: nowrap !important;
}
.my-ticker__msg {
display: inline-block;
margin-right: 32px;
font-weight: 600;
white-space: nowrap !important;
color: inherit;
}
@media (max-width: 600px) {
.my-ticker[data-my-ticker] {
width: var(--my-ticker-width-mobile, 96vw);
max-width: 100%;
padding: 6px 8px;
gap: 10px;
border-radius: 14px;
}
.my-ticker[data-my-ticker] .my-ticker__label {
padding: 7px 10px;
border-radius: 11px;
}
}