.outline,
.primary-outline,
.secondary-outline,
.success-outline,
.warning-outline,
.danger-outline,
.important-outline,
.special-outline,
.gray-300-outline,
.gray-400-outline,
.gray-outline,
.gray-600-outline,
.dark-outline,
.light-outline {
  @apply -skin;
  --skin-text: var(--skin-color, inherit);
  --skin-bg: transparent;
  --skin-color: rgba(var(--skin-outline-rgb), 1);
  --state-color: rgba(var(--skin-outline-rgb), .1);
}

.outline {
  --skin-outline-rgb: var(--color-fore-rgb);
}
.primary-outline {
  --skin-outline-rgb: var(--color-primary-500-rgb);
}
.secondary-outline {
  --skin-outline-rgb: var(--color-secondary-500-rgb);
}
.success-outline {
  --skin-outline-rgb: var(--color-success-500-rgb);
}
.warning-outline {
  --skin-outline-rgb: var(--color-warning-500-rgb);
}
.danger-outline {
  --skin-outline-rgb: var(--color-danger-500-rgb);
}
.important-outline {
  --skin-outline-rgb: var(--color-important-500-rgb);
}
.special-outline {
  --skin-outline-rgb: var(--color-special-500-rgb);
}

.gray-300-outline {
  --skin-text: var(--color-gray-500);
  --skin-outline-rgb: var(--color-gray-300-rgb);
}
.gray-400-outline {
  --skin-text: var(--color-gray-500);
  --skin-outline-rgb: var(--color-gray-400-rgb);
}
.gray-outline {
  --skin-outline-rgb: var(--color-gray-500-rgb);
}
.gray-600-outline {
  --skin-outline-rgb: var(--color-gray-600-rgb);
}
.dark-outline {
  --skin-outline-rgb: var(--color-inverse-rgb);
}
.light-outline {
  --skin-outline-rgb: var(--color-canvas-rgb);
}
