@mixin background-shadow($direction) {
  background-image:
    linear-gradient($direction,
                    gtkalpha($shade_color, 0.7),
                    gtkalpha($shade_color, 0.14) 40px,
                    gtkalpha($shade_color, 0) 56px),
    linear-gradient($direction,
                    gtkalpha($shade_color, 0.4),
                    gtkalpha($shade_color, 0.14) 7px,
                    gtkalpha($shade_color, 0) 24px);
}

flap,
leaflet {
  > dimming {
    background: $shade_color;
  }

  > border {
    min-width: 1px;
    min-height: 1px;
    background: gtkalpha(currentColor, if($contrast == 'high', .5, .1));
  }

  > shadow {
    min-width: 56px;
    min-height: 56px;

    &.left  { @include background-shadow(to right); }
    &.right { @include background-shadow(to left); }
    &.up    { @include background-shadow(to bottom); }
    &.down  { @include background-shadow(to top); }
  }
}
