File.scss

/*
 * Adding to denhaag-file tokens.
 *
 * In the Den Haag version, the entire .denhaag-file bar is an anchor element.
 * In OIP we use a div instead, because wrapping the whole bar in an anchor causes
 * screen readers to read all content (filename, size, action) as a single link.
 *
 * Additionally, OIP replaces .denhaag-file__link Div-with-tabindex, and uses a dedicated
 * anchor or button inside .denhaag-file__right, so javascript is allowed:
 * - download action: <a download> link and class .denhaag-file__link
 * - delete action: <button> with a confirmation handler and class .oip-denhaag-file__link--remove
 */

.denhaag-file.oip-denhaag-file {
  /* Adding OIP values that are not present in denhaag-file design tokens */
  border-radius: var(--border-radius);
  cursor: default;
  font-family: var(--oip-typography-sans-serif-font-family);

  .denhaag-file__left.oip-denhaag-file__left {
    // prevent the grey background to not cut into the outside border-radius
    border-radius: var(--border-radius);
  }

  .denhaag-file__link.oip-denhaag-file__link {
    text-decoration: none;

    &.oip-denhaag-file__link--remove {
      background-color: var(--color-white);
      border: none;
      font-family: var(--oip-typography-sans-serif-font-family);
      font-size: inherit;
      padding-block-start: 0;
      padding-block-end: 0;
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0;
      margin-inline-end: 0;
      cursor: pointer;
    }
  }

  .oip-denhaag-file--oip-extension {
    text-transform: uppercase;
  }

  .oip-denhaag-file__label {
    hyphens: auto;
  }
}