.c-rte-link-editor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  max-width: 400px;
  width: 100%;
  opacity: 0;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  transition: opacity 0.5s;
  will-change: transform;
  @apply !rounded-lg border border-solid border-gray-100-800 !shadow-lg;
}

.c-rte-link-editor-link-input {
  @apply my-2 flex max-w-full flex-nowrap items-center justify-between gap-4 border-gray px-6 py-2 text-sm text-s-blue-600-300;

  a {
    @apply block overflow-hidden text-ellipsis whitespace-nowrap text-s-blue-600-300 no-underline;

    &:hover {
      /* Can not use underline - The `underline` class does not exist. If `underline` is a custom class, */
      text-decoration-line: underline;
    }
  }
}

.c-rte-link-editor-link-preview {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-rte-link-editor-input-group {
  @apply border-0 border-b border-solid border-gray-100-800 px-3;
}

.c-rte-link-editor-button-wrap {
  @apply flex justify-end px-6 py-2;
}

.c-rte-link-editor-preview-attrs {
  @apply mt-1 flex gap-1;
}

.c-rte-link-editor-preview-attr {
  @apply rounded-md bg-purple-50-900 px-1 py-0.5 text-[10px] text-gray-600-300;
}

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 *
 */

@keyframes c-rte-glimmer-animation {
  0% {
    background: #f9f9f9;
  }
  .50% {
    background: #eeeeee;
  }
  .100% {
    background: #f9f9f9;
  }
}

.c-rte-link-preview {
}

.c-rte-link-preview-image-wrapper {
  @apply bg-purple-50-900 text-center;
}

.c-rte-link-preview-image {
  @apply m-auto block max-h-[250px] max-w-full;
}

.c-rte-link-preview-title {
  @apply mx-6 mt-4 font-semibold leading-5 text-gray-700-200;
}

.c-rte-link-preview-description {
  @apply mx-6 mb-4 mt-2 text-sm leading-5;
}

.c-rte-link-preview-glimmer {
  background: #f9f9f9;
  border-radius: 8px;
  height: 18px;
  margin-bottom: 8px;
  margin-left: 12px;
  margin-right: 12px;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: c-rte-glimmer-animation;
}

.c-rte-link-preview__replace-text-btn {
  @apply mb-4 ml-5;
}
