@cr-shadow-xs: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
@cr-shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
@cr-shadow-base: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
@cr-shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
@cr-shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
@cr-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
@cr-shadow-2xl: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
@cr-shadow-outline: 0px 0px 0px 3px rgba(63, 153, 225, 0.6);
@cr-shadow-inner: inset 0px 2px 4px rgba(0, 0, 0, 0.06);
@cr-shadow-dark-lg: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 5px 10px rgba(0, 0, 0, 0.2), 0px 15px 40px rgba(0, 0, 0, 0.4);
@cr-shadow-main: 0px 4px 4px rgba(0, 0, 0, 0.25);

.cr-shadow {
  &-xs {
    box-shadow: @cr-shadow-xs;
  }

  &-sm {
    box-shadow: @cr-shadow-sm;
  }

  &-base {
    box-shadow: @cr-shadow-base;
  }

  &-md {
    box-shadow: @cr-shadow-md;
  }

  &-lg {
    box-shadow: @cr-shadow-lg;
  }

  &-xl {
    box-shadow: @cr-shadow-xl;
  }

  &-2xl {
    box-shadow: @cr-shadow-2xl;
  }

  &-outline {
    box-shadow: @cr-shadow-outline;
  }

  &-inner {
    box-shadow: @cr-shadow-inner;
  }

  &-dark-lg {
    box-shadow: @cr-shadow-dark-lg;
  }

  &-main {
    box-shadow: @cr-shadow-main;
  }
}