.field-files-view {
  max-width: 720px;

  > div {
    display: flex;
    align-items: center;
    gap: 12px;

    background-color: #e3e9f3;
    border-radius: 6px;
    padding: 10px 10px;
    margin-bottom: 6px;
    width: 100%;
    box-sizing: border-box;

    &:last-child {
      margin-bottom: 0;
    }

    & :first-child {
      flex: 1;
    }
  }

  .file {
    flex: 1;

    a {
      font-size: 14px;
    }
  }

  .file__created {
    font-size: 14px;
    color: #7d7e83;
    white-space: nowrap;
  }

  .file__size {
    font-size: 14px;
    color: #7d7e83;
  }

  /* icons */
  .file__download_link,
  .file__share_link,
  .file__send_link {
    flex-shrink: 0;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    gap: 4px;
    align-items: center;

    &::before {
      content: "";
      width: 18px;
      height: 18px;
      background-color: currentColor;
      mask-size: contain;
      flex-shrink: 0;
    }

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

  .file__download_link {
    display: inline-flex;
    color: #6b7280;

    &::before {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-313 287-506l43-43 120 120v-371h60v371l120-120 43 43-193 193ZM220-160q-24 0-42-18t-18-42v-143h60v143h520v-143h60v143q0 24-18 42t-42 18H220Z'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-313 287-506l43-43 120 120v-371h60v371l120-120 43 43-193 193ZM220-160q-24 0-42-18t-18-42v-143h60v143h520v-143h60v143q0 24-18 42t-42 18H220Z'/%3E%3C/svg%3E");
    }

    @media (max-width: 768px) {
      .file__download_text {
        display: none;
      }

      &::before {
        width: 32px;
        height: 32px;
      }
    }
  }

  .file__share_link {
    display: none;
    color: #6b7280;

    &.is-tg-visible {
      display: inline-flex;
    }

    &::before {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
    }

    .file__download_text {
      display: none;
    }

    @media (max-width: 768px) {
      &::before {
        width: 24px;
        height: 24px;
      }
    }
  }

  .file__send_link {
    display: none;
    color: #6b7280;

    &.is-tg-visible {
      display: inline-flex;
    }

    &::before {
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M220-80q-24 0-42-18t-18-42v-469q0-24 18-42t42-18h169v60H220v469h520v-469H569v-60h171q24 0 42 18t18 42v469q0 24-18 42t-42 18H220Zm229-267v-457l-88 88-43-43 161-161 161 161-43 43-88-88v457h-60Z'/%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M220-80q-24 0-42-18t-18-42v-469q0-24 18-42t42-18h169v60H220v469h520v-469H569v-60h171q24 0 42 18t18 42v469q0 24-18 42t-42 18H220Zm229-267v-457l-88 88-43-43 161-161 161 161-43 43-88-88v457h-60Z'/%3E%3C/svg%3E");
    }

    .file__download_text {
      display: none;
    }

    @media (max-width: 768px) {
      &::before {
        width: 24px;
        height: 24px;
      }
    }
  }
}

.field--type-file .file-widget-multiple__table-wrapper {
  margin: 0;
}

.field-files-view,
.form-managed-file {
  .file a {
    pointer-events: none;
    cursor: default;
    color: inherit;
    text-decoration: none;
  }

}