@import '../../../../../../../scss/styles.scss';

.rich-text-link {
  position: relative;
  text-decoration: underline;

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

    .popup__scroll,
    .popup__wrap {
      overflow: visible;
    }

    .popup__scroll {
      white-space: pre;
      padding-right: base(.5);
    }
  }

  .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 0 0 base(.25);

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__link-label {
    max-width: base(8);
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: base(.25);
  }
}

.rich-text-link__popup-toggler {
  position: relative;
  border: 0;
  background-color: transparent;
  padding: 0;
  text-decoration: underline;
  cursor: text;

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

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