/* Shared components. Loaded after api.css and before every other cb stylesheet, so features can override. */

:root {
    --cb-field-bg: var(--global-palette8);
    --cb-field-border: 2px solid transparent;
    --cb-field-border-focus: var(--global-palette1);
    --cb-chosen-bg: var(--global-palette7);
    --cb-chosen-bg-hover: var(--global-palette7);
    --cb-choice-hover-bg: var(--global-palette7);
    --cb-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* without color-mix (Safari before 16.2) chosen and hovered choices fall back to palette7 */
@supports (color: color-mix(in srgb, red, white)) {
    :root {
        --cb-chosen-bg: color-mix(in srgb, var(--global-palette1) 22%, var(--global-palette9));
        --cb-chosen-bg-hover: color-mix(in srgb, var(--global-palette1) 32%, var(--global-palette9));
        --cb-choice-hover-bg: color-mix(in srgb, var(--global-palette3) 14%, transparent);
    }
}

/* Icons */
/* SVG icons as masks so the background sets their colour */
.cb-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: var(--global-palette4);
    -webkit-mask: var(--cb-icon) center / contain no-repeat;
    mask: var(--cb-icon) center / contain no-repeat;
}

.cb-icon--more { --cb-icon: url("../images/icons/ellipsis.svg"); }
.cb-icon--reaction-add { --cb-icon: url("../images/icons/smile-plus.svg"); }
.cb-icon--thumb-up { --cb-icon: url("../images/icons/thumbs-up.svg"); }
.cb-icon--thumb-down { --cb-icon: url("../images/icons/thumbs-down.svg"); }
.cb-icon--search { --cb-icon: url("../images/icons/search.svg"); }

/* Buttons */
/* Kadence restyles button:focus/:active, so the resting look is restated here;
   variants only set the custom properties */
.cb-button {
    --cb-button-bg: var(--global-palette8);
    --cb-button-bg-hover: var(--cb-button-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--cb-button-bg);
    color: var(--cb-button-fg, var(--global-palette3));
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

/* without color-mix (Safari before 16.2) the hover keeps the button's colour */
@supports (color: color-mix(in srgb, red, white)) {
    .cb-button {
        --cb-button-bg-hover: color-mix(in srgb, var(--cb-button-bg), white 8%);
    }
}

/* Kadence restyles buttons on hover, focus and active */
.cb-button:hover,
.cb-button:focus,
.cb-button:active {
    background: var(--cb-button-bg);
    color: var(--cb-button-fg, var(--global-palette3));
    box-shadow: none;
}

/* hover look only under a real pointer (touch keeps :hover after a tap); a disabled button doesn't react */
@media (hover: hover) {
    .cb-button:hover:not(:disabled) {
        background: var(--cb-button-bg-hover);
        color: var(--cb-button-fg, var(--global-palette3));
        box-shadow: none;
    }
}

.cb-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* busy (formHelper.setButtonBusy): label kept invisible so the width stays; .cb-button--busy-label shows it beside the spinner */
.cb-button[aria-busy="true"],
.cb-text-button[aria-busy="true"] {
    position: relative;
    opacity: 1;
    cursor: progress;
}

.cb-button[aria-busy="true"]:not(.cb-button--busy-label) {
    color: transparent;
}

.cb-button[aria-busy="true"]::after,
.cb-text-button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: var(--cb-button-fg, var(--global-palette3));
    -webkit-mask: url("../images/icons/loader-circle.svg") center / contain no-repeat;
    mask: url("../images/icons/loader-circle.svg") center / contain no-repeat;
    animation: cb-spin 0.8s linear infinite;
}

