.root {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-neutral-light);
    padding: 12px 16px;
    border-radius: var(--border-radius-xs);
    border: var(--border-width-sm) solid var(--border-color-light);
}

.root[data-type="button"] {
    cursor: pointer;
}

.root[data-type="plain"][data-mode="primary"],
.root[data-type="plain"][data-mode="muted"] {
    border-radius: var(--border-radius-xl);
    padding: 12px;
    padding-right: 21px;
}

.root[data-type="plain"][data-mode="primary"][data-icon="false"],
.root[data-type="plain"][data-mode="muted"][data-icon="false"] {
    padding-left: 20px;
    padding-right: 20px;
}

.icon {
    width: 18px;
    height: 18px;
    margin-right: 7px;
}

.root[data-mode="muted"] .icon {
    color: var(--color-neutral-300);
}