/* Color demo */
.color-demo {
  width: 4rem;
  height: 2rem;
  border-radius: var(--xena-border-radius-small);
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.33);
}

/* Border radius demo */
.border-radius-demo {
  width: 3rem;
  height: 3rem;
  background: var(--xena-color-blue-500);
}

/* Transition demo */
.transition-demo {
  position: relative;
  background: var(--xena-color-gray-100);
  width: 8rem;
  height: 2rem;
}

.transition-demo::after {
  content: '';
  position: absolute;
  background-color: var(--xena-color-blue-500);
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition-duration: inherit;
  transition-property: width;
}

.transition-demo:hover::after {
  width: 100%;
}

.xena-theme-dark .transition-demo {
  background: var(--xena-color-gray-800);
}

/* Spacing demo */
.spacing-demo {
  width: 100px;
  background: var(--xena-color-blue-500);
}

/* Elevation dmeo */
.elevation-demo {
  background: var(--xena-color-white);
  border-radius: 3px;
  width: 4rem;
  height: 4rem;
}

.xena-theme-dark .elevation-demo {
  background-color: var(--xena-color-gray-800);
}