/*!
* SportAdmin Calendar Pack — v1.0.0
* Extracted standalone CSS for activity-card, activities-archive-toolbar
* and the calendar patterns (calendar-list, activities-archive-stor,
* activities-month-calendar, activities-row).
*
* Color tokens use --sa-* CSS variables that the plugin's settings page
* writes to . Falls back to common theme.json color slugs (primary,
* accent, secondary, white) if not set.
*/
/* ─────────────────────────────────────────────────────────────────────────
* Generic Query Loop wrappers used by calendar patterns.
* Reset core border-radius/overflow that WP global styles add to .wp-block-post.
* ───────────────────────────────────────────────────────────────────────── */
.activities-month-calendar .wp-block-post,
.activities-grid-4 .wp-block-post,
.activities-archive-stor .wp-block-post,
.activities-row .wp-block-post {
border-radius: 0 !important;
overflow: visible !important;
}
.activities-month-calendar .wp-block-query .wp-block-post-template {
align-items: stretch;
}
.activities-grid-4 .wp-block-query .wp-block-post-template,
.activities-archive-stor .wp-block-query .wp-block-post-template {
align-items: stretch;
}
/* Horizontal row pattern: scroll on small screens */
.activities-row .wp-block-query .wp-block-post-template {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--wp--preset--spacing--20, 0.5rem);
scroll-snap-type: x proximity;
}
.activities-row .wp-block-post-template > .wp-block-post {
flex: 0 0 min(100%, 320px);
scroll-snap-align: start;
}
/* ─────────────────────────────────────────────────────────────────────────
* Activity card
* ───────────────────────────────────────────────────────────────────────── */
.activity-card {
display: flex;
flex-direction: column;
position: relative;
min-height: 11.25rem;
border-radius: var(--sa-card-radius, var(--wp--custom--card-radius, 8px));
overflow: hidden;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18)),
var(--sa-card-bg, var(--wp--preset--color--primary, #111111));
color: var(--sa-card-text, var(--wp--preset--color--white, #FFFFFF));
border: none;
box-shadow: var(--wp--preset--shadow--medium);
}
/* Full-card clickable overlay */
.activity-card__stretched-link {
position: absolute;
inset: 0;
z-index: 1;
text-decoration: none;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
/* Affordance chevron in bottom-right corner of clickable cards */
.activity-card--clickable {
cursor: pointer;
transition: background-color 0.15s ease;
}
.activity-card--clickable::after {
content: "›";
position: absolute;
right: 0.75rem;
bottom: 0.5rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
opacity: 0.5;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.activity-card--clickable:hover::after,
.activity-card--clickable:focus-within::after {
opacity: 1;
transform: translateX(2px);
}
.activity-card--clickable:hover,
.activity-card--clickable:focus-within {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.2)),
var(--sa-card-bg, var(--wp--preset--color--primary, #111111));
}
/* Action buttons inside a clickable card must sit above the stretched link */
.activity-card--clickable .activity-card__actions,
.activity-card--clickable .activity-card__btn-wrap,
.activity-card--clickable .activity-card__btn {
position: relative;
z-index: 2;
}
/* Return-highlight — pulses a card briefly after the user navigates back from
* the detail page so the eye finds where they left the list. */
@keyframes sportadmin-return-highlight {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 55%, transparent); }
60% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 0%, transparent); }
}
.activity-card.is-return-highlight,
.activity-list-row.is-return-highlight {
animation: sportadmin-return-highlight 1.8s ease-out;
}
/* Hide the chevron when action buttons crowd the bottom-right corner */
.activity-card--clickable:has(.activity-card__actions)::after {
display: none;
}
/* Card header (date block + group/type label) */
.activity-card__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
background-color: var(--sa-card-header-bg, var(--wp--preset--color--secondary, #F5F6F7));
color: var(--sa-card-header-text, var(--wp--preset--color--primary, #111111));
}
.activity-card__date-block {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.625rem;
}
.activity-card__date-num {
font-size: clamp(1.625rem, 2.4vw, 1.875rem);
font-weight: 800;
line-height: 1;
color: var(--sa-card-date-num, var(--wp--preset--color--accent, #1F2937));
}
.activity-card__date-meta {
display: flex;
flex-direction: column;
gap: 1px;
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.1;
text-transform: uppercase;
opacity: 0.7;
}
.activity-card__header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
max-width: 50%;
text-align: right;
}
.activity-card__header-label {
font-size: 0.5625rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
opacity: 0.75;
}
.activity-card__header-group {
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.55;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.activity-card__body {
display: flex;
flex-direction: column;
flex: 0 1 auto;
padding: 0.875rem;
gap: 0.5rem;
}
/* Match layout: stacked team rows */
.activity-card__teams {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.activity-card__team-row {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.activity-card__logo-wrap {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.activity-card__logo {
width: 100%;
height: 100%;
object-fit: contain;
}
.activity-card__team-name {
flex: 1;
min-width: 0;
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.activity-card__team-score {
flex-shrink: 0;
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
min-width: 1.5ch;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Training card: smaller title */
.activity-card__title-simple {
margin: 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
opacity: 0.9;
}
.activity-card__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.125rem;
padding-top: 0.5rem;
margin-top: 0.5rem;
border-top: 1px solid color-mix(in srgb, var(--sa-card-text, var(--wp--preset--color--white, #FFFFFF)) 12%, transparent);
font-size: 0.8125rem;
width: 100%;
}
.activity-card__meta-primary {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
width: 100%;
gap: 0.375rem;
}
.activity-card__meta-sep {
opacity: 0.55;
line-height: 1;
}
.activity-card__meta-item {
display: inline-flex;
align-items: center;
}
.activity-card__meta-league {
width: 100%;
font-size: 0.75rem;
opacity: 0.65;
}
.activity-card__meta-place-row {
width: 100%;
margin-top: 0.125rem;
opacity: 0.85;
}
.activity-card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--20, 0.5rem);
margin-top: var(--wp--preset--spacing--20, 0.75rem);
padding-top: var(--wp--preset--spacing--10, 0.25rem);
}
.activity-card__actions .wp-block-button__link {
white-space: nowrap;
min-height: 2.25rem;
padding-inline: 1rem;
font-size: 0.875rem;
}
/* Row layout: wider card, single row on desktop */
.activity-card--layout-row {
min-width: 360px;
flex-direction: row;
align-items: stretch;
}
.activity-card--layout-row .activity-card__header {
flex: 0 0 30%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.activity-card--layout-row .activity-card__body {
flex: 1;
}
@media (max-width: 600px) {
.activity-card--layout-row {
flex-direction: column;
min-width: 300px;
}
.activity-card--layout-row .activity-card__header {
flex: none;
width: 100%;
}
}
/* ─────────────────────────────────────────────────────────────────────────
* Activities archive toolbar — date range row
* ───────────────────────────────────────────────────────────────────────── */
.sportadmin-activities-archive-toolbar__chips--scope {
margin-top: var(--wp--preset--spacing--30, 1rem);
}
.sportadmin-activities-archive-toolbar__range {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--wp--preset--spacing--20, 0.75rem);
margin-top: var(--wp--preset--spacing--40, 1.25rem);
margin-bottom: var(--wp--preset--spacing--40, 1.25rem);
}
.sportadmin-activities-archive-toolbar__date-input {
min-height: 2.25rem;
padding: 0.375rem 0.625rem;
border: 1px solid var(--wp--preset--color--border, #e6e8eb);
border-radius: var(--sa-card-radius, var(--wp--custom--card-radius, 8px));
background: var(--wp--preset--color--background, #fff);
color: var(--wp--preset--color--body-text, #111);
font-size: 0.875rem;
}
.sportadmin-activities-archive-toolbar__range-submit {
min-height: 2.75rem;
padding: 0 1.25rem;
border-radius: 9999px;
border: 1px solid var(--wp--preset--color--border, #e6e8eb);
background: var(--wp--preset--color--ljus, #f5f6f7);
color: var(--wp--preset--color--body-text, #111);
font-weight: 600;
cursor: pointer;
}
.sportadmin-activities-archive-toolbar__range-submit:hover,
.sportadmin-activities-archive-toolbar__range-submit:focus-visible {
border-color: var(--wp--preset--color--primary, #1f2937);
outline: none;
}
/* Month heading injected by JS between month groups in the post-template grid. */
.activities-month-heading {
grid-column: 1 / -1;
padding-top: var(--wp--preset--spacing--80, 2rem);
margin-bottom: var(--wp--preset--spacing--40, 1rem);
}
.activities-month-heading:first-child {
padding-top: 0;
}
/* Load-prev and load-more wrappers — layout only.
* Visual styling (colors, radius, typography) comes from WordPress core button. */
.activities-month-calendar__load-prev-wrap,
.activities-month-calendar__load-more-wrap {
text-align: center;
max-width: 100%;
box-sizing: border-box;
}
.activities-month-calendar__load-prev-wrap[hidden],
.activities-month-calendar__load-more-wrap[hidden] {
display: none !important;
}
.activities-month-calendar__load-prev-wrap .wp-block-button__link,
.activities-month-calendar__load-more-wrap .wp-block-button__link {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
cursor: pointer;
text-decoration: none !important;
background: transparent !important;
border: 1px solid currentColor !important;
color: inherit;
}
.activities-month-calendar__load-prev-wrap {
margin-top: var(--wp--preset--spacing--60, 1.5rem);
margin-bottom: var(--wp--preset--spacing--60, 1.5rem);
}
.activities-month-calendar__load-more-wrap {
margin-top: var(--wp--preset--spacing--60, 1.5rem);
}
/* ─────────────────────────────────────────────────────────────────────────
* Calendar list view (viewMode="list"): one row per activity.
* ───────────────────────────────────────────────────────────────────────── */
.activities-list-calendar .wp-block-post {
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.activities-list-calendar .wp-block-query .wp-block-post-template {
display: flex !important;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
/* Day heading injected by JS above each day group */
.activities-list-calendar__day-heading {
display: grid;
grid-template-columns: 3ch 1fr;
align-items: baseline;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
font-weight: 700;
font-size: 0.875rem;
border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
margin: 0;
}
.activities-list-calendar__day-heading:first-child {
border-top: none;
}
.activities-list-calendar__day-heading .activities-list-calendar__day-num {
font-variant-numeric: tabular-nums;
font-weight: 800;
}
.activities-list-calendar__day-heading .activities-list-calendar__day-dow {
font-weight: 500;
opacity: 0.7;
text-transform: lowercase;
}
/* Month heading inside list calendar */
.activities-list-calendar__month-heading {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 0.5rem 0;
padding: 0.5rem 0.75rem 0.75rem;
border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
/* Toolbar for month/week navigation (< APRIL 2026 >) */
.activities-list-calendar__nav {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0 0.75rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.activities-list-calendar__nav-btn {
appearance: none;
background: transparent;
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
color: inherit;
min-width: 2.5rem;
height: 2.5rem;
border-radius: 4px;
cursor: pointer;
font: inherit;
font-size: 1.25rem;
font-weight: 700;
padding: 0 0.625rem;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.activities-list-calendar__nav-btn:hover,
.activities-list-calendar__nav-btn:focus-visible {
background: color-mix(in srgb, currentColor 8%, transparent);
outline: none;
}
.activities-list-calendar__nav-btn[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
.activities-list-calendar__nav-label {
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 1.125rem;
flex: 1;
text-align: left;
padding-left: 0.25rem;
}
/* "Idag" — tertiary action, text-only button. */
.activities-list-calendar__nav-today {
appearance: none;
background: transparent;
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
color: inherit;
height: 2.5rem;
padding: 0 0.875rem;
border-radius: 4px;
font: inherit;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
}
.activities-list-calendar__nav-today:hover,
.activities-list-calendar__nav-today:focus-visible {
background: color-mix(in srgb, currentColor 8%, transparent);
outline: none;
}
/* Single row in the list */
.activity-list-row {
display: grid;
grid-template-columns: 3.25rem 6.5rem minmax(0, 9rem) minmax(0, 1fr);
align-items: center;
gap: 0.625rem 0.875rem;
padding: 0.5rem 0.75rem;
border-top: 1px solid color-mix(in srgb, currentColor 6%, transparent);
font-size: 0.9375rem;
line-height: 1.4;
min-height: 2.25rem;
position: relative;
}
.activity-list-row:first-of-type {
border-top: none;
}
.activity-list-row:nth-of-type(odd) {
background: color-mix(in srgb, currentColor 3%, transparent);
}
/* Clickable list row — whole row goes to the activity detail page. */
.activity-list-row__stretched-link {
position: absolute;
inset: 0;
z-index: 1;
text-decoration: none;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.activity-list-row--clickable {
cursor: pointer;
}
.activity-list-row--clickable:hover,
.activity-list-row--clickable:focus-within {
background: color-mix(in srgb, currentColor 7%, transparent);
}
.activity-list-row--clickable .activity-list-row__group {
position: relative;
z-index: 2;
}
.activity-list-row__date {
display: inline-flex;
align-items: baseline;
gap: 0.375rem;
font-variant-numeric: tabular-nums;
}
/* Collapse date column visually on rows that share the date with the row above */
.activity-list-row--continued-day .activity-list-row__date {
visibility: hidden;
}
.activity-list-row__day {
font-weight: 800;
font-size: 1rem;
min-width: 1.5ch;
text-align: right;
}
.activity-list-row__dow {
opacity: 0.65;
font-size: 0.8125rem;
text-transform: lowercase;
}
.activity-list-row__time {
font-variant-numeric: tabular-nums;
opacity: 0.8;
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activity-list-row__group {
display: inline-flex;
align-items: center;
justify-self: start;
padding: 0.15rem 0.625rem;
border-radius: 9999px;
background: var(--sa-chip-active-bg, var(--wp--preset--color--accent, #1F2937));
color: var(--sa-chip-active-text, var(--wp--preset--color--white, #FFFFFF));
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.01em;
line-height: 1.4;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.activity-list-row__group:empty {
visibility: hidden;
}
.activity-list-row__title {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.activity-list-row__title .activity-list-row__link {
color: inherit;
text-decoration: none;
}
.activity-list-row__title .activity-list-row__link:hover {
text-decoration: underline;
}
.activity-list-row__place {
opacity: 0.7;
font-weight: 400;
}
.activity-list-row__place::before {
content: ", ";
opacity: 0.6;
}
.activity-list-row--match .activity-list-row__title {
font-weight: 700;
}
/* Mobile: rows stack into two lines so neither time nor place gets truncated. */
@media (max-width: 767px) {
.activity-list-row {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"date time group"
"date title title";
column-gap: 0.625rem;
row-gap: 0.125rem;
padding: 0.625rem 0.5rem;
align-items: start;
}
.activity-list-row__date {
grid-area: date;
flex-direction: column;
align-items: center;
gap: 0;
padding-top: 0.125rem;
min-width: 2.25rem;
}
.activity-list-row__day {
text-align: center;
min-width: 0;
font-size: 1.125rem;
}
.activity-list-row__dow {
font-size: 0.75rem;
margin-top: -0.125rem;
}
.activity-list-row__time {
grid-area: time;
overflow: visible;
font-size: 0.9375rem;
}
.activity-list-row__group {
grid-area: group;
justify-self: end;
max-width: 9rem;
}
.activity-list-row__title {
grid-area: title;
white-space: normal;
overflow: visible;
text-overflow: clip;
font-size: 0.875rem;
opacity: 0.9;
line-height: 1.35;
}
.activity-list-row__place::before {
content: " ";
opacity: 1;
}
}
/* Narrower tier — restore the original 3-column layout if the row gets cramped */
@media (max-width: 600px) {
.activity-list-row {
grid-template-columns: 3rem 5rem minmax(0, 1fr);
grid-template-areas:
"date time group"
"date title title";
row-gap: 0.25rem;
}
.activity-list-row__date { grid-area: date; }
.activity-list-row__time { grid-area: time; }
.activity-list-row__group { grid-area: group; text-align: right; }
.activity-list-row__title { grid-area: title; }
}
/* ─────────────────────────────────────────────────────────────────────────
* Filter chips (toolbar) — used by both activities and news toolbars.
* The activities toolbar PHP reuses the "sportadmin-news-archive-toolbar__chip"
* class name, so a single rule covers both.
* ───────────────────────────────────────────────────────────────────────── */
.sportadmin-news-archive-toolbar__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.625rem;
align-items: center;
}
@media (max-width: 767px) {
.sportadmin-news-archive-toolbar__chips {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
max-width: 100%;
padding-bottom: 4px;
margin-bottom: -4px;
}
.sportadmin-news-archive-toolbar__chips::-webkit-scrollbar {
display: none;
}
}
a.sportadmin-news-archive-toolbar__chip,
.sportadmin-news-archive-toolbar__chip {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
min-height: 2.25rem;
padding: 0 1rem;
border-radius: var(--chip-radius, 9999px);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none !important;
text-underline-offset: unset;
transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
border: 1px solid var(--wp--preset--color--border, #e6e8eb);
background-color: var(--sa-chip-inactive-bg, var(--wp--preset--color--secondary, #F5F6F7));
color: var(--sa-chip-inactive-text, var(--wp--preset--color--primary, #111111)) !important;
box-shadow: none;
}
a.sportadmin-news-archive-toolbar__chip:hover,
a.sportadmin-news-archive-toolbar__chip:focus,
a.sportadmin-news-archive-toolbar__chip:focus-visible,
.sportadmin-news-archive-toolbar__chip:hover,
.sportadmin-news-archive-toolbar__chip:focus,
.sportadmin-news-archive-toolbar__chip:focus-visible {
text-decoration: none !important;
background-color: var(--sa-chip-inactive-bg, var(--wp--preset--color--secondary, #F5F6F7));
color: var(--sa-chip-inactive-text, var(--wp--preset--color--primary, #111111)) !important;
border-color: var(--wp--preset--color--primary, #1f2937);
}
a.sportadmin-news-archive-toolbar__chip.is-active,
.sportadmin-news-archive-toolbar__chip.is-active {
background-color: var(--sa-chip-active-bg, var(--wp--preset--color--accent, #1F2937));
color: var(--sa-chip-active-text, var(--wp--preset--color--white, #FFFFFF)) !important;
border-color: var(--sa-chip-active-bg, var(--wp--preset--color--accent, #1F2937));
box-shadow: none;
}
a.sportadmin-news-archive-toolbar__chip:visited,
.sportadmin-news-archive-toolbar__chip:visited {
color: var(--sa-chip-inactive-text, var(--wp--preset--color--primary, #111111)) !important;
}
a.sportadmin-news-archive-toolbar__chip.is-active:visited,
.sportadmin-news-archive-toolbar__chip.is-active:visited {
color: var(--sa-chip-active-text, var(--wp--preset--color--white, #FFFFFF)) !important;
}
/* Group-select filter: used when group count > 6 so the chip row doesn't turn
* into a multi-line wall on clubs with many teams. */
.sportadmin-activities-archive-toolbar__group-select {
display: inline-flex;
width: 100%;
max-width: 320px;
}
.sportadmin-activities-archive-toolbar__select {
appearance: none;
-webkit-appearance: none;
width: 100%;
min-height: 2.5rem;
padding: 0 2.25rem 0 1rem;
border-radius: var(--chip-radius, 9999px);
border: 1px solid var(--sa-chip-active-bg, var(--wp--preset--color--accent, #1F2937));
background-color: var(--sa-chip-active-bg, var(--wp--preset--color--accent, #1F2937));
color: var(--sa-chip-active-text, var(--wp--preset--color--white, #FFFFFF));
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.875rem center;
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.sportadmin-activities-archive-toolbar__select:focus,
.sportadmin-activities-archive-toolbar__select:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-chip-active-bg, var(--wp--preset--color--accent, #1F2937)) 30%, transparent);
}
.sportadmin-activities-archive-toolbar__select option {
background-color: var(--wp--preset--color--ljus, #fff);
color: var(--wp--preset--color--body-text, #111);
}
/* Screen reader helper used by the toolbar's