.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);
}

.button {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    justify-content: center;
    align-items: center;
    height: 46px;
    padding: var(--spacing-8) var(--spacing-24);
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}

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

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

.buttonLeft {
    border-radius: 11px 0 0 11px;
}

.buttonRight {
    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);
}
