// Dropimage plugin
// Allow to upload images in a sensible manner


// Variables

// The ratio for the images (responsive by default)
$picnic-dropimage-ratio: math.div(16, 9) !default;

// The percentage of height (respect of width)
$picnic-dropimage-height: percentage(math.div(1, $picnic-dropimage-ratio)) !default;

$picnic-dropimage-background-color: #ddd !default;

// This comes from camera.svg. Converted with:
// http://dopiaza.org/tools/datauri/index.php
$picnic-dropimage-background-image: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iNjQwIiB2ZXJzaW9uPSIxLjEiPjxnIHN0eWxlPSJmaWxsOiMzMzMiPjxwYXRoIGQ9Ik0gMTg3IDIzMCBDIDE3NSAyMzAgMTY1IDI0MCAxNjUgMjUyIEwgMTY1IDMwMCBMIDE2NSA0MDggQyAxNjUgNDIwIDE3NSA0MzAgMTg3IDQzMCBMIDQ2MyA0MzAgQyA0NzUgNDMwIDQ4NSA0MjAgNDg1IDQwOCBMIDQ4NSAzMDAgTCA0ODUgMjUyIEMgNDg1IDI0MCA0NzUgMjMwIDQ2MyAyMzAgTCAxODcgMjMwIHogTSAzNjAgMjU2IEEgNzAgNzIgMCAwIDEgNDMwIDMyOCBBIDcwIDcyIDAgMCAxIDM2MCA0MDAgQSA3MCA3MiAwIDAgMSAyOTAgMzI4IEEgNzAgNzIgMCAwIDEgMzYwIDI1NiB6Ii8+PGNpcmNsZSBjeD0iMzYwIiBjeT0iMzMwIiByPSI0MSIvPjxwYXRoIGQ9Im0yMDUgMjI1IDUtMTAgMjAgMCA1IDEwLTMwIDAiLz48cGF0aCBkPSJNMjg1IDIwMEwyNzAgMjI1IDM3NiAyMjUgMzYxIDIwMCAyODUgMjAwek0zMTAgMjA1TDMzNyAyMDUgMzM3IDIxOCAzMTAgMjE4IDMxMCAyMDV6Ii8+PHBhdGggZD0ibTQwNSAyMjUgNS0xMCAyMCAwIDUgMTAtMzAgMCIvPjwvZz48L3N2Zz4=' !default;

$picnic-dropimage-radius: $picnic-button-radius !default;
$picnic-dropimage-margin: $picnic-button-margin !default;


// Styles
// It is preferred to only use one top-level class or element
// It can be combined with other, specific classes with &.another
%dropimage {

  @extend %button;


  position: relative;
  display: block;
  padding: 0;
  // Hack from http://stackoverflow.com/a/13976732/938236
  padding-bottom: $picnic-dropimage-height;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  margin: $picnic-dropimage-margin;
  border-radius: $picnic-dropimage-radius;

  background-color: $picnic-dropimage-background-color;
  background-size: cover;
  background-position: center center;
  background-image: url(#{$picnic-dropimage-background-image});

  // Subelements
  input {
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    position: absolute;
  }
}