src/components/FormFieldIndicator/FormFieldIndicator.scss
@import '../../constants/modal';
@import '../../constants/popup';

@media print {
  #form-field-indicator-wrapper {
    opacity: 0;
  }
}

#form-field-indicator-wrapper {
  position: relative;
  z-index: min($modal-z-index, $popup-z-index) - 10;
}

.formFieldIndicator {
  background-color: var(--color-blue-gray-5);
  color: var(--color-gray-1);
  width: 98px;
  min-height: 32px;
  font-size: 13px;
  position: fixed;
  padding: 4px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Lato', sans-serif;

  .formFieldIndicator-text {
    margin: 0;
    position: absolute;
    padding: 0 8px;
  }
}

.formFieldIndicator::before {
  content: '';
  display: block;
  position: absolute;
  inset-inline-end: -20px;
  inset-block-end: 0;
  width: 0;
  height: 0;
  border-inline-start: 20px solid var(--color-blue-gray-5);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.formFieldIndicator.rightSidePage::before {
  content: '';
  display: block;
  position: absolute;
  inset-inline-start: -20px;
  inset-block-end: 0;
  width: 0;
  height: 0;
  border-inline-end: 20px solid var(--color-blue-gray-5);
  border-inline-start: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}
