:root,
.io-variables {
    /* === Channel Selector Panel (single & multi mode) === */
    --channel-selector-panel-background: var(--base-panel-background);                          /* Background color for the Channel Selector panel. */
    --channel-selector-panel-title-background-hover: transparent;                               /* Background color for the title of the Channel Selector panel when hovered. */
    --channel-selector-panel-width: 260px;                                                      /* Width for the Channel Selector panel. */
    --channel-selector-panel-border: var(--base-panel-border) solid var(--base-border-size);    /* Border for the Channel Selector panel. */
    --channel-selector-panel-radius: 4px;                                                       /* Border radius for the Channel Selector panel. */
    --channel-selector-panel-padding: 4px 0 4px 0;                                              /* Padding for the Channel Selector panel. */

    /* === Channel Selector Panel (directional single & directional multi mode) */
    --channel-selector-panel-directional-width: 440px;                                          /* Width for the Channel Selector panel when using directional Channels. */
    --channel-selector-panel-directional-toggles-gap: 32px;                                     /* Gap between the direction labels and the respective toggles in the Channel Selector panel when using directional Channels. */

     /* === Channel Badge === */
    --channel-selector-badge-width: var(--channel-selector-button-width);                      /* Width for the Channel Selector badge. */
    --channel-selector-badge-height: var(--channel-selector-button-height);                    /* Height for the Channel Selector badge. */
    --channel-selector-badge-radius: var(--channel-selector-button-radius);                    /* Border radius for the Channel Selector badge. */

    /* === Channel Selector Button (single & multi mode) === */
    --channel-selector-button-width: 16px;                    /* Width for the Channel Selector button. */
    --channel-selector-button-height: 16px;                   /* Height for the Channel Selector button. */
    --channel-selector-button-radius: 4px;                    /* Border radius for the Channel Selector button. */

    /* === Channel Selector Button (directional single & directional multi mode) */
    --channel-selector-button-directional-gap: 1px;           /* Gap between Channel letter and the Channel direction icon in the Channel Selector button when using directional Channels. */
    --channel-selector-button-directional-height: 16px;       /* Height for the Channel Selector button when using directional Channels. */
    --channel-selector-button-directional-min-width: 16px;    /* Minimum width for the Channel Selector button when using directional Channels. */
    --channel-selector-button-directional-max-width: 24px;    /* Maximum width for the Channel Selector button when using directional Channels. */
    --channel-selector-button-directional-padding: 0 4px;     /* Padding for the Channel Selector button when using directional Channels. */

    /* === Channel Selector Button Masks (multi mode) === */
    /* Mask for the Channel Selector button if two Channels are selected when using multiple Channels. */
    --io-channel-selector-button-multi-2-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3Crect width='7.5' height='16'/%3E%3Crect x='8.5' width='7.5' height='16'/%3E%3C/svg%3E");
    /* Mask for the Channel Selector button if three Channels are selected when using multiple Channels. */
    --io-channel-selector-button-multi-3-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3Crect fill='none' width='16' height='16' rx='4' ry='4'/%3E%3Cpath fill='%23000000' d='M16,11.6v-7.6c0-2.2-1.8-4-4-4h-3.5v7.3l7.5,4.3Z'/%3E%3Cpath fill='%23000000' d='M7.5,0h-3.5C1.8,0,0,1.8,0,4v7.9l7.5-4.3V0Z'/%3E%3Cpath fill='%23000000' d='M.1,12.9c.4,1.8,2,3.1,3.9,3.1h8c2,0,3.6-1.4,3.9-3.2l-7.7-4.5L.1,12.9Z'/%3E%3C/svg%3E");
    /* Mask for the Channel Selector button if four Channels are selected when using multiple Channels. */
    --io-channel-selector-button-multi-4-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3Crect width='7.5' height='7.5'/%3E%3Crect x='8.5' width='7.5' height='7.5'/%3E%3Crect x='8.5' y='8.5' width='7.5' height='7.5'/%3E%3Crect y='8.5' width='7.5' height='7.5'/%3E%3C/svg%3E");
}

/* Channel Selector Panel Styles */
.io-channel-selector-panel {
    width: var(--channel-selector-panel-width);
    padding: var(--channel-selector-panel-padding);
    border: var(--channel-selector-panel-border);
    border-radius: var(--channel-selector-panel-radius);
    overflow: hidden;
    background-color: var(--channel-selector-panel-background);
}

.io-channel-selector-panel .io-list-text {
    white-space: nowrap;
}

.io-channel-selector-panel .io-list-right-column {
    gap: var(--channel-selector-panel-directional-toggles-gap);
}

.io-channel-selector-panel .io-list-item-title:hover {
    --list-item-background-hover: var(--channel-selector-panel-title-background-hover);
}

.io-channel-selector-panel.io-channel-selector-panel-directional {
    --channel-selector-panel-width: var(--channel-selector-panel-directional-width);
}

.io-channel-selector-panel.io-channel-selector-panel-directional .io-list-right-column {
    padding-left: calc(var(--channel-selector-panel-directional-toggles-gap) - var(--list-item-inner-gap));
}

/* Channel Selector Button Styles */
.io-channel-selector-badge,
.io-channel-selector-button {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--channel-selector-button-width);
    height: var(--channel-selector-button-height);
    border-radius: var(--channel-selector-button-radius);
    text-transform: uppercase;
}

.io-channel-selector-button-directional {
    width: fit-content;
    min-width: var(--channel-selector-button-directional-min-width);
    --channel-selector-button-height: var(--channel-selector-button-directional-height);
    gap: var(--channel-selector-button-directional-gap);
    max-width: var(--channel-selector-button-directional-max-width);
    padding: var(--channel-selector-button-directional-padding);
}

/* Multi Channel Selector Styles */
.io-channel-selector-multi-2 {

    background-image: conic-gradient(var(--io-channel-selector-multi-2-color-1) 0deg,
            var(--io-channel-selector-multi-2-color-1) 180deg,
            var(--io-channel-selector-multi-2-color-2) 180deg,
            var(--io-channel-selector-multi-2-color-2) 0deg);
    mask-image: var(--io-channel-selector-button-multi-2-mask);
}

.io-channel-selector-multi-3 {

    background-image: conic-gradient(var(--io-channel-selector-multi-3-color-1) 0deg,
            var(--io-channel-selector-multi-3-color-1) 120deg,
            var(--io-channel-selector-multi-3-color-2) 120deg,
            var(--io-channel-selector-multi-3-color-2) 240deg,
            var(--io-channel-selector-multi-3-color-3) 240deg,
            var(--io-channel-selector-multi-3-color-3) 0deg);
    mask-image: var(--io-channel-selector-button-multi-3-mask);
}

.io-channel-selector-multi-4 {

    background-image: conic-gradient(var(--io-channel-selector-multi-4-color-1) 0deg,
            var(--io-channel-selector-multi-4-color-1) 90deg,
            var(--io-channel-selector-multi-4-color-2) 90deg,
            var(--io-channel-selector-multi-4-color-2) 180deg,
            var(--io-channel-selector-multi-4-color-3) 180deg,
            var(--io-channel-selector-multi-4-color-3) 270deg,
            var(--io-channel-selector-multi-4-color-4) 270deg,
            var(--io-channel-selector-multi-4-color-4) 0deg);
    mask-image: var(--io-channel-selector-button-multi-4-mask);
}