.toggle-button-list.list-inline  {
	--list-padding: 0.16em;
    --list-bg: #fff;
    --list-colour: var(--colour-body);
    --list-gap: 0.1em;
    --list-font-size: 0.8rem;

    --border-width: .15em;
    --border-colour: var(--colour-base-7);
    --border-colour-active: var(--colour-base-10);

    --outline-width: 0.1875rem;
    --outline-colour: rgb(var(--colour-base-7-rgb), 0);
    --outline-colour-active: rgb(var(--colour-base-9-rgb), 0.5);

	--button-bg: var(--list-bg);
	--button-bg-hover: var(--colour-base-2, #00000010);
	--button-bg-active: var(--accent-colour, #45869d);
    
    --button-colour: var(--list-colour);
	--button-colour-active: var(--accent-colour-inverse, #fff);
    
    --button-width: min-content;
    --button-line-height: 2.62em;
    --button-border-radius: calc(var(--button-line-height) * 0.5);
    --button-padding-x: calc(var(--button-border-radius) + 0.25em);
    --button-padding: 0 var(--button-padding-x);

    --list-border-radius: calc(var(--button-border-radius) + var(--list-padding));

    margin: 0;
    padding: var(--list-padding);

    display: inline-flex;
    gap: var(--list-gap);

    font-size: var(--list-font-size);
    background-color: var(--list-bg);
    color: var(--list-colour);
    border: var(--border-width) solid var(--border-colour);
    outline: var(--outline-width) solid var(--outline-colour);
    border-radius: var(--list-border-radius);

    transition: var(--btn-out);
}
@media (min-width: 35.5rem){
    .toggle-button-list.list-inline {
        --list-font-size: 0.875rem;
        /*--button-padding-x: 1.875rem;*/
        --button-padding-x: calc(var(--button-border-radius) + 0.62em);
    }
}
.toggle-button-list.list-inline:focus-within {
    outline: var(--outline-width) solid var(--outline-colour-active);
    transition: var(--btn-in);
}
.toggle-button-list.list-inline .pure-button {
    --text-wght: var(--font-weight-bold);
    --letter-spacing: var(--letter-spacing-none);
    text-transform: uppercase;
    justify-content: center;
    font-feature-settings: var(--font-settings), "cpsp" 1, "case" 1;
    margin: 0;
    padding: var(--button-padding);
    box-shadow: var(--elevation-z0) !important;
    transition: none;
    background-color: var(--button-bg);
    color: var(--button-colour);
}

.toggle-button-list.list-inline .pure-button:hover,
.toggle-button-list.list-inline .pure-button:focus {
	background-color: var(--button-bg-hover);
	color: var(--button-colour);
	box-shadow: none !important;
}
.toggle-button-list.list-inline .pure-button.active,
.toggle-button-list.list-inline .pure-button:has(:checked),
.toggle-button-list.list-inline .pure-button[aria-selected="true"]
{
	background-color: var(--button-bg-active);
	color: var(--button-colour-active);
	pointer-events: none;
	cursor: default;
	
	transition: var(--btn-out);
}

.toggle-button-list.list-inline:has(:last-child[aria-selected="true"]) > .pure-button:first-child,
.toggle-button-list.list-inline:has(li:last-child.active) > li:first-child .pure-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.toggle-button-list.list-inline > [aria-selected="true"] + .pure-button,
.toggle-button-list.list-inline > :has([aria-selected="true"]) + * .pure-button,
.toggle-button-list.list-inline > .pure-button:has(:checked) + .pure-button,
.toggle-button-list.list-inline > li.active + li .pure-button 
{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.toggle-button-list.list-inline > li,
.toggle-button-list.list-inline > .pure-button{
    position: relative;
    z-index: 0;
    flex: 1 0 auto;
  min-width: var(--button-width, min-content);
}
.toggle-button-list.list-inline > li {
    margin: 0;
    display: grid;
}

.toggle-button-list.list-inline > li + li,
.toggle-button-list.list-inline > .pure-button + .pure-button,
.toggle-button-list.list-inline > * + *
{
    margin-left: calc(var(--button-border-radius) * -1);
}

.toggle-button-list.list-inline > [aria-selected="true"],
.toggle-button-list.list-inline > :has([aria-selected="true"]),
.toggle-button-list.list-inline > :has(:checked),
.toggle-button-list.list-inline > li.active
{
    z-index: 1;
}


/*.toggle-button-list {

    &:has(:last-child.active) {
        & :first-child .pure-button,
        & > .pure-button:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    &:has(:checked) {
        & > .pure-button:first-child:not(:has(:checked)),
        & li:first-child:not(:has(:checked)) .pure-button {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    & li.active + li,
    & li:has(:checked) + li {
        & .pure-button {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    & > .pure-button:has(:checked) + .pure-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}*/