@mixin form-control() {
  .pf-c-form-control {
    --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
    --pf-c-form-control--BorderTopColor: transparent;
    --pf-c-form-control--BorderRightColor: transparent;
    --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
    --pf-c-form-control--BorderLeftColor: transparent;
    --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
    --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
    --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
    --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);

    color: var(--pf-global--Color--100);

    // chrome's calendar icon for type="date"
    &::-webkit-calendar-picker-indicator {
      filter: #{"invert(1)"};
    }

    &[readonly] {
      border-bottom-color: var(--pf-global--palette--black-700); // should be a var?
    }

    &:disabled {
      color: var(--pf-global--palette--black-100); // global var
    }
  }
}