@import "../settings/variables";
@import "../tools/ellipsis";

$file-list-item-font-size: 12px;

.flex_truncation_hack {
  // min-width is required to enable flexbox truncated text https://css-tricks.com/flexbox-truncated-text/
  // 1px instead of 0, because IE11 likes it better
  min-width: 1px;
}

.text {
  @include typography-xs($core-blue-50, 700);
  cursor: pointer;
}

.file-list {
  $root: &;

  display: flex;
  flex-direction: column;
  padding: spacing(md) 0 0 spacing(md);

  &__download-all {
    margin-bottom: spacing(xs);
  }

  &__download-all-link {
    font-size: $file-list-item-font-size;
    color: $core-blue-50;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &__item {
    display: flex;
    align-items: center;
    font-size: $file-list-item-font-size;
    margin-bottom: spacing(xs);
  }

  &__preview {
    display: flex;
    height: 100%;
    align-items: stretch;
    overflow: hidden;

    @extend .flex_truncation_hack;

    &:hover {
      #{$root}__preview-text-body,
      #{$root}__preview-text-extension {
        text-decoration: underline;
      }
    }
  }

  &__preview-text-body {
    @include ellipsis;
    @extend .flex_truncation_hack;
    @extend .text;
    height: 100%;
  }

  &__preview-text-extension {
    @extend .text;
  }

  &__item-download {
    margin: 0 spacing(sm);
  }
}