.attachments {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: $spacing-md;
}

.attachment {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  min-width: $spacing-xxl;
  overflow: visible;
  border-radius: $border-radius;

  & .attachment-thumb {
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: $spacing-xxl;
    height: $spacing-xxl;
    border: $border-width solid $primary;
    border-radius: $border-radius;
    color: $white;
    background-color: $primary;

    & .icon {
      font-size: $icon-lg;
    }

    & img {
      height: $spacing-xxl;
    }

    &:hover {
      border-color: $link-hover-color;
      background-color: $link-hover-color;
    }
  }

  & .attachment-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    min-width: $spacing-xxl;
    max-width: $spacing-2xl;
    margin-top: $spacing-xxs;
    font-size: $font-size-xs;
    text-align: center;
    line-height: 1.2;
    line-clamp: 3;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
  }

  & .attachment-btn {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 0;
    right: 0;
    width: $btn-sm-height;
    height: $btn-sm-height;
    padding: 0;
    font-size: $icon;
    border-radius: 0 $border-radius 0 0;

    .icon {
      font-size: $icon-sm;
    }
  }
}

.attachment.inverted .attachment-thumb {
  border-color: $border-color-dark;
}

.attachment.inverted .attachment-name {
  color: $white;
}

/* Selectable / checkbox attachment */

.attachment.selectable {
  margin-left: $spacing;
}

.attachment.selectable input {
  display: none;
}

.attachment.selectable label {
  margin-bottom: 0;
}

.attachment.selectable .attachment-thumb {
  background-color: $gray;
  border: $border-width solid $border-color;
  &:hover {
    background-color: $link-hover-color;
    border-color: $link-hover-color;
  }
}

.attachment.selectable label::before {
  content: "";
  position: absolute;
  top: 0;
  left: $spacing * -1;
  height: $spacing-md;
  width: $spacing-md;
  border: $border-width solid $primary;
  cursor: pointer;
  border-radius: $border-radius;
}

.attachment.selectable input:checked + label::before {
  background-color: $info;
  mask-image: url("@images/checkbox-sm-checked.svg");
  mask-repeat: no-repeat;
}

.attachment.selectable input:checked + label .attachment-thumb {
  color: $white;
  background-color: $info;
  border: $border-width solid $info;
  &:hover {
    background-color: $link-hover-color;
    border-color: $link-hover-color;
  }
}