docmost/apps/client/src/features/editor/components/link/link.module.css

.linkWrapper {
  position: relative;
  display: inline;
}

.linkInput {
  border: 1.5px solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  background: transparent;

  &:focus {
    border-color: light-dark(
      var(--mantine-color-blue-4),
      var(--mantine-color-blue-6)
    );
    box-shadow: 0 0 0 1px
      light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-6));
  }
}

.pageIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--mantine-color-dimmed);
  font-size: 16px;
  margin-top: 2px;
}

.searchItem {
  width: 100%;
  padding: 7px 4px;
  color: var(--mantine-color-text);
  border-radius: var(--mantine-radius-sm);

  &:hover {
    @mixin light {
      background: var(--mantine-color-gray-1);
    }

    @mixin dark {
      background: var(--mantine-color-gray-light);
    }
  }
}

.selectedSearchItem {
  @mixin light {
    background: var(--mantine-color-gray-1);
  }

  @mixin dark {
    background: var(--mantine-color-gray-light);
  }
}

.linkChip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--mantine-radius-sm);
  cursor: pointer;

  @mixin light {
    background: var(--mantine-color-gray-1);
  }

  @mixin dark {
    background: var(--mantine-color-dark-5);
  }

  &:hover {
    @mixin light {
      background: var(--mantine-color-gray-2);
    }

    @mixin dark {
      background: var(--mantine-color-dark-4);
    }
  }
}

.removeLink {
  width: 100%;
  padding: 4px;
  border-radius: var(--mantine-radius-sm);

  &:hover {
    @mixin light {
      background: var(--mantine-color-gray-1);
    }

    @mixin dark {
      background: var(--mantine-color-dark-5);
    }
  }
}