/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/2815083
 * @preserve
 */

/**
 * @file
 * Styles for the managed file widget.
 *
 * This includes the styles for the file widgets and the image widgets.
 */

:root {
  /*
   * Color Palette.
   */
  /* Secondary. */
  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
  /*
   * Base.
   */
  /*
   * Typography.
   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
  /**
   * Spaces.
   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
  /*
   * Common.
   */
  /*
   * Inputs.
   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  /**
   * Buttons.
   */
  /**
   * jQuery.UI dropdown.
   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
  /**
   * Progress bar.
   */
  /**
   * Tabledrag icon size.
   */ /* 17px */
  /**
   * Ajax progress.
   */
  /**
   * Breadcrumb.
   */
}

/**
 * The root element of the file/image widget.
 */

.form-managed-file.no-upload {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
}

.form-managed-file.has-value.is-multiple {
  display: block;
}

/**
 * The main element of the file/image widget.
 *
 * This contains the upload input and the upload of the empty file/image
 * widgets, or the file name (with icon and size) and the remove button of
 * filled widgets.
 *
 * The inline-flex display shrinks the width to the minimal needed amount. This
 * helps to keep the remove as close to the other elements as possible.
 */

.form-managed-file__main {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

/**
 * Inside (draggable) tables, this should be flex-displayed. This keeps even
 * long file names in the same visual line where the drag handle is.
 */

.draggable .form-managed-file.has-value .form-managed-file__main {
  display: flex;
}

/* Add some bottom margin for single widgets if no meta is present. */

.form-managed-file.is-single.has-value .form-managed-file__main:last-child {
  margin-bottom: 1rem;
}

/**
 * The 'meta' element of the file/image widget.
 *
 * This element is available only if the file widget has a value AND when there
 * are other input options than the ones rendered in the 'main' element.
 * These inputs are:
 *  - File description and/or the file display checkbox of file widgets
 *  - Image alt and/or title text as well as the preview image of the image
 *    widgets.
 *
 * The trick here is that we will display the alt/title inputs next to the image
 * preview if there is enough space left. Enough space means the value of the
 * '--file-widget-form-item-min-width' variable.
 */

.form-managed-file__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 1rem; /* Bottom margin will be added by the child elements: because of we use flex display here, our margins won't collapse. */
}

/**
 * In tables, this should be inline-flex. This is needed to make this element be
 * pushed to a new line, to the bottom of the drag handle.
 */

.draggable .form-managed-file.has-value .form-managed-file__meta {
  display: inline-flex;
}

/**
 * Internet Explorer 11 does not shrinks our meta elements if one of its parent
 * element is a table. Without this fix, the file widgets table cell would have
 * the same width that is needed for displaying the file name in a single line.
 *
 * @see https://github.com/philipwalton/flexbugs/issues/179
 */

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  *::-ms-backdrop,
  td .form-managed-file__meta {
    flex-basis: 100%;
  }
}

/**
 * The 'image preview' element.
 *
 * This is used and display only by the image widget.
 */

.form-managed-file__image-preview {
  flex: 0 0 auto;
  max-width: 100%;
  margin-bottom: 1rem;
}

/* Add some 'end' margin if there are other meta inputs. */

.form-managed-file.has-meta .form-managed-file__image-preview {
  margin-right: 1rem; /* LTR */
}

[dir="rtl"] .form-managed-file.has-meta .form-managed-file__image-preview {
  margin-right: 0;
  margin-left: 1rem;
}

/**
 * If this is rendered inside a file multiple table and there are no alt or
 * title, we have to reduce the amount of the bottom margin.
 */

td .form-managed-file.no-meta .form-managed-file__image-preview {
  margin-bottom: 0.5rem;
}

/**
 * The children of the 'meta items' element are the inputs that were described
 * at the 'meta' element '.form-managed-file__meta', except of the image
 * preview.
 *
 * The flex-basis is set to the minimal width where we can display these inputs
 * next tho the preview image.
 *
 * We limit the max width directly on the '.form-item' elements.
 */

.form-managed-file__meta-items {
  flex: 1 1 16rem;
  max-width: 100%;
}

/**
 * Internet Explorer 11 does not increase the width of those flex items that are
 * allowed to be wrapped. We just simply change the basis to the max-width.
 */

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .form-managed-file__meta-items {
    flex-basis: 32rem;
  }
}

/**
 * Meta items wrapper.
 * This markup element is needed only for working around the same IE 11 bug that
 * is described above, at the 'meta' element.
 *
 * @see https://github.com/philipwalton/flexbugs/issues/179
 */

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  *::-ms-backdrop,
  td .form-managed-file__meta-wrapper {
    display: flex;
  }
}

/**
 * Modify component defaults for file/image widgets.
 */

/**
 * File component style overrides for managed file widgets.
 */

.form-managed-file .file {
  word-break: break-all;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.form-managed-file .file__size {
  word-break: normal;
}

.form-managed-file__main .file {
  flex: 1 1 auto;
  margin: 0.5rem 1rem 0.5rem 0; /* LTR */
}

[dir="rtl"] .form-managed-file__main .file {
  margin-right: 0;
  margin-left: 1rem;
}

/**
 * Fix and override the table-related bug of Internet Explorer 11 (described at
 * the 'meta' element).
 *
 * @see https://github.com/philipwalton/flexbugs/issues/179
 */

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  *::-ms-backdrop,
  td .form-managed-file__main .file {
    flex: 0 1 100%;
  }
}

/**
 * Remove the default margins of buttons.
 * The '.button' selector is doubled for RTL layouts.
 */

.form-managed-file .button.button {
  margin: 0;
}

/**
 * The file upload input.
 */

.form-managed-file__main .form-element--api-file {
  flex: 1 1 auto;
  min-width: 1px; /* This makes the element to be shrinked on IE11 */
}

/**
 * This applies both on the 'no-js' upload button and the remove button.
 * We don't want to let these to be shrinked.
 */

.form-managed-file__main .button {
  flex: 0 0 auto;
}

/**
 * Limiting the width of form items inside the meta element.
 */

.form-managed-file__meta .form-item {
  max-width: 32rem;
  margin-top: 0; /* Top margin is added by the parent element */
  margin-bottom: 1rem;
}

/**
 * Reduce the bottom margin of the last 'meta' form-item for field multiple
 * tables.
 */

.form-managed-file__meta .form-item:last-child {
  margin-bottom: 0.5rem;
}

.form-managed-file__meta .form-element {
  width: 100%;
}

/**
 * Add side margins if a table precedes the managed file form element.
 */

.file-widget-multiple.has-table .form-type--managed-file {
  margin-right: 1rem;
  margin-left: 1rem;
}