.cb-text-button[aria-busy="true"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cb-text-button[aria-busy="true"]::after {
    position: static;
    order: -1;
    margin: 0;
    background: var(--global-palette1);
}

.cb-button--busy-label[aria-busy="true"]::after {
    position: static;
    order: -1;
    margin: 0 8px 0 0;
}

@keyframes cb-spin {
    to {
        transform: rotate(360deg);
    }
}

.cb-button--primary {
    --cb-button-bg: var(--global-palette1);
}

.cb-button--danger {
    --cb-button-fg: var(--global-palette13);
}

.cb-button--quiet {
    --cb-button-fg: var(--global-palette4);
}

.cb-button--pill {
    height: 32px;
    padding: 0 12px;
    border-radius: 9999px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

@media (max-width: 850px) {
    .cb-button {
        position: relative;
    }

    .cb-button::before {
        content: "";
        position: absolute;
        inset: -2px 0;
    }

    .cb-button--pill::before {
        inset: -6px 0;
    }
}

/* no iOS double-tap zoom on fast taps; pinch zoom stays */
button,
a,
[role="switch"],
.cb-sheet-row {
    touch-action: manipulation;
}

/* Avatars */
.cb-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--cb-avatar, 24px);
    height: var(--cb-avatar, 24px);
    border-radius: 50%;
    background: var(--cb-avatar-bg, var(--global-palette8));
    color: var(--global-palette3);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

.cb-avatar .cb-icon {
    --cb-icon: url("../images/icons/user.svg");
    width: 16px;
    height: 16px;
}

/* Text buttons */
.cb-text-button {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
}

.cb-text-button,
.cb-text-button:hover,
.cb-text-button:focus,
.cb-text-button:active {
    background: none;
    color: var(--global-palette1);
    box-shadow: none;
}

/* flex drops the space between label and count; gap restores it */
.cb-load-more {
    display: inline-flex;
    gap: 4px;
    padding: 8px 0;
    line-height: 24px;
}

@media (max-width: 767px) {
    .cb-load-more {
        font-size: 16px;
    }
}

a.cb-text-button,
a.cb-text-button:visited {
    color: var(--global-palette1);
    text-decoration: none;
}

/* grey, for a secondary link; the states repeat it because Kadence colours links and buttons on them */
.cb-text-button.cb-text-button--quiet,
a.cb-text-button.cb-text-button--quiet:visited,
.cb-text-button.cb-text-button--quiet:hover,
.cb-text-button.cb-text-button--quiet:focus,
.cb-text-button.cb-text-button--quiet:active {
    color: var(--global-palette5);
}

@media (hover: hover) {
    .cb-text-button:hover {
        text-decoration: underline;
    }
}

.cb-text-button::before {
    content: "";
    position: absolute;
    inset: -12px -8px;
}

.cb-text-button--inline {
    font: inherit;
}

/* a link inside a line of text keeps its line's height (DESIGN.md, sizes): no tap area over the field above */
.cb-text-button--inline::before {
    inset: 0;
}

/* a spinner would widen the line and move the text around it: an inline one only greys out */
.cb-text-button--inline[aria-busy="true"] {
    display: inline;
    color: var(--global-palette5);
    text-decoration: none;
}

.cb-text-button--inline[aria-busy="true"]::after {
    content: none;
}

.cb-text-button:disabled:not([aria-busy]) {
    color: var(--global-palette5);
    text-decoration: none;
    cursor: default;
}

/* Switches */
.cb-switch {
    position: relative;
    flex: none;
    width: 46px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
}

.cb-switch,
.cb-switch:hover,
.cb-switch:focus,
.cb-switch:active {
    background: var(--global-palette7);
    box-shadow: none;
}

.cb-switch[aria-checked="true"],
.cb-switch[aria-checked="true"]:hover,
.cb-switch[aria-checked="true"]:focus,
.cb-switch[aria-checked="true"]:active {
    background: var(--global-palette1);
}

.cb-switch::before {
    content: "";
    position: absolute;
    inset: -8px -4px;
}

.cb-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--global-palette4);
}

.cb-switch[aria-checked="true"]::after {
    background: var(--global-palette3);
    transform: translateX(18px);
}

.cb-switch:disabled {
    cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
    .cb-switch::after {
        transition: transform 0.15s;
    }
}

/* Chips */
.cb-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}

.cb-chip,
.cb-chip:hover,
.cb-chip:focus,
.cb-chip:active {
    border: 2px solid var(--global-palette7);
    background: transparent;
    color: var(--global-palette4);
    box-shadow: none;
}

/* larger tap area; chip rows are 8px apart so the areas don't overlap */
.cb-chip::before {
    content: "";
    position: absolute;
    inset: -6px -2px;
}

