.AttachmentModal {
  --border-radius-default: 0.625rem;

  .modal-dialog {
    max-width: 26.25rem;
    @media (max-width: 600px) {
      max-height: 100%;
      padding-bottom: 1.5rem;
    }
  }

  .modal-content {
    padding: 0.5rem 1.25rem 1.875rem;
    max-height: calc(100vh - 3.25rem);
    @media (max-width: 600px) {
      padding-bottom: 0.25rem;
    }
  }

  .media-wrapper {
    max-height: 26rem;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;

    video,
    img {
      flex: 1;
      width: calc(50% - 0.15rem);
      height: 12rem;
      margin-bottom: 0.3125rem;
      border-radius: var(--border-radius-default);
      object-fit: cover;

      &:only-child {
        height: auto;
        max-height: 25rem;
        margin-bottom: 0;
      }

      &:nth-child(even) {
        margin-left: 0.3125rem;
      }
    }
  }

  .document-wrapper {
    max-height: 25rem;
    overflow: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin: 0.75rem 0 1.75rem;

    .File:not(:last-child) {
      margin-bottom: 1.5rem;
    }

    .file-icon {
      cursor: default !important;
    }
  }

  .attachment-caption-wrapper {
    position: relative;

    .form-control {
      background: var(--color-background);
    }

    .MentionTooltip {
      right: 0 !important;
      z-index: 0;
    }
  }

  .drop-target {
    position: relative;
    overflow: hidden;

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: var(--border-radius-default);
      pointer-events: none;

      opacity: 0;
      transition: 250ms opacity;
      z-index: 1;
    }

    &::before {
      background-image: var(--drag-target-border-hovered);
      background-color: var(--color-background);
    }

    &::after {
      content: attr(data-attach-description);
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--color-primary);
    }
  }

  &.hovered {
    .drop-target::before {
      opacity: 0.95;
    }

    .drop-target::after {
      opacity: 1;
    }

    .attachment-caption-wrapper,
    .document-wrapper,
    .media-wrapper,
    .form-control {
      pointer-events: none;
    }

    .document-wrapper,
    .media-wrapper {
      border-radius: var(--border-radius-default);
    }
  }

  &--send-wrapper {
    position: relative;
  }

  .CustomSendMenu {
    bottom: auto;

    .is-pointer-env & > .backdrop {
      width: 100%;
      top: -2.25rem;
      bottom: auto;
      height: 2.75rem;
    }
  }
}