.uppy-ProviderBrowserItem-checkbox {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;

  &:disabled {
    cursor: default;
  }

  &:disabled::after {
    cursor: default;
  }

  [data-uppy-theme='dark'] & {
    background-color: $gray-900;
    border-color: $gray-500;
  }
}

.uppy-ProviderBrowserItem--is-checked .uppy-ProviderBrowserItem-checkbox {
  [data-uppy-theme='dark'] & {
    background-color: $gray-800;
  }
  // Checkmark icon
  &::after {
    position: absolute;
    border-bottom: 2px solid $gray-200;
    // Not using border-inline-start here: this is part of a CSS trick to get
    // a check mark icon that only works in one direction
    border-left: 2px solid $gray-200;
    transform: rotate(-45deg);
    cursor: pointer;
    content: '';
  }
}

.uppy-ProviderBrowserItem--is-partial .uppy-ProviderBrowserItem-checkbox {
  &::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background-color: $gray-200 !important;
    transform: translateY(-50%) !important;
  }
}