/* Variants */
/* Size-related values: the Figma file-upload/file-tile component tokens */
/* Height of the trailing icon button, which sets the minimum tile height */
/* The border is drawn inside the Figma frame, so it is taken off the padding */
nv-filetile {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--components-form-field-border-default);
  background: var(--components-form-field-background-default);
  color: var(--color-content-high-text);
}
nv-filetile > .file-icon,
nv-filetile > .status,
nv-filetile > .action {
  flex: none;
}
nv-filetile > .file-icon {
  color: var(--color-content-medium-icon);
}
nv-filetile > .content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
}
nv-filetile > .content > .info {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
}
nv-filetile > .content > .info > .name {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
nv-filetile > .content > .info > .size {
  flex: none;
  color: var(--color-content-lower-text);
  white-space: nowrap;
}
nv-filetile > .content > .message {
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-xs);
  display: flex;
  align-items: flex-start;
  color: var(--color-content-low-text);
}
nv-filetile > .content > .message > .message-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  /* One line high, so the icon stays centred on the first line */
  height: var(--line-height-xs);
  color: var(--color-feedback-error-low-icon);
}
nv-filetile > .content > .message > .message-body {
  min-width: 0;
  overflow-wrap: anywhere;
}
nv-filetile > .content > .message > .message-body > .message-text + .retry {
  margin-left: var(--spacing-1);
}
nv-filetile > .content > .message > .message-body > .retry:focus, nv-filetile > .content > .message > .message-body > .retry:focus-within {
  outline: none;
}
nv-filetile > .content > .message > .message-body > .retry:focus-visible, nv-filetile > .content > .message > .message-body > .retry:has(:focus-visible) {
  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
  outline-offset: calc(var(--focus-outline-offset) * 1);
}
nv-filetile > .content > .message > .message-body > .retry {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-rounded);
  background: none;
  color: var(--color-interaction-link-high-text);
  font: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}
nv-filetile > .content > .message > .message-body > .retry:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
nv-filetile > .status {
  display: inline-flex;
  position: relative;
  color: var(--color-feedback-success-low-icon);
}
nv-filetile > .status > .visually-hidden {
  position: absolute;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}
nv-filetile.has-error {
  border-color: var(--components-form-field-border-error);
}
nv-filetile.has-error > .content > .message {
  color: var(--color-feedback-error-low-text);
}
nv-filetile[readonly]:not([readonly=false]) {
  border-color: var(--components-form-field-border-readonly);
  background: var(--components-form-field-background-readonly);
}
nv-filetile {
  /* After has-error: a disabled tile keeps the disabled look in every state */
}
nv-filetile[disabled]:not([disabled=false]) {
  border-color: var(--components-form-field-border-disabled);
  background: var(--components-form-field-background-disabled);
  opacity: var(--opacity-disabled);
  /* The whole tile is already dimmed: the actions must not dim twice */
}
nv-filetile[disabled]:not([disabled=false]) > .action[disabled],
nv-filetile[disabled]:not([disabled=false]) > .action:disabled,
nv-filetile[disabled]:not([disabled=false]) > .content > .message > .message-body > .retry:disabled {
  opacity: 1;
}
nv-filetile.size-sm {
  gap: var(--file-upload-file-tile-sm-gap);
  min-height: calc(var(--button-xs-height) + 2 * var(--file-upload-file-tile-sm-padding-y));
  padding: calc(var(--file-upload-file-tile-sm-padding-y) - 1px) calc(var(--file-upload-file-tile-sm-padding-x) - 1px);
  border-radius: var(--file-upload-file-tile-sm-radius);
}
nv-filetile.size-sm > .content > .info > .name {
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-xs);
}
nv-filetile.size-sm > .content > .info > .size {
  font-family: var(--font-family-mono), var(--font-family-fallback), monospace;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-xs);
}
nv-filetile.size-sm > .content > .message {
  gap: var(--spacing-0-5);
}
nv-filetile.size-md {
  gap: var(--file-upload-file-tile-md-gap);
  min-height: calc(var(--button-sm-height) + 2 * var(--file-upload-file-tile-md-padding-y));
  padding: calc(var(--file-upload-file-tile-md-padding-y) - 1px) calc(var(--file-upload-file-tile-md-padding-x) - 1px);
  border-radius: var(--file-upload-file-tile-md-radius);
}
nv-filetile.size-md > .content > .info > .name {
  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-sm);
}
nv-filetile.size-md > .content > .info > .size {
  font-family: var(--font-family-mono), var(--font-family-fallback), monospace;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium-emphasis);
  line-height: var(--line-height-sm);
}
nv-filetile.size-md > .content > .message {
  gap: var(--spacing-1);
}