src/components/FilePicker/FilePicker.scss
@import '../../constants/styles';
@import '../../constants/modal';

.file-picker-component {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 4px;
  background: var(--signature-draw-background);
  border: 1px solid var(--modal-stroke-and-border);
  padding: 8px;

  .file-picker-container {
    position: relative;
    border: 1px dashed var(--modal-stroke-and-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    &.dragging {
      background: var(--file-picker-drop-background);
      border: 1px dashed var(--file-picker-drop-border);
    }

    .file-picker-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      position: absolute;

      .label-separator {
        margin: 10px;
      }

      color: var(--faded-text);

      .modal-btn-file {
        border-radius: 4px;
        border: 1px solid var(--primary-button);
        color: var(--primary-button);
        padding-top: 2px;
        padding-inline-end: 20px;
        padding-bottom: 4px;
        padding-inline-start: 20px;
        cursor: pointer;

        &:hover {
          border-color: var(--blue-6);
          color: var(--blue-6);
        }

        &:focus-visible {
          outline: var(--focus-visible-outline);
        }
      }

      .Icon {
        width: fit-content;
        height: fit-content;
        margin-bottom: 15px;

        svg {
          height: 45px;
        }
      }

      .file-picker-separator {
        margin: 10px;
      }
    }

    .file-picker-error {
      position: absolute;
      color: red;
      inset-block-end: 0px;
      inset-inline-end: 0px;
      margin: 0px 5px 5px 0px;
    }
  }
}
