.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cc-space-sm);
}

.cc-root--floating .cc-actions,
.cc-root--center .cc-actions {
  grid-column: 1 / -1;
}

.cc-root[dir='rtl'] .cc-actions,
.cc-modal[dir='rtl'] .cc-actions {
  justify-content: flex-start;
}

.cc-actions--modal {
  margin-top: var(--cc-space-lg);
}

.cc-button,
.cc-icon-button {
  border: 0.0625em solid transparent;
  border-radius: var(--cc-radius);
  cursor: pointer;
  font: 600 0.9375em/1.25 var(--cc-font-family);
  transition:
    background-color var(--cc-duration) var(--cc-easing),
    border-color var(--cc-duration) var(--cc-easing),
    color var(--cc-duration) var(--cc-easing),
    box-shadow var(--cc-duration) var(--cc-easing),
    transform var(--cc-duration) var(--cc-easing);
}

.cc-button {
  min-height: 2.625em;
  padding: 0 1em;
}

.cc-button--primary {
  background: var(--cc-color-primary);
  color: var(--cc-color-primary-text);
}

.cc-button--primary:hover {
  background: var(--cc-color-primary-hover);
}

.cc-button--primary:active {
  background: var(--cc-color-primary-active);
}

.cc-button--secondary {
  border-color: var(--cc-color-border);
  background: var(--cc-color-secondary);
  color: var(--cc-color-secondary-text);
}

.cc-button--secondary:hover {
  background: var(--cc-color-secondary-hover);
}

.cc-button--secondary:active {
  background: var(--cc-color-secondary-active);
}

.cc-button--ghost {
  background: transparent;
  color: var(--cc-color-primary);
}

.cc-button--ghost:hover {
  background: color-mix(in srgb, var(--cc-color-primary) 8%, transparent);
  color: var(--cc-color-primary-hover);
}

.cc-button--ghost:active {
  background: color-mix(in srgb, var(--cc-color-primary) 12%, transparent);
  color: var(--cc-color-primary-active);
}

.cc-icon-button {
  display: inline-grid;
  width: 2.25em;
  height: 2.25em;
  place-items: center;
  background: var(--cc-color-secondary);
  color: var(--cc-color-secondary-text);
}

.cc-icon-button:hover {
  background: var(--cc-color-secondary-hover);
}

.cc-icon-button:active {
  background: var(--cc-color-secondary-active);
}

.cc-icon-button__icon,
.cc-icon-button__icon svg {
  display: block;
  width: 1.125em;
  height: 1.125em;
}