@import '~@payloadcms/ui/scss';

@layer payload-default {
  .rich-text-link {
    position: relative;

    .popup {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      .popup__hide-scrollbar,
      .popup__scroll-container {
        overflow: visible;
      }

      .popup__scroll-content {
        white-space: pre;
      }
    }

    .icon--x line {
      stroke-width: 2px;
    }

    &__popup {
      @extend %body;
      font-family: var(--font-body);
      display: flex;

      button {
        @extend %btn-reset;
        font-weight: 600;
        cursor: pointer;
        margin: 0;
      }
    }

    &__link-label {
      max-width: base(8);
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 2px;

      &:hover {
        background-color: var(--popup-button-highlight);
      }
    }
  }

  .rich-text-link__popup {
    display: flex;
    gap: calc(var(--base) * 0.25);
    button {
      &:hover {
        .btn__icon {
          background-color: var(--popup-button-highlight);
          .fill {
            fill: var(--theme-text);
          }
          .stroke {
            stroke: var(--theme-text);
          }
        }
      }
    }
  }

  .rich-text-link__popup-toggler {
    position: relative;
    border: 0;
    background-color: transparent;
    padding: 0;
    color: var(--theme-success-600);
    text-decoration: none;
    border-bottom: 1px dotted;
    cursor: text;

    &:focus,
    &:focus-within {
      outline: none;
    }

    &--open {
      z-index: var(--z-popup);
    }
  }
}