@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;
  }

  @if $contrast == 'high' {
    > border {
      min-width: 1px;
      min-height: 1px;
      background: $border_color ;
    }
  }

  > 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); }
  }
}
