.cbtn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6) var(--spacing-12);
  border-radius: var(--radius-8);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 1px var(--color-gray-100);
  white-space: nowrap;
  cursor: pointer;
}

.cbtn__label  { color: var(--color-gray-900); }
.cbtn__suffix { color: var(--color-positive-500); }

.cbtn--default  { box-shadow: inset 0 0 0 1px var(--color-gray-100); }
.cbtn--hover    { box-shadow: inset 0 0 0 1px var(--color-gray-200); }
.cbtn--active   { box-shadow: inset 0 0 0 2px var(--color-accent-400); }
.cbtn--disabled {
  background: var(--color-gray-25);
  box-shadow: inset 0 0 0 1px var(--color-gray-50);
  cursor: default;
}

.cbtn--disabled .cbtn__label,
.cbtn--disabled .cbtn__suffix { color: var(--color-gray-200); }

.cbtn--default:not(.cbtn--disabled):hover { box-shadow: inset 0 0 0 1px var(--color-gray-200); }
.cbtn:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}