.cb-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) {
    .cb-chip:hover {
        background: var(--cb-choice-hover-bg);
        color: var(--global-palette3);
    }
}

.cb-chip:disabled {
    border-color: var(--global-palette8);
    color: var(--global-palette5);
    cursor: default;
}

@media (hover: hover) {
    .cb-chip:disabled:hover {
        background: transparent;
        color: var(--global-palette5);
    }
}

.cb-chip[aria-pressed="true"],
.cb-chip:has(input:checked) {
    border-color: transparent;
    background: var(--cb-chosen-bg);
    color: var(--global-palette1);
}

/* Segments */
.cb-segment {
    display: flex;
    gap: 4px;
}

.cb-segment-option {
    flex: 1 1 auto;
}

/* Selects */
.cb-select {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    margin: 0;
}

.cb-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: var(--global-palette4);
    -webkit-mask: url("../images/icons/chevron-down.svg") center / contain no-repeat;
    mask: url("../images/icons/chevron-down.svg") center / contain no-repeat;
    pointer-events: none;
}

.cb-select--field {
    display: flex;
    width: 100%;
}

.cb-select--field::after {
    right: 16px;
}

.cb-select select.cb-input {
    padding-right: 48px;
}

.cb-select select {
    max-width: 100%;
    height: 40px;
    margin: 0;
    padding: 6px 40px 6px 12px;
    border: 2px solid transparent;
    border-radius: 4px;
    background: var(--global-palette8);
    color: var(--global-palette3);
    font-size: 16px;
    line-height: 24px;
    box-shadow: none;
    appearance: none;
    cursor: pointer;
}

/* Kadence's select:focus look sticks after a click */
.cb-select select:focus {
    border-color: transparent;
    background: var(--global-palette8);
    box-shadow: none;
}

/* system option lists: Kadence's "option { color: #333 }" is dark on dark on Windows */
.cb-select select,
body select.cb-input {
    color-scheme: dark;
}

.cb-select select option,
.cb-select select:focus option,
body select.cb-input option,
body select.cb-input:focus option {
    background: var(--global-palette8);
    color: var(--global-palette3);
}

/* customizable select (base-select) for mouse users; touch keeps the system picker */
@supports (appearance: base-select) {
    @media (pointer: fine) {
        .cb-select select,
        .cb-select select::picker(select),
        body select.cb-input,
        body select.cb-input::picker(select) {
            appearance: base-select;
        }

        .cb-select select::picker-icon {
            display: none;
        }

        .cb-select:has(select:open)::after {
            transform: rotate(180deg);
        }

        body select.cb-input::picker-icon {
            content: '';
            width: 20px;
            height: 20px;
            background: var(--global-palette4);
            -webkit-mask: url("../images/icons/chevron-down.svg") center / contain no-repeat;
            mask: url("../images/icons/chevron-down.svg") center / contain no-repeat;
        }

        body select.cb-input:open::picker-icon {
            transform: rotate(180deg);
        }

        .cb-select select::picker(select),
        body select.cb-input::picker(select) {
            max-height: 320px;
            margin: 4px 0;
            padding: 4px;
            border: 0;
            border-radius: 4px;
            background: var(--global-palette8);
            color: var(--global-palette3);
            box-shadow: var(--cb-float-shadow);
        }

        .cb-select select option,
        body select.cb-input option {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 0 12px 0 8px;
            border-radius: 4px;
            background: none;
            font-size: 16px;
            line-height: 24px;
            cursor: pointer;
        }

        /* highlight the keyboard-focused option only while no option is hovered */
        .cb-select select option:hover,
        .cb-select select:not(:has(option:hover)) option:focus-visible,
        body select.cb-input option:hover,
        body select.cb-input:not(:has(option:hover)) option:focus-visible {
            background: var(--global-palette7);
        }

        .cb-select select option:focus-visible,
        body select.cb-input option:focus-visible {
            outline: none;
        }

        .cb-select select option:checked,
        body select.cb-input option:checked {
            font-weight: 500;
        }

        .cb-select select option::checkmark,
        body select.cb-input option::checkmark {
            content: '';
            width: 16px;
            height: 16px;
            background: var(--global-palette1);
            -webkit-mask: url("../images/icons/check.svg") center / contain no-repeat;
            mask: url("../images/icons/check.svg") center / contain no-repeat;
        }
    }
}

