@import "../../../../sass-utilities/themes/dark/all";

@mixin pf-theme-dark-form-control() {
  .pf-c-form-control {
    --pf-c-form-control__select--BackgroundUrl: #{pf-bg-svg($pf-c-form-control__select--Coordinates, $pf-c-form-control__select--ViewBox, $pf-global--Color--100)};
    --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
    }
  }
}
