@import 'mzinga/scss';

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

  .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;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }
  }

  &__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;
  text-decoration: underline;
  cursor: text;

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

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