/* Kadence greys */
/* Kadence's defaults use palette6, the theme keeps them on palette5; "body" outranks Kadence, which loads after this file */
body ::placeholder {
    color: var(--global-palette5);
}

body input[type=text]:focus,
body input[type=email]:focus,
body input[type=url]:focus,
body input[type=password]:focus,
body input[type=search]:focus,
body input[type=number]:focus,
body input[type=tel]:focus,
body input[type=range]:focus,
body input[type=date]:focus,
body input[type=month]:focus,
body input[type=week]:focus,
body input[type=time]:focus,
body input[type=datetime]:focus,
body input[type=datetime-local]:focus,
body input[type=color]:focus,
body textarea:focus,
body select:focus {
    border-color: var(--global-palette5);
}

body .search-form .kadence-search-icon-wrap,
body #search-drawer .drawer-inner input.search-field,
body #search-drawer .drawer-inner .kadence-search-icon-wrap,
body .wp-block-latest-posts__post-author,
body .wp-block-latest-posts__post-date,
body .widget_archive li,
body .widget_recent_entries ul li .post-date {
    color: var(--global-palette5);
}

body .wp-block-table thead {
    border-bottom-color: var(--global-palette5);
}

body .wp-block-table tfoot {
    border-top-color: var(--global-palette5);
}

body .wp-block-table td,
body .wp-block-table th {
    border-color: var(--global-palette5);
}

/* Text fields */
/* "body" prefix beats Kadence's input styles; features override with context + element + class */
body input.cb-input,
body textarea.cb-input,
body select.cb-input {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 16px;
    border: var(--cb-field-border);
    border-radius: 4px;
    background: var(--cb-field-bg);
    color: var(--global-palette3);
    caret-color: var(--global-palette1);
    font-size: 16px;
    line-height: 24px;
    box-shadow: none;
}

body input.cb-input,
body select.cb-input {
    height: 48px;
}

/* base-select doesn't centre the text vertically */
body select.cb-input {
    padding-top: 10px;
    padding-bottom: 10px;
}

body input.cb-input--control {
    height: 40px;
}

body textarea.cb-input {
    padding-top: 12px;
    padding-bottom: 12px;
}

body input.cb-input:focus,
body textarea.cb-input:focus,
body select.cb-input:focus {
    border-color: var(--cb-field-border-focus);
    outline: none;
    box-shadow: none;
}

/* Scroll fade */
/* js/scroll-fade.js sets the classes while the row overflows; js/account-header.js scrolls
   the active tab clear of the 48px fade */
.cb-scroll-fade.has-more-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}

.cb-scroll-fade.has-more-left {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}

.cb-scroll-fade.has-more-left.has-more-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Account lists */
.cb-list-layout {
    margin-bottom: 32px;
}

/* --cb-list-sticky-top: height of what sticks above, set by js/account-header.js */
.entry-content .cb-list-group-head {
    position: sticky;
    top: var(--cb-list-sticky-top, 0);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 8px 0;
    background: var(--global-palette9);
    color: var(--global-palette3);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.cb-list-group-count {
    color: var(--global-palette5);
    font-weight: 400;
}

/* the list loads after first paint: keep the footer below the fold so nothing shifts */
#inner-wrap:has(.cb-list-layout) {
    min-height: 100vh;
    min-height: 100svh;
}

/* PHP prints both controls; only the width picks which shows, never JS */
@media (min-width: 1200px) {
    .cb-list-layout.has-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start;
        gap: 48px;
    }

    .cb-list-layout .cb-list-tools {
        display: none;
    }
}

.cb-list-side {
    position: sticky;
    /* js/account-list.js scrolls the list back to this 24px after a filter pick */
    top: calc(var(--cb-list-sticky-top, 0px) + 24px);
    /* a short window scrolls the column in itself instead of hiding its end */
    max-height: calc(100vh - var(--cb-list-sticky-top, 0px) - 48px);
    overflow-y: auto;
    /* the service rows reach 8px past the column (.cb-service-option): room for them inside the scroll box, no sideways scroll */
    overflow-x: hidden;
    margin-inline: -8px;
    padding-inline: 8px;
}

