/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../../styles/variables.css';

:root {
  --message-document-height: 70px;
  --message-document-font-family: var(--default-font-family);
  --message-document-media-color: var(--sky-blue);
  --message-document-document-color: var(--orangey-red);
  --message-document-picture-color: var(--lightish-green-two);
  --message-document-unknown-color: var(--pinkish-grey-two);
  --message-document-padding: 12px;
  --message-document-background-color: #fff;
  --message-document-border-color: color-mod(#000 alpha(14%));
  --message-document-border-radius: var(--default-border-radius);
  --message-document-preview-size: 46px;
  --message-document-padding-margin-right: 14px;
  --message-document-download-arrow-color: var(--color-primary);
  --message-document-download-arrow-size: 20px;
}

.container {
  all: initial;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  height: var(--message-document-height) !important;
  max-height: var(--message-document-height) !important;
  padding: var(--message-document-padding);
  cursor: pointer;
  user-select: none;
  border-radius: var(--message-document-border-radius);
  background-color: var(--message-document-background-color);
  box-shadow: 0 0 0 1px var(--message-document-border-color);
  font-family: var(--message-document-font-family);
}

.uploading {
  opacity: 0.7;
  padding-right: calc(var(--message-document-padding) * 2);
  position: relative;
  cursor: default;
}

.info {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex: 1 1 auto;
}

.filename {
  letter-spacing: -0.4px;
  font-size: var(--default-font-size);
  font-weight: 500;
  flex: 1 1 23px;
  color: #000;
  display: inline-flex;
  align-items: center;
}

.sizeBlock {
  flex: 1 1 23px;
  display: inline-flex;
  align-items: center;
}

.size {
  line-height: 23px;
  font-size: var(--default-font-size-small);
  color: var(--default-font-color-light);
}

.text {
  line-height: 23px;
  display: inline-block;
  max-width: 100%;
  @mixin text-overflow-ellipsis;
}