.d-box-file {
  --#{$prefix}box-file-gap: #{$box-file-gap};
  --#{$prefix}box-file-bg: #{$box-file-background};
  --#{$prefix}box-file-border: #{$box-file-border};
  --#{$prefix}box-file-border-radius: #{$box-file-border-radius};
  --#{$prefix}box-file-padding: #{$box-file-padding};
  --#{$prefix}box-file-content-max-width: #{$box-file-content-max-width};
  --#{$prefix}box-file-icon-size: #{$box-file-icon-size};
  --#{$prefix}box-file-icon-color: #{$box-file-icon-color};

  --#{$prefix}box-file-hover-border: #{$box-file-hover-border};
  --#{$prefix}box-file-hover-bg: #{$box-file-hover-background};

  --#{$prefix}box-file-selected-border: #{$box-file-selected-border};
  --#{$prefix}box-file-selected-bg: #{$box-file-selected-background};

  --#{$prefix}box-file-disabled-border: #{$box-file-disabled-border};
  --#{$prefix}box-file-disabled-bg: #{$box-file-disabled-background};

  --#{$prefix}box-file-valid-border: #{$box-file-valid-border};
  --#{$prefix}box-file-invalid-border: #{$box-file-invalid-border};

  width: 100%;
  cursor: pointer;
  background: var(--#{$prefix}box-file-bg);
  border: var(--#{$prefix}box-file-border);
  border-radius: var(--#{$prefix}box-file-border-radius);

  &:hover {
    background: var(--#{$prefix}box-file-hover-bg);
    border: var(--#{$prefix}box-file-hover-border);
  }

  &.d-box-file-selected {
    background: var(--#{$prefix}box-file-selected-bg);
    border: var(--#{$prefix}box-file-selected-border);
  }

  &.d-box-file-valid {
    border: var(--#{$prefix}box-file-valid-border);
  }

  &.d-box-file-invalid {
    border: var(--#{$prefix}box-file-invalid-border);
  }

  &.d-box-file-disabled {
    cursor: default;
    background: var(--#{$prefix}box-file-disabled-bg);
    border: var(--#{$prefix}box-file-disabled-border);
  }

  .d-box-file-dropzone > .d-icon {
    --#{$prefix}icon-size: var(--#{$prefix}box-file-icon-size);
    --#{$prefix}icon-color: var(--#{$prefix}box-file-icon-color);
  }

  .d-box-file-dropzone {
    display: flex;
    flex-direction: column;
    gap: var(--#{$prefix}box-file-gap);
    align-items: center;
    width: 100%;
    padding: var(--#{$prefix}box-file-padding);
  }

  .d-box-content {
    max-width: var(--#{$prefix}box-file-content-max-width);
  }
}

.d-box-files {
  --#{$prefix}box-file-list-gap: #{$box-file-list-gap};
  --#{$prefix}box-file-list-padding: #{$box-file-list-padding};
  display: flex;
  flex-direction: column;
  gap: var(--#{$prefix}box-file-list-gap);
  padding: var(--#{$prefix}box-file-list-padding);

  .input-group:focus-within {
    --#{$prefix}input-focus-border-color: var(--#{$prefix}gray-100);
    --#{$prefix}input-focus-box-shadow: none;
  }
}