.root {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    width: 145px;
    border: 1px solid var(--border-color-alpha-black-10);
    border-radius: var(--border-radius-sm);
}

.inverted {
    border-color: var(--border-color-alpha-white-10);
}

.inverted .icon {
    color: var(--color-bg-fill-brand-inverse);
}

.inverted .divider {
    background-color: var(--border-color-alpha-white-10);
}

/* Each button owns its full half of the rail (the icon stays anchored to the
 * outer edge via per-orientation justify), so a stretched rail keeps the whole
 * half clickable instead of just the icon padding. */
.button {
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 0;
    align-items: center;
    height: 46px;
    padding: var(--spacing-8) var(--spacing-24);
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    /* Matches Button's hover easing. */
    transition: background-color 0.3s ease;
}

/* Subtle feedback across the whole clickable half — both directions. 2%
 * one-off (Ben, 2026-07-09): a slight glow; the 10% token reads too heavy. */
.button:not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.inverted .button:not(:disabled):hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.button:disabled {
    cursor: not-allowed;
}

.button:disabled .icon {
    color: var(--color-neutral-300);
}

.buttonLeft {
    justify-content: flex-start;
    border-radius: 11px 0 0 11px;
}

.buttonRight {
    justify-content: flex-end;
    border-radius: 0 11px 11px 0;
}

.iconWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    & > * {
        width: 100%;
        height: 100%;
    }
}

.icon {
    color: var(--color-bg-fill-primary);
}

.divider {
    display: flex;
    flex: 0 0 auto;
    width: 1px;
    height: 32px;
    background-color: var(--border-color-light);
}