/**
  * Download list
 */

.block-download-list {
  .download-list {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spacing) * .75);
    list-style: none;
    margin: 0;
    padding-left: 0;
  }
}

.download-list-item {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--spacing);
  padding: calc(var(--spacing) * 1.5) 0;

  &:first-child {
    padding-top: 0;
  }

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

  &:not(:last-child) {
    border-bottom: 1px solid var(--white);
  }

  @container (min-width: 576px) {
    flex-wrap: nowrap;
  }

  > span {
    display: block;
  }

  .title {
    color: var(--heading-color);
    width: 100%;

    @container (min-width: 576px) {
      flex: 1;
      width: auto;
    }
  }

  .download-info {
    color: var(--white);

    span {
      display: inline-block;
    }
  }

  .ext,
  .file-size {
    font-size: var(--font-size-16);
  }

  .ext {
    &::after {
      content: '·';
      display: inline-block;
    }
  }

  .trigger {
    display: inline-flex;
    margin-left: var(--spacing);

    .icon {
      display: inline-block;
      width: 20px;
    }
  }

  .download-link {
    color: var(--anchor-color);
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    column-gap: calc(var(--spacing) * .5);
    transition: var(--transition);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-style: dashed;
    text-underline-offset: 5px;

    svg {
      fill: currentColor;
      margin-top: -3px;
    }

    &:hover,
    &:focus {
      color: var(--anchor-color-hover);
      text-decoration-color: currentColor;
    }
  }
}