/**
 * @file
 * Signature element styles.
 *
 * @see https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/
 */

.webform-signature-pad {
  position: relative;
  background-color: #f0f0f0;
}

.webform-signature-pad:before {
  display: block;
  width: 100%;
  padding-top: 33%;
  content: "";
}

.webform-signature-pad canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  cursor: crosshair;
}

input[disabled] + .webform-signature-pad canvas,
input[readonly] + .webform-signature-pad canvas {
  cursor: no-drop;
}

/* Position 'Reset' button in right hand corner of the canvas */
.webform-signature-pad .button {
  position: absolute;
  z-index: 100;
  top: 2px;
  right: 2px;
}

/* Add border around signature image */
.webform-signature-pad-image {
  display: block;
  width: 100%;
  max-width: 600px; /* Max width is used to prevent signature pad from getting too wide and tall */
  border: 1px solid #ccc;
}