.segmented-buttons {
    border: 1px solid var(--color-stroke-default);
    border-radius: var(--segmented-button-border-radius, 24px);
    max-width: 720px;
    min-width: 215px;
    padding: var(--spacing-50);
}

.segmented-buttons > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.segmented-buttons > ul > li {
    display: flex;
    flex: 1;
}

.segmented-buttons > ul > li:not(:first-child) {
    margin-inline-start: var(--spacing-100);
}

.segmented-buttons__button {
    background-color: initial;
    border: none;
    border-radius: var(--btn-border-radius, 20px);
    color: var(--color-foreground-on-primary);
    font-size: var(--font-size-default);
    min-height: calc(40px - var(--spacing-50) * 2);
    padding: var(--spacing-100) var(--spacing-200);
    width: 100%;
}

.segmented-buttons--large .segmented-buttons__button {
    min-height: calc(48px - var(--spacing-50) * 2);
}

.segmented-buttons__button-cell {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.segmented-buttons__button svg.icon {
    align-self: center;
}
.segmented-buttons__button svg.icon:first-child {
    margin-inline-end: 8px;
}
.segmented-buttons__button svg.icon:last-child {
    margin-inline-start: 8px;
}
.segmented-buttons__button svg.icon:only-child {
    margin: 0;
}

.segmented-buttons__button[aria-current] {
    background-color: var(--color-foreground-primary);
    color: var(--color-foreground-on-inverse);
}

.segmented-buttons__button:not([aria-current]):active {
    background-color: var(--color-state-primary-active);
}
.segmented-buttons__button:not([aria-current]):focus,
.segmented-buttons__button:not([aria-current]):hover {
    background-color: var(--color-state-primary-hover);
}