@media (max-width: 1199px) {
    .cb-list-side {
        display: none;
    }
}

.cb-list-tools {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.cb-list-tools[hidden] {
    display: none;
}

.cb-list-search {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.cb-list-search .cb-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    margin-top: -10px;
    background: var(--global-palette5);
    pointer-events: none;
}

.cb-list-search input.cb-input {
    padding: 0 12px 0 42px;
}

.cb-list-side .cb-list-search {
    margin-bottom: 24px;
}

.cb-filter-button {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.cb-filter-button,
.cb-filter-button:hover,
.cb-filter-button:focus,
.cb-filter-button:active {
    background: var(--global-palette8);
    color: inherit;
    box-shadow: none;
}

.cb-filter-button .cb-icon {
    --cb-icon: url("../images/icons/sliders-horizontal.svg");
}

@media (max-width: 850px) {
    .cb-filter-button::before {
        content: "";
        position: absolute;
        inset: -2px;
    }
}

.cb-filter-button.is-active::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--global-palette1);
}

/* Filters */
.cb-filter-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 8px;
}

.cb-filters > .cb-filter-head:first-child {
    margin-top: 0;
}

.cb-filters .cb-filter-title {
    flex: 1 1 auto;
    margin: 0;
    color: var(--global-palette3);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.cb-side-clear {
    margin-top: 16px;
}

/* Service lists */
/* in page content Kadence's .single-content ul beats .cb-sheet-list */
.entry-content .cb-service-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cb-service-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% + 16px);
    min-height: 44px;
    margin: 0 -8px;
    padding: 0 6px;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
}

.cb-service-option,
.cb-service-option:hover,
.cb-service-option:focus,
.cb-service-option:active {
    border: 2px solid transparent;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

@media (hover: hover) {
    .cb-service-option:hover {
        background: var(--global-palette8);
    }

    .tippy-box[data-theme~='cb-drop'] .cb-service-option:hover {
        background: var(--global-palette7);
    }
}

.cb-service-option[aria-pressed="true"],
.cb-service-option[aria-pressed="true"]:hover {
    border-color: transparent;
    background: var(--cb-chosen-bg);
    color: var(--global-palette1);
}

.cb-service-option-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--global-palette3);
    font-size: 14px;
    line-height: 20px;
}

