// traduct boostrap file browser
.custom-file-input:lang(fr) ~ .custom-file-label::after {
  content: "Parcourir";
  background-color: #3444bf;
  color: #fff;
}

.aa-file,
.aa-image,
.media-link-wrap {
  border: 1px solid #d1d3e2;
  border-radius: .35rem;
  padding: 10px 10px;
  position: relative;

  &:hover {
    border-color: #234190;
  }

  .custom-file-input {
    cursor: pointer;
  }

  svg.icon {
    width: 28px;
    height: 28px;
    padding: 3px;
    fill: #234190;
  }

  .delete-wrap {
    display: inline-block;
    position: absolute;
    bottom: 1px;
    right: 10px;
  }
}

.aa-image, .media-link-wrap {
  .preview {
    position: relative;
    background: repeating-linear-gradient(-45deg, #eaecf4, #eaecf4 10px, #d0d2e2 10px, #d0d2e2 20px);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #d0d2e2;
    display: flex;
    flex-direction: column;
    height: 270px;
    overflow: hidden;

    a {
      display: block;
    }

    .preview-wrap {
      text-align: center;
      height: 100%;
      width: 100%;
      object-fit: contain;

      img, .no-media-icon {
        object-fit: contain;
        height: auto;
        width: auto;
        max-width: calc(100% - 10px);
        max-height: calc(100% - 10px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      img {
        display: inline-block;
      }

      .no-media-icon {
        display: none;

        svg {
          width: 120px;
          fill: rgba(34, 66, 145, .5);
        }
      }
    }

    &.missing-media {
      .img {
        display: none;
      }

      .no-media-icon {
        display: inline-block;
      }
    }

    .media-link {
      position: absolute;
      right: 0;
      bottom: 0;
      max-width: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-align: right;
      transition: max-width .3s, background-color .3s;
      border-top-left-radius: 7px;
      padding-right: 10px;

      &:hover, &:active {
        max-width: calc(100%);
        background: #fff;
        cursor: pointer;
      }
    }

    .unlinked-info {
      position: absolute;
      top: 10px;
      left: 10px;
      color: $adminRed;
      font-size: 30px;
    }
  }
}

.media-link-wrap {
  .preview-outer {
    cursor: pointer;
  }
  .media-link-actions {
    display: flex;
    flex-direction: column;
    max-width: 240px;
    gap: 10px;
    align-items: baseline;
  }
}
