nukeop/nuclear

@import "../../common.scss";

$smallDisplacement: 10px;
$smallBlur: 30px;
$bigDisplacement: 20px;
$bigBlur: 60px;
$contrast: 5%;

.neumorphic_box {
  height: 100%;
  border-radius: 25px;
  background: transparent;
  box-shadow: $bigDisplacement $bigDisplacement $bigBlur darken($background, $contrast), 
  (-$bigDisplacement) (-$bigDisplacement) $bigBlur lighten($background, $contrast);
  color: $white;
  padding: 1em;
  margin: 1em;

  &.small {
    box-shadow: $smallDisplacement $smallDisplacement $smallBlur darken($background, $contrast), 
    (-$smallDisplacement) (-$smallDisplacement) $smallBlur lighten($background, $contrast);
    z-index:1000;
  }

  &.pressed {
    box-shadow: inset $bigDisplacement $bigDisplacement $bigBlur darken($background, $contrast), 
    inset (-$bigDisplacement) (-$bigDisplacement) $bigBlur lighten($background, $contrast);
  }

  &.small.pressed {
    box-shadow: inset $smallDisplacement $smallDisplacement $smallBlur darken($background, $contrast), 
    inset (-$smallDisplacement) (-$smallDisplacement) $smallBlur lighten($background, $contrast);
  }
}