.cb-service-option-count {
    min-width: 2ch;
    color: var(--global-palette4);
    font-size: 14px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Skeletons */
/* skeleton bar on a real line's height, so rows don't shift when they arrive */
.cb-skeleton-line {
    display: block;
    box-sizing: border-box;
    width: 40%;
    height: 20px;
    padding: 4px 0;
    border-radius: 4px;
    background: var(--global-palette7);
    background-clip: content-box;
}

.cb-skeleton-line--head {
    width: 160px;
}

.cb-skeleton-line--title {
    width: 30%;
    height: 24px;
}

.cb-skeleton-line--text {
    width: 80%;
    height: 24px;
}

@media (max-width: 850px) {
    .cb-skeleton-line--text {
        height: 20px;
    }
}

.cb-skeleton-box {
    border-radius: 4px;
    background: var(--global-palette7);
}

/* .cb-service-tile further down would set palette8 */
.cb-service-tile.cb-skeleton-box {
    background: var(--global-palette7);
}

/* the "Edit" pill button (.cb-button--pill) is 49px wide */
.cb-skeleton-pill {
    width: 49px;
    height: 32px;
    border-radius: 9999px;
}

@media (prefers-reduced-motion: no-preference) {
    .cb-skeleton-line,
    .cb-skeleton-box {
        animation: cb-skeleton-pulse 1.4s ease-in-out infinite;
    }
}

.cb-filters-skeleton > .cb-filter-head:first-child {
    margin-top: 0;
}

.cb-filter-skeleton-head {
    width: 56px;
}

.cb-filters-skeleton .cb-segment-option {
    height: 32px;
}

.cb-filters-skeleton .cb-service-option,
.cb-filters-skeleton .cb-service-option:hover,
.tippy-box[data-theme~='cb-drop'] .cb-filters-skeleton .cb-service-option:hover {
    background: transparent;
    cursor: default;
}

.cb-filter-skeleton-name {
    flex: 1 1 auto;
    max-width: 120px;
}

.cb-filter-skeleton-count {
    width: 16px;
    margin-left: auto;
}

.cb-filter-skeleton-button {
    flex: 1 1 0;
    height: 40px;
}

@keyframes cb-skeleton-pulse {
    50% {
        opacity: 0.5;
    }
}

/* Icon buttons */
.cb-icon-button {
    display: grid;
    flex: none;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.cb-icon-button,
.cb-icon-button:hover,
.cb-icon-button:focus,
.cb-icon-button:active {
    background: none;
    color: var(--global-palette5);
    box-shadow: none;
}

.cb-icon-button .cb-icon {
    background: currentColor;
}

@media (hover: hover) {
    .cb-icon-button:hover {
        color: var(--global-palette3);
    }
}

/* Fields */
.cb-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cb-field > label,
.cb-field-label {
    margin: 0;
    color: var(--global-palette3);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

/* Tabs */
/* rule drawn inside the row: a sideways-scrolling row clips anything below it */
.cb-tabs {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    box-shadow: inset 0 -2px 0 var(--global-palette8);
    scrollbar-width: none;
}

.cb-tabs::-webkit-scrollbar {
    display: none;
}

/* two classes: popups set every button's weight */
.cb-tabs .cb-tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 12px 0 10px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    white-space: nowrap;
}

.cb-tab,
.cb-tab:visited,
.cb-tab:hover,
.cb-tab:focus,
.cb-tab:active {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--global-palette4);
    text-decoration: none;
}

@media (hover: hover) {
    .cb-tab:hover {
        color: var(--global-palette3);
    }
}

.cb-tab[aria-current="page"],
.cb-tab[aria-current="true"] {
    border-bottom-color: var(--global-palette1);
    color: var(--global-palette3);
}

/* Service tiles */
.cb-service-tile {
    --cb-service-tile: 28px;
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: var(--cb-service-tile);
    height: var(--cb-service-tile);
    border-radius: 4px;
    background: var(--global-palette8);
}

@media (hover: hover) {
    a.cb-service-tile:hover {
        background: var(--global-palette7);
    }
}

@media (max-width: 850px) {
    .cb-service-tile {
        --cb-service-tile: 32px;
    }
}

.tippy-box[data-theme~='cb-drop'] .cb-service-tile {
    background: var(--global-palette7);
}

.cb-service-tile img {
    display: block;
    width: 62%;
    height: 62%;
    border-radius: 2px;
}

/* the WebP plugin wraps images in <picture> */
.cb-service-tile picture {
    display: contents;
}

.cb-service-tile source {
    display: none;
}

/* States */
.cb-state {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: 4px;
    background: var(--global-palette8);
}

.cb-state[hidden] {
    display: none;
}

.cb-state-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--global-palette7);
}

.cb-state-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-top: 8px;
}

.cb-state .cb-state-title,
.entry-content .cb-games-pick-title {
    margin: 0;
    color: var(--global-palette3);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.cb-state .cb-state-text,
.entry-content .cb-games-pick-text {
    margin: 4px 0 16px;
    color: var(--global-palette4);
    font-size: 14px;
    line-height: 20px;
}

.cb-state--error .cb-icon {
    --cb-icon: url("../images/icons/circle-alert.svg");
    background: var(--global-palette13);
}

.cb-state--nomatch .cb-icon {
    --cb-icon: url("../images/icons/search.svg");
}

.cb-state .cb-button:not(.cb-button--primary) {
    --cb-button-bg: var(--global-palette7);
}

.cb-list-layout .cb-state {
    flex-direction: column;
    align-items: center;
    padding: 64px 16px 0;
    text-align: center;
    background: none;
}

.cb-list-layout .cb-state-body {
    align-items: center;
    max-width: 400px;
    padding-top: 0;
}