@import (reference) url('../../../../Icon.less');
@import (reference) url('../../../../IconButton.less');
@import (reference) url('../../../../Reset.less');

.ProsemirrorEnhancementMenuContainer {
  display: none;
  max-width: 50vw;
  position: absolute;
  z-index: 2;

  @media (@mq-l) {
    max-width: 31vw;
  }

  &.open {
    display: block;
  }
}

.ProsemirrorEnhancementMenu:not(:first-child) {
  margin-top: var(--gap-xs);
}

.ProsemirrorEnhancementMenu {
  margin-bottom: 0;

  &.open {
    opacity: 1;
    visibility: visible;
  }

  &-container {
    align-items: center;
    background: var(--color-white);
    box-shadow: var(--shadow-3);
    display: flex;
    font-size: var(--fontSize-s);
    line-height: var(--lineHeight-s);
    margin-bottom: 0;
    position: relative;
    white-space: nowrap;

    --Text-height: var(--lineHeight-s);

    &-link,
    &-link-goto {
      color: var(--Input-placeholderColor);
      cursor: pointer;
      line-height: 28px;
    }

    &-link,
    &-link-goto {
      margin-right: 10px;
      text-decoration: underline;
    }

    &-link {
      display: none;
      max-width: 15vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      @media (@mq-l) {
        display: inline-block;
      }
    }

    &-link-goto {
      margin-right: 10px;
      text-decoration: underline;

      @media (@mq-l) {
        display: none;
      }
    }

    &-label {
      background: var(--color-dominant1);
      font-weight: 700;
      height: calc(var(--Icon-size) + 2 * var(--gap-s));
      line-height: var(--Icon-size);
      margin-right: 5px;
      padding: var(--gap-s) var(--gap-m);
    }

    &-button {
      .IconButton;

      &::before {
        content: attr(data-icon);
      }

      &.remove {
        .IconButton.is-red;
      }
    }

    &.is-block {
      background: transparent;
      box-shadow: none;
      position: absolute;
      right: calc(var(--gap-m) - var(--gap-s));
      top: calc(var(--gap-m) - var(--gap-s));
      z-index: 3;
    }

    .open & {
      visibility: visible;
    }
  }
}
