@ozen-ui/kit/__inner__/esm/components/FilePicker/FilePicker.css

React component library

.FilePicker-Body {
    display: flex;
    cursor: pointer;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    color: var(--textfield-color);
    padding: 0 var(--textfield-gutter-x);
    -moz-column-gap: var(--textfield-input-gap);
         column-gap: var(--textfield-input-gap);
    border-radius: var(--textfield-border-radius);
    background-color: var(--textfield-background-color);
    transition: background-color var(--transition-slow);
  }
  .FilePicker-FieldContainer {
    overflow: hidden;
    inline-size: 100%;
    min-inline-size: 0;
    position: relative;
  }
  .FilePicker-FileName,
  .FilePicker-Placeholder {
    padding: 0;
    border: none;
    display: flex;
    outline: none;
    overflow: hidden;
    inline-size: 100%;
    background: none;
    position: relative;
    align-items: center;
    white-space: nowrap;
    box-sizing: border-box;
    text-overflow: ellipsis;
    block-size: var(--textfield-input-height);
  }
  .FilePicker-Placeholder {
    color: var(--textfield-placeholder-color);
  }
  .FilePicker-Input {
    opacity: 0;
    inline-size: 100%;
    inset-block-end: 0;
    position: absolute;
    pointer-events: none;
    inset-inline-start: 0;
  }
  .FilePicker-Input:focus + .FilePicker-Placeholder {
      opacity: 1;
    }
  .FilePicker-ClearButton {
    visibility: hidden;
    transition: visibility var(--transition-default);
  }
  .FilePicker-ClearButton_visibility {
      visibility: visible;
    }
  .FilePicker-RenderRight {
    display: flex;
    gap: var(--spacing-2xs);
  }

.FieldControl_hasLabel .FilePicker-Placeholder {
      opacity: 0;
    }

.FieldControl_hasLabel .FilePicker-FileName,
    .FieldControl_hasLabel .FilePicker-Placeholder {
      padding: var(--textfield-input-padding);
    }