@use "../../../00-base/00-config/00-variables" as *;
@use "../../../00-base/01-helpers" as *;

@use "../00-link/link-helpers" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * Files
// *
////////////////////////////////////////////////////////////////////////////////


// * File link
// =============================================================================

.file {
  position: relative;
  display: inline-flex;
  gap: var(--gap-xs);
  align-items: center;
  background: none; // remove drupal's default file icons

  .icon {
    left: 0;
    text-align: center;
  }
}

.icon--file,
.icon--image,
.icon--pdf {
  margin: rem(-2) rem(-2) rem(-2) rem(-2);
  color: hsl(var(--clr-base));
  transition: all $duration $easing;

  &::before {
    margin: 0 rem(5) 0 0;
  }
}

.icon--file {
  @include icon((
    icon: file,
  ));
}

.icon--image {
  @include icon((
    icon: file-image,
  ));
}

.icon--pdf {
  @include icon((
    icon: file-pdf,
  ));
}

// * Download link
// =============================================================================

.list__item--download {
  font-size: var(--fs-small);
  line-height: var(--lh-small);

  box-shadow: none;
  transition: all $duration $easing;

  &:focus,
  &:hover {
    color: hsl(var(--clr-white));
    background-color: hsl(var(--clr-spot-1));
    box-shadow: 0 0 0 0.2em hsl(var(--clr-spot-1));

    .icon::before {
      color: hsl(var(--clr-white));
    }
  }

  .icon--file {
    color: hsl(var(--clr-spot-1));
  }

  a,
  a:visited {
    color: hsl(var(--clr-spot-1));
    transition-property: all;
  }

  a:focus,
  a:hover,
  a:active {
    color: hsl(var(--clr-white));
  }
}
