:root {
  /* Default Theme Variables */
  --verdocs-required-field-border: #cc0000;
  --verdocs-field-radius: 0;
  --verdocs-field-text-color: #000000;
  --verdocs-attachment-icon-color: #339933;

  /* Signer Colors (Default Theme) */
  --signer-1-color: #ffe69c;
  --signer-2-color: #e3c3e9;
  --signer-3-color: #c1e1fb;
  --signer-4-color: #dce775;
  --signer-5-color: #7986cb;
  --signer-6-color: #4db6ac;
  --signer-7-color: #ffcaa5;
  --signer-8-color: #02f7be;
  --signer-9-color: #ff8a65;
  --signer-10-color: #52ff4f;

  /* Signer Colors Faded (Default 90%) */
  --signer-1-color-faded: #ffe69ce6;
  --signer-2-color-faded: #e3c3e9e6;
  --signer-3-color-faded: #c1e1fbe6;
  --signer-4-color-faded: #dce775e6;
  --signer-5-color-faded: #7986cbe6;
  --signer-6-color-faded: #4db6ace6;
  --signer-7-color-faded: #ffcaa5e6;
  --signer-8-color-faded: #02f7bee6;
  --signer-9-color-faded: #ff8a65e6;
  --signer-10-color-faded: #52ff4fe6;

  --verdocs-primary-purple: rgba(101, 77, 203, 1);
}

@keyframes verdocs-field-ripple-bloom {
  0% {
    box-shadow: 0 0 0 0 var(--verdocs-primary-purple);
    opacity: 1;
  }

  100% {
    box-shadow: 0 0 0 20px rgba(101, 77, 203, 0);
    opacity: 0;
  }
}

verdocs-field-attachment,
verdocs-field-checkbox,
verdocs-field-date,
verdocs-field-dropdown,
verdocs-field-initial,
verdocs-field-payment,
verdocs-field-radio,
verdocs-field-signature,
verdocs-field-textarea,
verdocs-field-textbox,
verdocs-field-timestamp {
  position: relative;
}

verdocs-field-attachment::after,
verdocs-field-checkbox::after,
verdocs-field-date::after,
verdocs-field-dropdown::after,
verdocs-field-initial::after,
verdocs-field-payment::after,
verdocs-field-radio::after,
verdocs-field-signature::after,
verdocs-field-textarea::after,
verdocs-field-textbox::after,
verdocs-field-timestamp::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1001;
  border-radius: 4px;
}

verdocs-field-attachment.focused::after,
verdocs-field-checkbox.focused::after,
verdocs-field-date.focused::after,
verdocs-field-dropdown.focused::after,
verdocs-field-initial.focused::after,
verdocs-field-payment.focused::after,
verdocs-field-radio.focused::after,
verdocs-field-signature.focused::after,
verdocs-field-textarea.focused::after,
verdocs-field-textbox.focused::after,
verdocs-field-timestamp.focused::after {
  animation: verdocs-field-ripple-bloom 1.2s cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* Signer Color Utility Classes */
.signer-1 {
  background-color: var(--signer-1-color-faded) !important;
}

.signer-1:hover {
  background-color: var(--signer-1-color) !important;
}

.signer-2 {
  background-color: var(--signer-2-color-faded) !important;
}

.signer-2:hover {
  background-color: var(--signer-2-color) !important;
}

.signer-3 {
  background-color: var(--signer-3-color-faded) !important;
}

.signer-3:hover {
  background-color: var(--signer-3-color) !important;
}

.signer-4 {
  background-color: var(--signer-4-color-faded) !important;
}

.signer-4:hover {
  background-color: var(--signer-4-color) !important;
}

.signer-5 {
  background-color: var(--signer-5-color-faded) !important;
}

.signer-5:hover {
  background-color: var(--signer-5-color) !important;
}

.signer-6 {
  background-color: var(--signer-6-color-faded) !important;
}

.signer-6:hover {
  background-color: var(--signer-6-color) !important;
}

.signer-7 {
  background-color: var(--signer-7-color-faded) !important;
}

.signer-7:hover {
  background-color: var(--signer-7-color) !important;
}

.signer-8 {
  background-color: var(--signer-8-color-faded) !important;
}

.signer-8:hover {
  background-color: var(--signer-8-color) !important;
}

.signer-9 {
  background-color: var(--signer-9-color-faded) !important;
}

.signer-9:hover {
  background-color: var(--signer-9-color) !important;
}

.signer-10 {
  background-color: var(--signer-10-color-faded) !important;
}

.signer-10:hover {
  background-color: var(--signer-10-color) !important;
}

/* When a field is filled, remove the signer background color */
.filled.signer-1,
.filled.signer-1:hover,
.filled.signer-2,
.filled.signer-2:hover,
.filled.signer-3,
.filled.signer-3:hover,
.filled.signer-4,
.filled.signer-4:hover,
.filled.signer-5,
.filled.signer-5:hover,
.filled.signer-6,
.filled.signer-6:hover,
.filled.signer-7,
.filled.signer-7:hover,
.filled.signer-8,
.filled.signer-8:hover,
.filled.signer-9,
.filled.signer-9:hover,
.filled.signer-10,
.filled.signer-10:hover {
  background-color: transparent !important;
  border: none !important;
}