@prefix-shadow: ~'@{nameSpace}-shadow';

.@{prefix-shadow}-sm {
  box-shadow: 0 1px 2px 0 var(--design-shadow-color);
}

.@{prefix-shadow}-base {
  box-shadow: 0 0 6px 0 var(--design-shadow-color);
}

.@{prefix-shadow}-md {
  box-shadow: 0 0 8px 0 var(--design-shadow-color);
}

.@{prefix-shadow}-lg {
  box-shadow: 0 0 10px 0 var(--design-shadow-color);
}

.@{prefix-shadow}-xl {
  box-shadow: 0 0 12px 0 var(--design-shadow-color);
}

.@{prefix-shadow}-inner {
  box-shadow: inset 0 2px 4px 0 var(--design-shadow-color);
}

.@{prefix-shadow}-sm-hover {
  &:hover {
    box-shadow: 0 0 2px 0 var(--design-shadow-color);
  }
}

.@{prefix-shadow}-base-hover {
  &:hover {
    box-shadow: 0 0 6px 0 var(--design-shadow-color);
  }
}

.@{prefix-shadow}-md-hover {
  &:hover {
    box-shadow: 0 0 8px 0 var(--design-shadow-color);
  }
}

.@{prefix-shadow}-lg-hover {
  &:hover {
    box-shadow: 0 0 8px 0 var(--design-shadow-color);
  }
}

.@{prefix-shadow}-xl-hover {
  &:hover {
    box-shadow: 0 0 12px 0 var(--design-shadow-color);
  }
}

.@{prefix-shadow}-inner-hover {
  &:hover {
    box-shadow: inset 0 2px 4px 0 var(--design-shadow-color);
  }
}

.@{prefix-shadow}-time-base {
  transition: all 0.3s;
}

.@{prefix-shadow}-none {
  box-shadow: none;
}

.@{prefix-shadow}-blur {
  box-shadow: 0 0 6px rgba(var(--design-shadow-color), 1);
}


// box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);