.fileField {
  display: flex;
  flex-direction: column;
  gap: var(--gap--sm);
  align-items: flex-start;

  &__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap--xs);
    align-items: flex-start;

    // Override `.v2Form .btn` styles in Form.less
    & .btn {
      margin: 0;
    }
  }

  &__itemButton {
    cursor: pointer;

    overflow: hidden;

    text-align: left;
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }

  &__itemButtonContainer {
    display: block;
  }

  &__preview {
    cursor: pointer;

    overflow: hidden;

    aspect-ratio: 4 / 3;
    width: 220px;
    margin-top: var(--margin--xs);
    padding: 0;

    line-height: 0;

    background-color: rgb(var(--background--neutral-base-default--light));
    background-image:
      linear-gradient(45deg, #ebebeb 25%, transparent 25%), linear-gradient(-45deg, #ebebeb 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ebebeb 75%), linear-gradient(-45deg, transparent 75%, #ebebeb 75%);
    background-position:
      0 0,
      0 8px,
      8px -8px,
      -8px 0;
    background-size: 16px 16px;
    border: 1px solid rgb(var(--border--neutral-low-default--light));

    &.warning-field {
      border-color: rgb(var(--border--warning-medium-default--light));
    }

    &.error-field {
      border-color: rgb(var(--border--critical-high-default--light));
    }

    &.sm {
      width: 130px;
    }

    &.lg {
      width: 440px;
    }
  }

  &__button {
    display: flex;
    gap: var(--gap--xs);
  }
}