/**
 * @file
 * Color element styles.
 *
 * @see \Drupal\webform\Plugin\WebformElement\Color
 * @see webform-element-color-value-swatch.html.twig
 * @see http://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-elementtype-color
 */

.webform-submission-form input.form-color {
  margin: inherit;
  padding: 0;
  border: 1px solid #ccc;
}

.webform-submission-form input.form-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.webform-submission-form input.form-color::-webkit-color-swatch {
  border: none;
}

input.form-color.form-color-small {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  font-size: smaller;
}

input.form-color.form-color-medium {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

input.form-color.form-color-large {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

input.form-color.form-color-output {
  width: 6em;
  padding: 0 0.5em;
  border-left: 0;
}