@use "../../../00-base/01-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Form: Upload file
// *
////////////////////////////////////////////////////////////////////////////////


// *
// =============================================================================

// ** wrapper for upload file field + button.
.webform-document-file {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: rem(10);

}

// ** wrapper around the field
.file-upload-wrapper {
  //
}

// ** the field itself
input[type="file"] {
  //
}

// * Field with upload button
// =============================================================================

.form-managed-file {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: rem(10);
  align-items: center;
}

// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// * Breakpoint: tablet & wider
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

@include bp-sm {
  // ** wrapper for upload file field + button.
  .webform-document-file {
    flex-direction: row;

    // goes full-width below the input field.
    .description {
      flex: 1 1 auto;
    }
  }

  // ** wrapper around the field.
  .file-upload-wrapper {
    flex-grow: 1; // fill space minus the button
    width: auto;
  }

  // ** Field with upload button.
  .form-managed-file {
    flex-direction: row;

    .messages {
      width: 100%;
    }
  }
}
